Custom Field Types
Sometimes default selection of field types bundled with WebForms is not enough for specific tasks and you will need to code your own field type.
Let's create new field type called Box.
Box consist of Width, Height and Depth properties. Customer should be able to add multiple boxes to the submission.
ONLINE DEMO: CLICK HERE.
We will be creating new extension called CustomField.
CustomField file structure
It contains 8 files in total.
app / etc / modules / Mageme_CustomField.xml
This file registeres and enables extension in Magento
app / code / local / Mageme / CustomField
This folder contains main extension files.
etc / config.xml
In this file we are registering model for our extension and hook it to WebForms events:
webforms_fields_types - register new field type in the field type list.
webforms_fields_tohtml_html - print field frontend html code.
webforms_block_adminhtml_results_grid_prepare_columns_config - add field renderer to backend result grid column.
webforms_block_adminhtml_results_edit_form_prepare_layout_field - print field backend html code.
webforms_results_tohtml_value - print field submission value in html format.
Model / Observer.php
Observer registeres new field type and adds field presentation.
Block / Adminhtml / Element / Box.php
Here we create backend representation of the field in case we need to edit submission data. Our element renderer displays block that utilizes adminhtml template customfield/box.phtml.
Block / Adminhtml / Renderer / BoxColumn.php
We need to display the submission data in readable format.
app / design / frontend / base / default / template / customfield / box.html
Since we need to store 2 dimensional data in the text field in the database we will need to serialize values.
The easiest way to achieve it is to serialize data with JSON. We will attach events on each field change event and update hidden field with the JSON string of our input array so that it submits already serialized.
app / design / adminhtml / default / default / template / customfield / box.html
Admin template is similar to frontend except it has some little nuances.
We have created a basic field type which can be re-used to create new field types according to your needs.
You can download the sources here.
If you have created a field type you wish to share with others you can contact me and I will add it below.