Skip to main content

How to theme form in Drupal 8

https://www.bryanbraun.com/2013/08/17/using-hook-form-base-form-id-alter/


use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element;

/*
 * Implement hook_form_base_id_alter()
 */

function atadmin_form_node_form_alter(&$form, FormStateInterface $form_state) {
  $node = $form_state->getFormObject()->getEntity();
 if($form['#form_id'] == 'node_story_form' || $form['#form_id'] == 'node_story_edit_form'){
    $form['#theme'] = array('at_node_story_form');
 }elseif($form['#form_id'] == 'node_video_form' || $form['#form_id'] == 'node_video_edit_form'){
   $form['#theme'] = array('at_node_video_form');
 }elseif($form['#form_id'] == 'node_photo_gallery_form' || $form['#form_id'] == 'node_photo_gallery_edit_form'){
   $form['#theme'] = array('at_node_photo_gallery_form');
 }elseif($form['#form_id'] == 'node_poll_form' || $form['#form_id'] == 'node_poll_edit_form'){
   $form['#theme'] = array('at_node_poll_form');
 }
}
I implemented the hook "hook_form_base_id_alter" in my atadmin.theme file. Where atadmin is my theme name. Now I am going to theme the form of Story,video , photo_gallery content types , The Form Url would be , node/add/story,node/add/video etc
/**
 * Implements hook_theme()
 */
function atadmin_theme() {
    $themes['at_node_story_form'] = ['render element' => 'form'];
    $themes['at_node_video_form'] = ['render element' => 'form'];
    $themes['at_node_photo_gallery_form'] = ['render element' => 'form'];
    $themes['at_node_poll_form'] = ['render element' => 'form'];
   return $themes;
}
Implement hook_theme() , in the same file name Now create the twig files with the below names , Just replaces the theme key '_' to '-' like below ,

  • at-node-story-form.html.twig
  • at-node-video-form.html.twig
  • at-node-photo-gallery-form.html.twig
  • at-node-poll-form.html.twig
And The twig file code would be something like below, 


{{ form|without('field_related_stories','actions','advanced', 'footer','group_seo_meta_tags') }}
{{ form.group_section_category‎ }}
{{ form.group_custom_advanced }} {{ form.group_story_highlights }} {{ form.group_other_setting }} {{ form.group_story_date_time }} {{ form.group_story_social_media }} {{ form.group_story_other_setting }} {{ form.group_seo_meta_tags }} {{ form.field_related_stories }}{{ form.footer }}

Comments

  1. wow this is do much helpful i also searching such tips thanks for sharing this
    drupal developers australia

    ReplyDelete

Post a Comment

Popular posts from this blog

Get The field values of node in Drupal 8

use Drupal \ node \ NodeInterface ; /** * Implements hook_ENTITY_TYPE_insert() for node entities. * * This tests saving a node on node insert. * * @see \Drupal\node\Tests\NodeSaveTest::testNodeSaveOnInsert() */ function node_test_node_insert ( NodeInterface $node ) { // Set the node title to the node ID and save. if ( $node - > getTitle ( ) == 'new' ) { $node - > setTitle ( 'Node ' . $node - > id ( ) ) ; $node - > setNewRevision ( FALSE ) ; $node - > save ( ) ; } } Now There is so many functions are there to get the values, For All the functions available visit the API code, https://api.drupal.org/api/drupal/core%21modules%21node%21src%21NodeInterface.php/interface/NodeInterface/8.2.x Some of as below, Node edit form, Drupal 8 Automatically Load the whole object no need to load the entity like below, if ($event->getFormId() == 'node_alexa_audio_clips_edit_form') { $node = \Drupal::ro...

Drupal Setup with docker

Option 1:  docker pull mysql docker pull phpmyadmin docker pull drupal docker run -d --name MysqlClient -e MYSQL_ROOT_PASSWORD=drupal mysql Download the phpmyadmin image and Setup Container: docker run --name phpmyadmin -d --link MysqlClient:db -p 8083:80 phpmyadmin Download the Drupal image and Setup Container: docker run -d --name dweb2 --link MysqlClient -p 8082:80 -e MYSQL_USER:root -e MYSQL_PASSWORD:drupal drupal   We are using docker4 drupal and following below URL https://wodby.com/docs/1.0/stacks/drupal/local/ From Mount my codebase Download and unpack docker4drupal.tar.gz with hidden files in a new directory, also get the drupal code with in web directory composer create - project drupal / recommended - project my_site_name_dir It means with in new directory we have docker files and drupal files also has web folder for drupal. now run docker-compose up -d Now PROJECT_BASE_URL is mentioned in .env file open this url in the web with port, it will open the drupal page, ...