Today, we begin a long series of posts on writing custom elements. I hope I’ll manage to explain the nuances of this topic over a number of posts so that anyone can implement their own ActiveForms control with just a little effort.
What Are Custom Elements?
Custom elements were designed to handle all custom control behaviours. As form authors, we sometimes need a specific validation, a calculation based on other fields, a strange visualisation of an element or another non-standard behaviour of a control.
There are 2 custom element types: custom fields and custom components.
A custom field is a field control that you implement yourself and the ActiveForms engine treats it as a form field. Like any other field, a custom field allows users to enter (directly or indirectly) a value in an entry (more specifically: a single value).
A custom component is a bigger component that allows you to render a larger portion of a form. Being a piece of a form, it is also used to enter data. A custom component can have multiple fields, but it has to render and handle them on its own.
The Custom Elements API
Since custom elements are an integral part of a form, they have to communicate with the ActiveForms engine somehow. If we just pasted a piece of HTML code with a control, it wouldn’t become a part of the form—ActiveForms wouldn’t collect its data and it wouldn’t be processed by the dependencies engine.
For a detailed description of the Custom Elements API, please see the parts of the guide that will follow.