Custom Elements – Part 1


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.

A custom element makes that possible. It is a form control written using HTML, CSS and JavaScript code and embedded in a form as an IFRAME.

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.

That’s why you need to write a number of JavaScript functions according to the ActiveForms Custom Elements API when embedding a custom element in a form. The author of a custom element should provide a JavaScript object that implements specific methods. In practice, when you add such an element to a form in FormBuilder, a corresponding JS object is created with empty methods. All you need to do is implement them.

For a detailed description of the Custom Elements API, please see the parts of the guide that will follow.

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