function field_example_field_widget_form

Implements hook_field_widget_form().

hook_widget_form() is where Backdrop 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

modules/examples/field_example/field_example.module, line 236

Hook implementations for the Field Example module.

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 the Farbtastic color-picker library.
          'library' => array(
            array('system', 'farbtastic'),
          ),
          // Add JavaScript to trigger the color picker.
          'js' => array(backdrop_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(backdrop_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;
}