Adding vertical tabs summary on Drupal’s admin pages

In Drupal 7 most modules add a short summary under the vertical tabs in the admin pages. Below we see “Flooding disabled” under the “Take a look settings” tab.

Once the “Enable takealook for this content?” checkbox is clicked the summary is updated with the actual values of the other textfields (see below).

By adding the summary we add immediate user feedback, which is a nice usability improvement.

Adding the vertical tabs summary

Improving your module’s admin pages by adding the vertical tab’s summary is quiet easy. We need to add some code to our form fields and add some javascript.

Adding code to formfields

Below we find the code to create the “Take a look settings” tab. It’s a hook_form_alter to insert our form elements on node create/edit forms.

/**
 * Implements hook_form_FORM_ID_alter().
 *
 * We want to let the node author override the
 * content type default threshold and window settings.
 * 
 */
function takealook_form_node_form_alter(&$form, $form_state) {
  dsm($form);
  $type = $form['#node']->type;
  
  $form['takealook'] = array(
    '#type' => 'fieldset',
    '#title' => t('Take a look settings'),
    '#description' => t('Determine if users can limit the access to a page.'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#group' => 'additional_settings',
    '#access' => user_access('takealook_administer'),
    '#attached' => array(
      'js' => array(drupal_get_path('module', 'takealook') . '/takealook.js'),
    ),
    '#attributes' => array('class' => array('takealook-settings-form')),
  );
  
  $form['takealook']['takealook_enabled'] = array(
    '#type' => 'checkbox',
    '#title' => t('Enable takealook for this content?'),
    '#description' => t('Users will only be able to see the nodes of this content type a number of times in a row within a specific timeframe.'),
    '#default_value' => isset($form['#node']->takealook_enabled) ? $form['#node']->takealook_enabled: variable_get('takealook_enabled_' .  $type, 1),
  );
  
  $form['takealook']['takealook_threshold'] = array(
    '#type' => 'textfield',
    '#title' => t('Threshold'),
    '#description' => t('Set the default threshold level. This is the number of times a user can access the content before being temporarily blocked'),
    '#default_value' => isset($form['#node']->takealook_threshold) ? $form['#node']->takealook_threshold : variable_get('takealook_threshold_' . $type, 1),    
  );
  
  $form['takealook']['takealook_window'] = array(
    '#type' => 'textfield',
    '#title' => t('Window'),
    '#description' => t('Set the default time window for which the user can access the content. It should be spcified in seconds. For example 3600 is an hour.'),
    '#default_value' => isset($form['#node']->takealook_window) ? $form['#node']->takealook_window : variable_get('takealook_window_' . $type, 3600),
  );
  
  $form['takealook']['takealook_redirect'] = array(
    '#type' => 'textfield',
    '#title' => t('Redirect page'),
    '#description' => t('The page the user will be redirected to when he exceeded the threshold. Defaults to the homepage.'),
    '#default_value' => isset($form['#node']->takealook_redirect) ? $form['#node']->takealook_redirect : variable_get('takealook_redirect_' . $type, ''),
    '#element_validate' => array('takealook_redirect_validate'),
  );
}

The code that we need to insert is part of the fieldset element:

  $form['takealook'] = array(
    '#type' => 'fieldset',
    '#title' => t('Take a look settings'),
    '#description' => t('Determine if users can limit the access to a page.'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
    '#group' => 'additional_settings',
    '#access' => user_access('takealook_administer'),
    '#attached' => array(
      'js' => array(drupal_get_path('module', 'takealook') . '/takealook.js'),
    ),
    '#attributes' => array('class' => array('takealook-settings-form')),
  );

More in particular, we indicate where the javascript is located that does its magic, and we need to add a css class to the fieldset. This allows us to target the fieldset with javascript more easily.

Below the two items we added for this purpose.

    '#attached' => array(
      'js' => array(drupal_get_path('module', 'takealook') . '/takealook.js'),
    ),
    '#attributes' => array('class' => array('takealook-settings-form')),

Adding the javascript

We added the javascript in the takealook.js file. Below you find the code responsible for the summary under the fieldset.

(function ($) {
   
  Drupal.behaviors.takealookFieldsetSummeries = {
    attach: function (context) {
      $('fieldset.takealook-settings-form', context).drupalSetSummary(function (context) {
        if($('.form-item-takealook-enabled input', context).is(':checked')) {
          var threshold = $('.form-item-takealook-threshold input', context).val();
          var window = $('.form-item-takealook-window input', context).val()/60;
          return Drupal.t('Flooding enabled: @threshold time(s) in @window minute(s)', {'@threshold' : threshold, '@window' : window});
        }
        else {
          return Drupal.t('Flooding disabled');
        }
      }); 
    }
  }
})(jQuery);

1. First we target our fieldset with the css class we just adding in our code.
2. We call drupalSetSummary. This will display a string underneath the fieldset.
3. We check if the checkbox is checked: ($('.form-item-takealook-enabled input', context).is(':checked')). Note that we didn’t added the css class form-item-takealook-enabled in our code like we did with the fieldset. Drupal output it automatically. Our element is wrapped in a div with the class in the following pattern form–item–[our-nested-form-elelements].
4. If so, get the value of the other textfields and use them to create to be returned in a string, if not, return another string.

That’s it.