Form Builder
Learn how to use the Form.io JavaScript form builder
Introduction
The Form.io Form Builder is an extension on the Form Renderer that allows for dynamic drag-and-drop building of the forms that will be rendered within the Form Renderer. The purpose of the form builder is to serve as a front-end user interface that is able to visually create the JSON schemas that are needed to be rendered into the form. For this reason, it can be thought of as a glorified JSON schema builder, where each field dragged onto the form creates the JSON schema of that component as it is configured. The following diagram illustrates this relationship between the form builder interface and the JSON schema that is being created.
Embedding the Form Builder
One great benefit of the Form.io form builder is it can also be embedded into your application just like the form renderer. It is very similar to the form renderer, which just a few minor changes. First we will need to open up a new JSFiddle and input the following configurations.
Add the following Resources.
https://cdn.form.io/formiojs/formio.full.min.js
https://cdn.form.io/formiojs/formio.full.min.css
https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
Add the following HTML
Add the following JavaScript.
Once you do this, you will then see your Form Builder show up in the result panel.
This is a fully functional form building interface, which you can see by checking out the following JSFiddle.
Let's now explore all the options you can use to customize the form builder interface.
Form Builder SDK
In order to take advantage of the form builder, you need to understand all of the options available to you when working with the form builder interface. In all cases, the Form Builder is instantiated using the Formio.Builder
method, which is defined as follows.
Formio.builder(element, [form], [options])
Formio.builder(element, [form], [options])
This method creates a new Form Builder interface within your application, and the following parameters can be applied.
As an example, the following will create a new form builder, and then auto populate it with the form defined.
Which produces the following builder interface.
Optionally, you can provide the "src" to the form as follows.
Which produces the following builder interface.
The Formio.Builder
method returns a promise that will resolve with the Form Builder instance, which can be used as follows.
In a later section we will go through some of the methods that can be used on the builder instance that will further enable customizations of the form builder interface.
Form Builder Options
The options of the form builder are passed as a JavaScript object to the Formio.Builder
method like the following illustrates.
The following are a list of options that can be passed to the Form Builder instantiation method.
Builder Sidebar Configuration
These are the properties that can be set on the "builder" configuration option that is passed to the builder. This option is passed to the form builder like the following illustrates.
The properties in this configuration allow for the manipulation of the Builder sidebar as well as control the default schemas and behaviors of the fields that are added to Form Builder. By default, this property has the following configuration.
Each of these sections can be turned off by simply adding a false
for the value of that component.
For example, if we wish to turn off the Advanced, Premium, and Existing Resource Fields sections of the form builder sidebar, we could pass along the following configurations.
This configuration can also be used to add Pre-defined components to the builder.
Adding Pre-Defined Components
A pre-defined component is a component that you provide the JSON configuration up front and then allow an end-user to drag-and-drop that component onto a form. A good example of this would be if you wish to have defined fields, such as "First Name" "Last Name" and "Email", instead of the field types, such as "Text Field", that are provided by default. Pre-defined fields can be added to the form builder using the builder
as the following illustrates.
The default schema for each of these fields is defined in the schema
property of that component, which means that as the user drags-and-drops the field on to the form builder, this is the schema that will be used to default that field on the form. The following configuration produces the following form builder.
Events
The following form builder events are emitted from the form builder as the user is building forms.
Overriding Behavior
With the form builder, however, you can override the Component forms for each component by modifying the editForm
property of that component. This property is a function that accepts other overrides and then returns the Form.io Form of that component edit form. As an example, the following will change the Text Fields edit form to ONLY contain the label.
It should be noted that the key of each of these components need to correlate to the property name of the Component JSON. So for example, if you wish to include a field for the Required property, you can use the following schema.
With the same methods as described in the Overriding Form Renderer documentation, you can also modify the existing edit form using a method similar to the following.
Last updated