Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Show comment
Hide comment
@cjgratacos

cjgratacos Jan 2, 2018

Thank you sir, really helpful gist

Thank you sir, really helpful gist

@csirmazbendeguz

This comment has been minimized.

Show comment
Hide comment
@csirmazbendeguz

csirmazbendeguz Jan 12, 2018

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

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

@kamalkech

This comment has been minimized.

Show comment
Hide comment
@kamalkech

kamalkech Mar 22, 2018

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

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

@munkyonline

This comment has been minimized.

Show comment
Hide comment
@munkyonline

munkyonline Jul 15, 2018

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

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

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