2

The node edit form got a nice overhaul for Drupal 8's default admin theme, whereby a lot of the metadata fields like Revisions, Meta Tags, URL Aliases, Publish status, Promote status, etc are moved into a sidebar.

I'm using the Group module, and have enabled metatag integration and revisions via patch from #2829966.

Currently however the meta tags and revisions appear in a vertical tabs block at the bottom of the edit form, making the page extra long.

How can I get those items into a sidebar like the Node edit form does?

2

Drupal\node\NodeForm provides it own build() method that puts the meta items into an advanced group, and then the classy template node-edit-form.html.twig renders that group in a sidebar. The form builder also attaches the node/drupal.node library, which provides the layout CSS.

To copy this layout and style for another entity, you could implement hook_form_alter in a custom module and move the metadata form items into an advanced group like NodeForm does. You also need to theme the form with the node_edit_form template and attach the node/drupal.node library.

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  // Select the group add/edit form.
  if (in_array('group_form', $form['#theme'])) {
    // Use the node edit form template.
    $form['#theme'][] = 'node_edit_form';

    // Use the node form layout library.
    $form['#attached']['library'] = ['node/drupal.node'];

    // Create the advanced element if it doesn't exist.
    if (!isset($form['advanced'])) {
      $form['advanced'] = [
        '#type' => 'container',
        '#weight' => 99,
      ];
    }
    else {
      // Make 'advanced' a container instead of vertical_tabs.
      $form['advanced']['#type'] = 'container';
    }

    // Add the style class to tell the admin theme how to style it.
    $form['advanced']['#attributes']['class'][] = 'entity-meta';

    // Move detail elements into 'advanced'.
    $form['detail_element_you_want_to_move']['#group'] = 'advanced';
  }
}

Alternatively, you could create your own Twig template and library and use those instead of borrowing from node.

5
  • 1
    Your example code is not entirely correct: The advanced element may not exist in group forms, so it should be added then instead of the entity-meta class only. Also, moving all elements to meta will cause them to appear as header of the sidebar (see the entity-meta__header class). I suppose the OP is looking for collapsible details instead. They should be added directly to the advanced element by using the '#group' => 'advanced' property. Call me nitpicker, but answers at DA remain for everybody with similar issues. For earning my vote, please edit your answer. – Mario Steinitz Feb 25 '19 at 2:34
  • Thanks Mario. I've corrected the example. – bradtreloar Feb 25 '19 at 7:01
  • Thanks Brad and Mario. Going to give this a try and report back! – JamesWilson Feb 25 '19 at 20:28
  • This answer is close, but not quite a 100% solution, because as written, this will just move the vertical tabs to the sidebar (screenshot i.imgur.com/hvxGNI6.png). I'm trying to figure out what the Node form does specifically to ensure the 'advanced' form item doesn't get turned into a vertical tab, but cannot figure it out. – JamesWilson Feb 25 '19 at 22:38
  • 1
    I've discovered that Seven (the default admin theme) changes the #type of advanced from vertical_tabs to a simple container in seven_form_node_form_alter. I've updated the example code to do the same. (Without help from the admin theme's alter function, NodeForm would happily let the advanced panel render as vertical tabs.) – bradtreloar Feb 26 '19 at 6:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.