Field API Tutorial, Screencast

This tutorial is about Field API. Field API is a new API in Drupal. Field API has been introduced in Drupal 7. When you will install Drupal 7, there will be a module Field UI. In Drupal 7, many modules of CCK has come in Field UI Module. This tutorial is very helpful to understand the working of Field API and Field UI Module.



In this tutorial, you will learn about the working of "Color Picker" module. You can download that module by clicking on this link. Download


Color Picker Module Code

colorpicker.info
; $Id: colorpicker.info,v 1.5 2009/06/12 08:39:37 dries Exp $
name = Color Picker
description = Defines an RGB color picker
version = VERSION
core = 7.x
files[] = colorpicker.module
colorpicker.module
<?php
// $Id$

/**
* @file
* Defines a simple color picker field type.
*/
/***************************************************************
* Field Type API hooks
***************************************************************/

/**
* Implement hook_field_info().
*/
function colorpicker_field_info() {
  return array(
    'colorpicker_rgb' => array(
  'label' => t('Color RGB'),
  'description' => t('Stores an RGB color.'),
  'default_widget' => 'colorpicker_3text',
  'default_formatter' => 'colorpicker_helloworld',
),
  );
}

/**
* Implement hook_field_schema().
*/
function colorpicker_field_schema($field) {
  $columns = array(
    'rgb' => array('type' => 'varchar', 'length' => 7, 'not null' => FALSE),
  );
  return array('columns' => $columns);
}

/**
* Implement hook_field_validate().
*/
function colorpicker_field_validate($obj_type, $object, $field, $instance,
$langcode, &$items, &$errors) {
  foreach($items as $delta => $item) {
    if(isset($item['rgb'])) {
      if(! preg_match('@^#[0-9a-f]{6}$@', $item['rgb'])) {
    $errors[$field['field_name']][$langcode][$delta][] = array(
      'error' => 'colorpicker_invalid',
  'message' => t('Color must be an HTML spec'),
    );
  }
}
  }
}


/**
* Implement hoo_field_is_empty().
*/
function colorpicker_field_is_empty($item, $field) {
  return empty($item['rgb']);
}

/***********************************************************************
*  Field Type API: Formatter
**********************************************************************/

/**
* Implement hook_field_formatter_info().
*/
function colorpicker_field_formatter_info() {
  return array(
    'colorpicker_helloworld' => array(
      'label' => t('"Hello ,World" In color'),
      'field types' => array('colorpicker_rgb'),
    ),
  );
}

/**
* Implements hook_field_formatter_view().
*/
function colorpicker_field_formatter_view($object_type, $object, $field,
$instance, $langcode, $items, $display) {
  $element = array();
 
  if($display['type']=='colorpicker_helloworld') {
      foreach ($items as $delta => $item) {
        $element[$delta] = '<p style="color: ' . $items[0]['rgb']. '">Hello, World</p>';
      }
  }
  return $element;
}
/**************************************************************************
* Field Type API: Widget
**************************************************************************/

/**
* Implement hook_field_widget_info().
*/
function colorpicker_field_widget_info() {
  return array(
    'colorpicker_3text' => array(
  'label' => t('RGB text field'),
  'field types' => array('colorpicker_rgb'),
),
  );
}

/**
* Implement hook_field_widget().
*
* This widget displayed 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 simulaed single
* 'rgb' form element.
*/
function colorpicker_field_widget_form(&$form, &$form_state, $field,
$instance, $langcode, $items, $delta = 0) {
  // Convert rgb value into r, g, and b for #default_value.
  if (isset($items[$delta]['rgb'])) {
    preg_match_all('@..@', substr($items[$delta]['rgb'],1), $match);
  }
  else {
    $match = array(array());
  }
 
  // A fieldset to hold the three text fields.
  $element = array(
    '#type' => 'fieldset',
// Cinvert r, g, and b to rgb during validation.
'#element_validate' => array('_colorpicker_3text_validate'),
// TODO: This should not be necessary.
'#langcode' => $langcode,
  );
 
  // A text field for red, Green, and Blue.
  foreach (array('r' => 'Red', 'g' => 'Green', 'b' => 'Blue') as $key => $title) {
    $element[$key] = array(
  '#type' => 'textfield',
  '#title' => $title,
  '#default_value' => hexdec(array_shift($match[0])),
);
  }  
  return $element;
}

/**
* Convert form elements r, g, and b into a single rgb HTML spec. We
* should also perform widget-level validation here to get per-color
* error reporting, but field-level validation is good enough for now.
*/
function _colorpicker_3text_validate($element, &$form_state) {
  $field_name = substr($element['r']['#name'],0,strpos($element['r']['#name'],'['));
  if (isset($form_state['values'][$field_name][$element['#langcode']][0])) {
    $values = $form_state['values'][$field_name][$element['#langcode']][0];
$value = sprintf('#%02x%02x%02x', $values['r'], $values['g'], $values['b']);
form_set_value($element, array('rgb' => $value), $form_state);
  }
}

/**
* Implement hook_field_error().
*/
function colorpicker_field_widget_error($element, $error) {
  switch ($error['error']) {
    case 'colorpicker_invalid':
      form_error($element, $error['message']);
  break;
  }
}