Field group for developers
Hooks
hook_field_group_formatter_info
Beneath is an example of a form array. The same is available for the "display" key. The core example of fieldset is shown as guidance to create your custom implementations.
/**
* Implements hook_field_group_formatter_info().
*/
function mymodule_field_group_formatter_info() {
return array(
'form' => array(
'fieldset' => array(
'label' => t('Fieldset'),
'description' => t('This fieldgroup renders the inner content in a fieldset with the title as legend.'),
'format_types' => array('open', 'collapsible', 'collapsed'),
'instance_settings' => array('classes' => ''),
'default_formatter' => 'collapsible',
),
),
);
}
hook_field_group_format_settings
This will return a form of elements for the format settings. The example beneath shows what is possible for the div format type.You can add specific validation callbacks your element or add extra javascript handlers. You are totally free to do what you need.
/**
* Implements hook_field_group_format_settings().
*
* @params Object $group The group object.
* @return Array $form The form element for the format settings.
*/
function mymodule_field_group_format_settings($group) {
// Add optional instance_settings.
switch ($group->format_type) {
case 'div':
$form['instance_settings']['effect'] = array(
'#title' => t('Effect'),
'#type' => 'select',
'#options' => array('none' => t('None'), 'blind' => t('Blind')),
'#default_value' => isset($group->format_settings['instance_settings']['effect']) ? $group->format_settings['instance_settings']['effect'] : $formatter['instance_settings']['effect'],
'#weight' => 2,
);
$form['instance_settings']['classes'] = array(
'#title' => t('Extra CSS classes'),
'#type' => 'textfield',
'#default_value' => isset($group->format_settings['instance_settings']['classes']) ? $group->format_settings['instance_settings']['classes'] : $formatter['instance_settings']['classes'],
'#weight' => 3,
'#element_validate' => array('field_group_validate_css_class'),
);
break;
}
return $form;
}
hook_field_group_pre_render
This function (only) gives you the opportunity to 'create' the given wrapper field. In the example you see the division format type again, but this time for the front end. Here is where you add the fancy javascript and css control stuff. With a little bit of creativity, this is the hook where the magic happens.
/**
* Implements hook_field_group_pre_render().
*
* @param Array $elements by address.
* @param Object $group The Field group info.
*/
function mymodule_field_group_pre_render(&$element, $group, &$form) {
switch ($group->format_type) {
// Normal or collapsible div.
case 'div':
$effect = isset($group->format_settings['instance_settings']['effect']) ? $group->format_settings['instance_settings']['effect'] : 'none';
$speed = isset($group->format_settings['instance_settings']['speed']) ? $group->format_settings['instance_settings']['speed'] : 'none';
$add = array(
'#type' => 'markup',
'#weight' => $group->weight,
);
$classes .= " speed-$speed effect-$effect";
if ($group->format_settings['formatter'] != 'open') {
$add['#prefix'] = '<div class="field-group-format ' . $classes . '">
<span class="field-group-format-toggler">' . check_plain(t($group->label)) . '</span>
<div class="field-group-format-wrapper" style="display: ' . ($collapsed ? 'none' : 'block') . ';">';
$add['#suffix'] = '</div></div>';
}
else {
$add['#prefix'] = '<div class="field-group-format ' . $group->group_name . ' ' . $classes . '">';
$add['#suffix'] = '</div>';
}
$element += $add;
if ($effect == 'blind') {
drupal_add_library('system', 'effects.blind');
}
break;
}
}
hook_field_group_build_pre_render_alter
We always have the opportunity to alter the complete form or structure of elements. You could do all sorts of things here, but most of them will be corrections to the built already processed by fields and field_group.
/**
* Implements hook_field_group_build_pre_render_alter().
* @param Array $elements by address.
*/
function mymodule_field_group_build_pre_render_alter(&$element) {
// While custom fields and groups are present at the root level of the form
// e.g. $element['field_custom_field'] they will later be moved into
// $element['additional_settings']['group']['#groups']['additional_settings']['field_custom_field']
// which is where we need to alter them.
// Use the states API to set the visibility of a fieldset within a vertical
// tab based on the value of a custom checkbox field.
if (isset($element['group_parent_vertical_tab'])) {
$element['additional_settings']['group']['#groups']['additional_settings']['group_parent_vertical_tab']['group_child_fieldset']['#states'] = array(
'visible' => array(
':input[name="field_custom_checkbox[' . LANGUAGE_NONE . ']"]' => array('checked' => TRUE),
),
);
}
}
hook_field_group_format_summary
Usually for your field, you won't need this hook. However when you want to add extra things to the field group configuration summary on the fields UI, here's the place.
/**
* Implements hook_field_group_format_summary().
*/
function mymodule_field_group_format_summary($group) {
The javascript hook
Last but not least, we have a javascript hook to do extra fancy stuff for the controls and javascript addons you made in hook_field_group_pre_render.
/**
* Implements Drupal.FieldGroup.processHook().
*/
Drupal.FieldGroup.Effects.processHtabs = {
execute: function (context, settings) {
}
}
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion