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 }}






    {{ form.actions }}
Labels:

Comments

  1. Gregory Davis9 December 2018 at 07:25

    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...
Post a Comment
Read more

Dependency Injection in Drupal 8

Here are the important nuggets: DI is a design pattern used in programming. DI uses composition. DI achieves inversion of control. Dependency == service that your class needs == object of a certain type. Inject == provide == compose == assemble. Container == service container == dependency container. Instead of using  \Drupal::service('foo_service') , get the service from the  $container  if using a class. And the important reasons: Externalizing dependencies makes code easier to test. It allows dependencies to be replaced without interfering with other functionality. Retrieving dependencies from the container is better for performance. Services: node.grant_storage The easiest examples to find are services that have arguments, because you can search *.services.yml files for the word "arguments". In  node.services.yml  for example, there is this entry: node.grant_storage: class: Drupal\node\NodeGrantDatabaseStorage argument...
Post a Comment
Read more

Mysql Interview Questions

Current mysql version : 8 ( last was 5.7 ,  5.7 to directly 8 ) SHOW FULL PROCESSLIST is used to see all the query executing when refresh the site. 1 second == 1000 mili second, 0-500 ms responce time of any query is ok How to Read the MySQL Slow Query Log :   The MySQL slow query log is where the MySQL database server registers all queries that exceed a given threshold of execution time. This can often be a good starting place to see which queries are slowest and how often they are slow. MySQL on your server is configured to log all queries taking longer than 0.1 seconds. /var/log/mysql/mysql-slow.log Use EXPLAIN or EXPLAIN EXTENDED to explain the query how it is executed. MySQL  describe  or  ANALYZE  command shows the structure of the table. Best practice in respect of performance : 1 - always use index, 2 - index types , primary index and combined field index like fname & lname in one index not two index, 3 - one index sc...
Post a Comment
Read more