User Guide

Once the Enterprise Form Builder module has been properly installed and integrated within your environment, the Module is ready to be utilized.

If you do not see the Form Builder Pro within your project, ensure the module has been properly installed and the correct library license has been allocated to your environment.

Throughout the context of this documentation, Form Builder Pro and Enterprise Form Builder will be mentioned.

Form Builder Pro: UI within a Form.io project that developers utilize to manage and customize the Enterprise Form Builder..

Enterprise Form Builder: The form builder embedded within your application controlled by Form Builder Pro.

Accessing Form Builder Pro

Once enabled, the Form Builder Pro will be available in the UI of a project.

1. Navigate to any project within your deployed environment.

2. Click the Builder Pro tab from the left-hand navigation bar.

Form Builder Pro UI

The Enterprise Form Builder Module provides a user-friendly interface called Form Builder Pro for creating a custom form builder that can be embedded directly into your application. Any changes made within Form Builder Pro will directly update the Enterprise Form Builder embedded within your app.

Setting	Description
Import Form Builder JSON	Import a JSON file from another Project or Stage to include the configurations and settings of the exported Form Builder Pro.
Remove Builder Configuration	Removes all configurations and custom settings, returning the builder , including all custom groupings, settings, and fields to their default state.
Default Groups	The default components groupings that contain the Form Builder components.
Custom Groups	Create a new component grouping for the Form Builder containing standard or Pre-Defined fields.
Edit Form Options	Customize the general setting tabs for all components and settings specific to an individual component.
Next	Navigate through the Form Builder Pro tabs
Save Builder Configurations	Saves all configurations and settings. This will update the Enterprise Form Builder in real time embedded within your application.

Default Groups

The default component groups available in the Enterprise Form Builder. These groups reflect the same Form.io groupings found within the standard builder included in the a Form.io Project.

Removing Default Groups

At times, entire component groupings might not be relevant for your Form Building requirements. Any default grouping can be toggled on or off as needed, removing the group and all components inside the group from the Enterprise Form Builder.

1. Within the Form Builder Pro UI, click the Default Groups tab

2. Uncheck a grouping to remove both the group and all component inside this group from the Enterprise Form Builder.

3. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Enterprise Form Builder with the Data and Premium groups removed

Removing Default Components

To remove a component from a default group, start by expanding the group to view all included components. Simply uncheck the components that are not required for the Enterprise Form Builder to remove them from the Default Group.

1. Click the + button to expand the grouping, displaying available components within that grouping

2. Uncheck a Component to remove it from the grouping and builder

3. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Enterprise Form Builder - Various components removed from Advanced group

Custom Groups

Custom groups are utilized to house default or pre-defined components within the Enterprise Form Builder.

Custom Group Settings

Title	The name of the Custom Group that will display within the builder.
Key	The backend identifier for the custom group.
Weight	Numerical order of where the custom group will appear in the grouping list.
Default	Checking the Default checkbox will expand this group when a user initially opens the builder, revealing the available components within the group.
Default Components	Form.io default components that can be added to the custom group.
+Add Another	Add a new Custom Group
Save/Cancel	Save or Cancel the custom group.

Creating Custom Groups

1. Click the Custom Groups tab.

2. Click the +Add Another button.

1. Input a Title for the group. This title will be the group's name within the Enterprise Form Builder.

2. Set a Key for the group which will be used to reference the custom group programmatically.

3. Set a Weight to the group to determine its position relative to other groups within the Enterprise Form Builder.

4. Check the Default setting to have this Custom Group expanded by default when users initially open the Enterprise Form Builder

5. Add any standard Form.io Default Components that should be included within the Custom Group.

8. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Enterprise Form Builder - Custom Group with Default Components

Pre-Defined Components

Enhance custom group by adding predefined components, making them available for use within the Enterprise Form Builder. These components are built on standard Form.io components. Settings can be further tailored to fit the specific requirements of your application's form building needs.

Pre-Defined Component Settings

Setting	Description
Title	The name of the Pre-Defined Component that will display within the custom group.
Key	The backend identifier of the component within the custom group.
Icon	Add icons based on the CSS framework being utilized within your application.
Save/Cancel	Save or Cancel the Custom Group settings. Users will still need to click the Save Builder Configurations in order to save the changes.
+Add Another	Add and define a new Component to the Custom Group.

Creating Pre-Defined Component

1. Within the Custom Group, click the +Add Another button. This will present a new set of fields to define the component.

2. Add a Label which will represent the default name of the component within the custom group.

3. The Key will auto-populate based on the Label input. This identifier will be used within the custom group to communicate with the backend APIs.

4. Add an Icon to the field based on the CSS framework type used within your application. The icon will display next to the field Title when viewing the component in the Enterprise Form Builder

In this example, Bootstrap is being utilized as the application's front-end framework, so the Icon name in this instance will look something like this bi bi-info

The icon will require a different naming convention depending on the type of front-end framework your application is utilizing.

1. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Schema Fields

The Schema Field settings define the name and type of the component that will appear when a form builder adds this pre-defined field to a form using the Enterprise Form Builder. Settings like the Label and Key will auto-populate based on the Title/Key settings set for the Pre-Defined Component but can be changed if needed.

These settings can differ from the Pre-Defined Component settings found above. A unique Label and Key can be given to the component which will represent the component name when a Form Builder adds the component to the Enterprise Form Builder vs the component name that appears inside the Custom Group.

Schema Field Settings

Setting	Description
Label	The default, front-end name of the component that will display for the end-user. The Label will auto-populate based on the Pre-Defined Component Title.
Key	The back-end identifier of the component that will communicate with the APIs. This field is auto-populated in camelCase based on the initial Key given in the Pre-Defined Component settings. Each field's Property Name must be unique on the form before the form can be saved.
Type	Select a default component the pre-defined component will be based on. All settings will carry over from the default component.
Input	Saves the input data to the submission object.

Add Schema Settings Component

1. Within the Custom Group, click the +Add Another button. This will present a new set of fields to define the component.

2. Add a Label which will represent the default name of the component when the component is added to the form using the Enterprise Form Builder.

3. The Key will auto-populate in camelcase based on the Label input. This identifier will be used in the context of the form to communicate with the backend APIs.

4. Select the Component Type from the list of Form.io fields the component will be based on. In this example, since this is a text input name field, the Text Field has been selected.

1. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Notice the Field Title within the group is called Applicant's Name, while the field Label is First Name when added to the builder.

JSON Schema

Use the JSON Schema to configure settings that will be set by default when the component is added to the form. These settings should be based on the component Type found within the Schema Fields tab. Utilize the Edit JSON button for a component found within the Form.io builder to easily copy and paste the desired property settings needed into the JSON schema code block.

1. Within a Form.io Project, add the base component to the Form Builder. In this example, we are using a Text Field for the Applicant's Name field

1. Configure any settings that should be set for the Pre-Defined component. In this example, a Placeholder and Required validation has been added to the field.

1. Click the Edit JSON button for the component found within the UI of the Form.io Form Builder and copy the JSON Schema.

1. Copy the JSON Schema containing the component setting properties.

1. Within Form Builder Pro, paste the setting properties copied from step 4 and paste them into the JSON Schema code block of the Pre-Defined Field

Click here for a full list of Component JSON Schema

1. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

Edit Form Options

Customize standard components within the Enterprise Form Builder by adding or removing their default settings. Any Form Option changes made will effect available component settings when creating or updating Pre-Defined Fields.

Show Tabs

A list of general setting tabs that are included for all components. Unchecking a tab will remove the setting tab for all components within the Enterprise Form Builder, including any Pre-Defined Components within your Custom Groups.

Toggling Setting Tabs

1. Click the Edit Form Options tab

2. Navigate to the Show Tabs panel

3. Toggle the desired Setting group to remove the tab and all settings found within the tab from components within the Enterprise Form Builder

1. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

API and Layout setting tabs removed

Show Fields

A complete list of default components included in the Enterprise Form Builder. Opening the component panel will display all available settings specific to the component. Uncheck a setting to remove it from the Enterprise Form Builder. If a general setting tab has been disabled , a message will display saying this setting tab has been disabled.

Any field settings you remove will also affect Pre-Defined fields that use this component as their Type

Toggling Individual Settings

1. Click the Edit Form Options tab

2. Navigate to the Show Fields panel

3. Expand the Component panel you wish to modify settings for.

4. Toggle the desired Setting to remove that setting from the component options.

1. Click 'Save Builder Configuration' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.