A Super-Easy Guide To Creating A Fieldtype In ExpressionEngine

ExpressionEngine Fieldtype Overview

The most crucial feature of ExpressionEngine is to manage the site data so that a non-technical person can manage easily. To achieve this, ExpressionEngine introduced the Channel and Fields concept, where the channel is the collection of Field Types.

The Field Types can be a Text Input, Textarea, Date, etc. That holds the data of your site.

ExpressionEngine has the following built-in field types:

• Date
• Duration
• Email Address
• File
• File Grid
• Fluid
• Grid
• Relationships
• Rich Text Editor
• Checkboxes, Radio Buttons, Select, Multiselect
• Text Input
• Textarea
• Toggle
• URL

These Fieldtypes mostly fill our requirements in the site’s data management, but in some cases, we need a different type of Fieldtype with different logics. In that case, we need to create a custom field type.

Here, I am going to explain how we can create our custom Field types.

Fieldtype is a part of an Addon, so to create Fieldtype, we will follow the Addon file structure.

First, choose a field type name; let’s say “custom_field.”

Location Of Fieldtype File

The location of field type is the same as the third-party addons. First of all, we have to create a folder in “system/user/addons” with the name of “custom_field” and put the Fieldtype file here. The folder path may differ based on the EE version. The name of the Fieldtype file will be “ft.custom_field.php.” Remember that folder name and Fieldtype name will be the same, but only the difference is the Fieldtype file with the prefix -”ft.”

Now let’s move to the Fieldtype file structure.

File Structure

Below is the basic file structure of Fieldtype.

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

class Custom_field_ft extends EE_Fieldtype {

var $info = array(

‘name’ => ‘Custom Field’,

‘version’ => ‘1.0’

);
function display_field($data)
{
return form_input(array(
‘name’ => $this->field_name,
‘id’ => $this->field_id,
‘value’ => $data
));
}
}

The above code will show an Input type field in the Field list dropdown.

Let’s have a look at code.

Here $info variable holds information of Fieldtype like name, version, description, etc. This information will display on the Add-ons list in the back end. In the back end, the “display_field” function is responsible for showing in Fieldtype, as mentioned above, screenshot. You can return the HTML string of Fieldtype or can use the “form_input” method.

Note: One thing that you must note here, the Add-on folder must have an “addon.setup.php” file. Here we need to declare the compatibility of the field type. And this allows the site builder to switch the Fieldtype compatibility to another field type. E.g., You can change the “text” field to email and vice-versa.

There is some other Fieldtype function that can be used based on your Fieldtype features. Some of the services mostly operate in the Fieldtype file. Suppose your Fieldtype is Input type, then the value of this field must be validated and save. To achieve this, we override the in-build function of Fieldtype Class.

Function Details

Display_field($data)

The display field is the most important function of the field type. We must implement this method to display the field. You can leave out everything else, but this is required.

function display_field($data)
{
return “Custom Field”;
}

Accepts_content_type($name) function

You can use this function to control backward compatibility. All Fieldtypes initially support the ‘channel’ content type.

If we need to define compatibility with other content types, then we override this method for more control.

Here is an example:

public function accepts_content_type($name)
{
return ($name == ‘channel’ || $name == ‘grid’ || $name == ‘fluid_field’);
}

The above code allows the Fieldtype to work with ‘channel,’ ‘grid,’ and ‘fluid_filed.’ Other content types will be ignored for this Fieldtype.

Validate($data)

This function validates the field data, and it is called before the field is stored. We can define custom validation and return True, False, or any error messages based on your validation result.

Here is an example:

function validate($data){
if(preg_match(‘/^#[a-f0–9]{6}$/i’, $data)) {
return true;
}
else{
return “Value contain only character or number”;
}
}

Save($data)

This function saves the returned field data. Here you can make any changes before saving the data. The returned value of this function is saved.

public function save($data)
{
return $data;
}

Replace_tag($data, $params = array(), $tagdata = FALSE)

This function is called before the rendering tag. And it Replaces the field tag on the front end. Before showing the field data on the front end, we can make changes to the data.

Here is an example:

function replace_tag($data, $params = array(), $tagdata = FALSE){
return “Prefix “.$data.” Suffix”;
}

In the above example field, data will show on the front end with “Prefix” and “Suffix” concatenate strings.

FieldType Settings

FieldType setting of Fieldtype works globally on the back end and front end. Some of the Field types have specific locations to operate the field type functionality. Suppose we have Input Fieldtype, and we need to define the setting regarding the Max length, Placeholder, Max value, Min Value, etc. or any other custom setting for that Fieldtype.
To define all the global settings, EE provides in-build functions. We just override the process and determine the types of settings.

EE provides below the functions to show and save global settings.

display_settings()

This function display Form of field setting. We return the Form field in an array that displays our setting form using the Shared Form View format.

Here is an example:

function display_settings(){
$settings = array(
array(
‘title’ => Max Length,
‘desc’ => ‘max_length_desc’,
‘fields’ => array(
‘max_length’ => array(
‘type’ => ‘text’,
‘value’ => ‘10’,
)
)
),
… you can define more fields here….
)

return array(‘field_options_custom_field’ => array(
‘label’ => ‘field_options’,
‘group’ => ‘custom_field’,
‘settings’ => $settings
));
}

On your Field manager, when you choose ‘custom_field,’ the above setting form will appear in the ‘field_options’ section.

save_settings($data)

Function save the field type settings. We return the submitted data, and we can modify the provided data according to our requirements.

Here is an example:

public function save_settings($data)
{
// do the stuff with $data
return $data;
}

Conclusion

In the end, you have learned how to develop a Fieldtype in ExpressionEngine. In the above content, I explained only the basics of creating a Field Type with standard functions that are mostly used in any Field types-Saving and validation of the data of Fieldtype and field settings.

Originally published at https://www.zealousweb.com.