Classification of Custom Elements
There are three groups of custom elements:
I hope the following explanation will make it easier to understand the use of those element types and the differences between them.
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:
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.
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:
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.