Our next function will explain to Drupal how we would like our component rendered in HTML. We shall also specify other attributes, such as CSS classes and validation functions to be performed against input data. This is where the defaults and options we previously specified will play their part in affecting how users perceive and interact with our component on Webforms.
Let's add to our webform_imei.module file the Drupal Form API code required to render our component on a form:
/**
* Render a Webform component to be part of a form.
*/
function _webform_render_imei($component, $value = NULL, $filter = TRUE) {
$element = array(
'#type' => 'textfield',
'#title' => $filter ? _webform_filter_xss($component['name']) : $component['name'],
'#title_display' => $component['extra']['title_display'] ? $component['extra']['title_display'] : 'before',
'#default_value' => $filter ? _webform_filter_values($component['value'], NULL, NULL, NULL, FALSE) : $component['value'],
'#required' => $component['mandatory'],
'#weight' => $component['weight'],
'#description' => $filter ? _webform_filter_descriptions($component['extra']['description']) : $component['extra']['description'],
'#attributes' => $component['extra']['attributes'],
'#theme_wrappers' => array('webform_element'),
'#webform_component' => $component,
'#element_validate' => array('webform_imei_validate_imei'),
);
// Enforce uniqueness.
if ($component['extra']['unique']) {
$element['#element_validate'][] = 'webform_imei_validate_imei_unique';
}
// Change the 'width' option to the correct 'size' option.
if ($component['extra']['size'] > 0) {
$element['#size'] = $component['extra']['size'];
}
if ($component['extra']['maxlength'] > 0) {
$element['#maxlength'] = $component['extra']['maxlength'];
}
if (isset($value)) {
$element['#default_value'] = $value[0];
}
return $element;
}
Here we are detailing HTML, CSS, Drupal, and Webform attributes of our component. Initially we set up the form element array ($element) with information regarding the type of field, its label, and so on. We also specify, in $element['#element_validate'], the name of the function Webform should call when data is submitted to this component (we shall define the validation functions a little later in the chapter).
After the initial form element definition we have some optional attributes to set, such as textfield display width.
If we selected the Unique checkbox on the component edit form, then the form element receives another validation function name to be processed. Since these validations are listed in an array, they will be executed in the sequence that they were added to the array. So, in our case, the webform_imei_validate_imei() function will always be executed before the optional webform_imei_validate_imei_unique() validation function. The first function will perform general input validation, whereas the purpose of the second function is to determine whether the submitted value already exists in the database.
In the following screenshot we see how our component will render on forms when it has been completed.
