Skip to content

Instantly share code, notes, and snippets.

@leymannx
Last active February 16, 2024 10:10
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save leymannx/d99b43ffd867521fcabb4cd750fba998 to your computer and use it in GitHub Desktop.
Save leymannx/d99b43ffd867521fcabb4cd750fba998 to your computer and use it in GitHub Desktop.
How to create horizontal tabs programmatically in Drupal 8, requires Field Group module
<?php
// How to create horizontal tabs programmatically in Drupal 8, requires Field Group module
$form = array();
$form['my_field'] = array(
'#type' => 'horizontal_tabs',
'#tree' => TRUE,
'#prefix' => '<div id="unique-wrapper">',
'#suffix' => '</div>',
);
$items = array(
array(
'nid' => 1,
'name' => 'Item 1'
),
array(
'nid' => 2,
'name' => 'Item 2'
),
array(
'nid' => 3,
'name' => 'Item 3'
),
array(
'nid' => 4,
'name' => 'Item 4'
),
);
$counter = 1;
foreach ($items as $item) {
$nid = $item['nid'];
$form['my_field']['stuff'][$nid] = array(
'#type' => 'details',
'#title' => t('Item @no', array('@no' => $counter)),
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
$form['my_field']['stuff'][$nid]['form']['item_id'] = array(
'#type' => 'value',
'#value' => $item['nid'],
);
$form['my_field']['stuff'][$nid]['form']['item_name'] = array(
'#type' => 'value',
'#value' => $item['name'],
);
$form['my_field']['stuff'][$nid]['form']['remove'] = array(
'#type' => 'checkbox',
'#title' => t('Remove this item'),
'#weight' => -51,
);
// more field definition
$form['my_field']['stuff'][$nid]['form']['#tree'] = TRUE;
$form['my_field']['stuff'][$nid]['form']['#parents'] = array('my_field', 'stuff', $nid, 'form');
$counter++;
}
// under certain circumstances you have to attach the horizontal tabs library manually
$form['#attached']['library'][] = 'field_group/formatter.horizontal_tabs';
return $form;
@cjgratacos
Copy link

Thank you sir, really helpful gist

@csirmazbendeguz
Copy link

This was immensely helpful, I already replaced most of our custom "horizontal tab" code with this. Thanks!

@kamalkech
Copy link

Notice: Undefined index: #group_name in field_group_theme_suggestions_alter() (line 89 of modules/contrib/field_group/field_group.module).

@munkyonline
Copy link

I couldn't get this working in my custom module but this patch resolves the Undefined index notice https://www.drupal.org/files/issues/field_group-fix_notices-2942075-3.patch from this issue thread https://www.drupal.org/project/field_group/issues/2942075

@Spurlos
Copy link

Spurlos commented Apr 3, 2019

https://gist.github.com/leymannx/d99b43ffd867521fcabb4cd750fba998#file-drupal8horizontaltabs-php-L58
who is seeing only accordions using the snippet above and not tabs, change the library name to field_group/element.horizontal_tabs

@mialdi98
Copy link

Works on drupal 9 like a charm!

@guigerard
Copy link

https://gist.github.com/leymannx/d99b43ffd867521fcabb4cd750fba998#file-drupal8horizontaltabs-php-L58 who is seeing only accordions using the snippet above and not tabs, change the library name to field_group/element.horizontal_tabs

super useful comment, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment