# Using Enterprise Form Builder Once the Enterprise Form Builder module has been properly installed and integrated within your environment, the Module is ready to be used. {% hint style="info" %} If you do not see the Form Builder Pro within your project, ensure the module has been properly [**installed**](https://help.form.io/userguide/enterprise-form-builder-module/application-integration) and the correct [**library** **license** ](https://help.form.io/deployments/licenses/library-licenses)has been allocated to your environment. {% endhint %} This documentation mentions both, **Form Builder Pro** and **Enterprise Form Builder**. These are related, but distinct, parts of the platform: * **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.

3. Input a **Title** for the group. This title will be the group's name within the Enterprise Form Builder. 4. Set a **Key** for the group which will be used to reference the custom group programmatically. 5. Set a **Weight** to the group to determine its position relative to other groups within the Enterprise Form Builder. 6. Check the **Default** setting to have this Custom Group expanded by default when users initially open the Enterprise Form Builder 7. 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 {% hint style="info" %} In this example, [**Bootstrap**](https://icons.getbootstrap.com/) 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. {% endhint %}

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

{% tabs %} {% tab title="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**](#pre-defined-component-settings) 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.

5. 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. {% endtab %} {% tab title="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

2. **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.

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

4. **Copy** the **JSON** **Schema** containing the component setting properties.

5. 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**](https://github.com/formio/formio.js/wiki/Components-JSON-Schema#common-parameters)
6. Click '**Save Builder Configuration**' to apply your settings. Update your application to reflect the changes in the Enterprise Form Builder.

{% endtab %} {% endtabs %} ## 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**](#pre-defined-components). ### **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

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

### **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. {% hint style="info" %} Any field settings you remove will also affect Pre-Defined fields that use this component as their Type {% endhint %}

**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.

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

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.form.io/userguide/enterprise-form-builder-module/using-enterprise-form-builder.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.