Collapsible Form Item Descriptions

emfluence™ needed to start including fairly lengthy descriptions on some of their fields today, without taking all the screen real estate or bothering the users that already knew the system. The answer everyone agreed would be best would be to allow the form items to have collapsible descriptions. I traced out a way to do this by overriding the form_item theme provided by the basic form.inc from Drupal. This could be done through your template file, or a module by overriding the theme function (I explained this in another fragment a couple weeks ago) in case you're running multiple themes.

The following is a copy paste of the form.inc theme_form_item code, until you get to the description handling. It should be fairly readable, but I will point one thing out. Make sure you have some vague idea how many characters fit on a line! In our case, the ideal number was 130ish. If you make a collapsible item out of something that could fit on one line anyway you just add more processing from the server, and the client's javascript, while you gain nothing. Just let those one line descriptions drop right in, much better for everyone involved.

  1. function custom_code_form_element($element, $value) {
  2.   // This is also used in the installer, pre-database setup.
  3.   $t = get_t();
  4.  
  5.   $output = '<div class="form-item"';
  6.   if (!empty($element['#id'])) {
  7.     $output .= ' id="'. $element['#id'] .'-wrapper"';
  8.   }
  9.   $output .= ">\n";
  10.   $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';
  11.  
  12.   if (!empty($element['#title'])) {
  13.     $title = $element['#title'];
  14.     if (!empty($element['#id'])) {
  15.       $output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
  16.     }
  17.     else {
  18.       $output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
  19.     }
  20.   }
  21.  
  22.   $output .= " $value\n";
  23.  
  24.   if (!empty($element['#description'])) {
  25.     if( strlen($element['#description']) <= 130 ){
  26.       // Original Method
  27.       $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  28.     } else {
  29.       // Collapsible Method
  30.       $description = array(
  31.         '#type' => 'fieldset'
  32.         ,'#collapsible' => true
  33.         ,'#collapsed' => true
  34.         ,'#prefix' => ' <div class="description">'
  35.         ,'#suffix' => ' </div>'
  36.         ,'#title' => t($element['#title'] . ' Description')
  37.         ,'text' => array(
  38.           '#type' => 'markup'
  39.           ,'#value' => '<div>' . $element['#description'] . '</div>'
  40.         )
  41.       );
  42.       $output .= drupal_render($description);
  43.     }
  44.   }
  45.  
  46.   $output .= "</div>\n";
  47.  
  48.   return $output;
  49. }

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.