function field_example_field_widget_form in Examples for Developers 7

Implements hook_field_widget_form().

hook_widget_form() is where Drupal tells us to create form elements for our field's widget.

We provide one of three different forms, depending on the widget type of the Form API item provided.

The 'field_example_colorpicker' and 'field_example_text' are essentially the same, but field_example_colorpicker adds a javascript colorpicker helper.

field_example_3text displays three text fields, one each for red, green, and blue. However, the field type defines a single text column, rgb, which needs an HTML color spec. Define an element validate handler that converts our r, g, and b fields into a simulated single 'rgb' form element.

Related topics

File

field_example/field_example.module, line 234

An example field using the Field Types API.

Code

function field_example_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {
  $value = isset($items[$delta]['rgb']) ? $items[$delta]['rgb'] : '';
  $widget = $element;
  $widget['#delta'] = $delta;
  switch ($instance['widget']['type']) {
    case 'field_example_colorpicker':
      $widget += array(
        '#suffix' => '<div class="field-example-colorpicker"></div>',
        '#attributes' => array(
          'class' => array(
            'edit-field-example-colorpicker',
          ),
        ),
        '#attached' => array(
          // Add Farbtastic color picker.
          'library' => array(
            array(
              'system',
              'farbtastic',
            ),
          ),
          // Add javascript to trigger the colorpicker.
          'js' => array(
            drupal_get_path('module', 'field_example') . '/field_example.js',
          ),
        ),
      );

    // DELIBERATE fall-through: From here on the field_example_text and
    // field_example_colorpicker are exactly the same.
    case 'field_example_text':
      $widget += array(
        '#type' => 'textfield',
        '#default_value' => $value,
        // Allow a slightly larger size that the field length to allow for some
        // configurations where all characters won't fit in input field.
        '#size' => 7,
        '#maxlength' => 7,
      );
      break;
    case 'field_example_3text':

      // Convert rgb value into r, g, and b for #default_value.
      if (!empty($value)) {
        preg_match_all('@..@', substr($value, 1), $match);
      }
      else {
        $match = array(
          array(),
        );
      }

      // Make this a fieldset with the three text fields.
      $widget += array(
        '#type' => 'fieldset',
        '#element_validate' => array(
          'field_example_3text_validate',
        ),
        // #delta is set so that the validation function will be able
        // to access external value information which otherwise would be
        // unavailable.
        '#delta' => $delta,
        '#attached' => array(
          'css' => array(
            drupal_get_path('module', 'field_example') . '/field_example.css',
          ),
        ),
      );

      // Create a textfield for saturation values for Red, Green, and Blue.
      foreach (array(
        'r' => t('Red'),
        'g' => t('Green'),
        'b' => t('Blue'),
      ) as $key => $title) {
        $widget[$key] = array(
          '#type' => 'textfield',
          '#title' => $title,
          '#size' => 2,
          '#default_value' => array_shift($match[0]),
          '#attributes' => array(
            'class' => array(
              'rgb-entry',
            ),
          ),
          '#description' => t('The 2-digit hexadecimal representation of @color saturation, like "a1" or "ff"', array(
            '@color' => $title,
          )),
        );

        // Since Form API doesn't allow a fieldset to be required, we
        // have to require each field element individually.
        if ($instance['required'] == 1) {
          $widget[$key]['#required'] = 1;
        }
      }
      break;
  }
  $element['rgb'] = $widget;
  return $element;
}