Custom Elements – Part 2


Classification of Custom Elements

There are three groups of custom elements:

  • custom fields,
  • custom components,
  • custom component inner fields.

I hope the following explanation will make it easier to understand the use of those element types and the differences between them.

Custom Fields

These are the most commonly created custom elements. A custom field works as a form field—it collects a single value from the user who fills in the form. For the ActiveForms engine, a custom field is just another field: it has its own way of rendering (presenting), it has its own label, can be required or not, and has a data length limit.

The main difference between a custom field and a field like Single Line Text is that a custom field is not rendered automatically by the system. The author of a custom field has to write HTML, JS and CSS code that will present the control, collect the data from the user, possibly validate the data and forward it to the ActiveForms engine (for writing it in an entry, enabling a dependency and so on).

Examples of custom fields:

  • a self-validating field, e.g. for an ID card number;
  • a field whose value is calculated automatically based on other fields, e.g. the amount of the PCC-3 tax;
  • a selection field whose options are created dynamically using an external database, e.g. a district selector based on the selected province;
  • a slider that returns a value from 1 to 100.

As you can see, by creating a custom field you can create a control that is custom in many ways—it can have its specific presentation, validation, selection of options, value calculation methods and so on. In fact, you could create a custom field that doesn’t collect any data at all, and only allows you to write a code that validates data entered in other fields.

Custom Components

A custom component is a larger component that allows you to render and handle a bigger portion of a form. A custom component can collect data from users, but it can also serve other purposes (e.g. presenting a diagram based on data entered in other form fields).

If a custom component is to be used for entering data, you need to specify in the structure of the form which logical fields it will handle. To do so, in FormBuilder add children items to the component, i.e. custom component inner fields. The custom component as a whole is responsible for all the control rendering and integration, and information about its children is only required by the dependencies engine and by the ActiveForms engine to save the entry.

For example: your form is supposed to collect exact location data from users. Obviously, the easiest way to do that is to use Google Maps. Since geographic coordinates comprise two values (longitude and latitude), you can’t use a custom field, so you need to create a custom component. You need to embed a Google map in your HTML code and add two children to the component in the form structure: longitude and latitude.

Now, when a user clicks on the map, Google can provide the longitude and latitude of the selected point and write it to the entry in two fields. This way, a single component (one control) returns two values.

Other examples of using custom components:

  • any selector whose value needs to be stored, like the code and label of a selected option, e.g. a province.

Custom Component Inner Field

This is a logical construct which tells the ActiveForms engine that the given custom component contains a field. To the engine, this means that data has to be collected from such a field, validated, and so on. Please note that an inner field is not implemented separately—this is handled by the parent component.

recent posts
3rd Apr 2014
Faster than ever!
5th Dec 2013
Live validation!
2nd Dec 2013
Features distilled
12th Mar 2012
Flicking Channels
26th Jan 2012
Your Own Error Page
9th May 2011
Box Properties
15th Apr 2011
Grouping Fields
13th Apr 2011
Form Versioning
24th Feb 2011
Form Access Modes
22nd Feb 2011
Required Fields
4th Feb 2011