Data Components

Data components are fields that influence how data is displayed, stored, and organized. Here, you will learn about various data components and their unique use cases to enhance your form's functionality.

Component	Description	Use Case
Hidden	Stores data that users can't see, but is submitted with the form.	Metadata, user info, default values
Container	Groups other components together, storing their data as an object.	Creating complex objects and data sets
Data Grid	Enables adding multiple rows of grouped components.	Adding or duplicating multiple field sets
Edit Grid	Similar to data grid but with a table-like structure, offering flexibility in how data rows are saved and displayed.	Table-like data capture and display

Hidden

The Hidden component is used to include data in a form that users cannot see but is submitted with the form data. It is typically used for storing metadata, user information, or default values that should not be visible or altered by the user. Although it does not have a front-end display, it is accessible within the form builder for configuring settings, data calculations, and logic to support advanced workflows.

Container

This hidden wrapper groups form components together, storing their data as an object under the Container's API Property key within the submission's metadata. This is particularly useful for creating complex objects and data sets in your form.

Data Grid

This component lets users add groups of components in a line item grid, with the ability to add multiple component rows. Multiple grids can be included in a form, making it useful for duplicating field sets.

Unique Setting	Description
Disable Adding / Removing Rows	Hides the "Add Another" and the "Remove Row" buttons.
Conditional Add Button	Allows you to define a condition when the Add button should be displayed.
Allow Reorder	Enables drag-and-drop functionality to reorder rows.
Add Another Text	Sets custom text for the "Add Another" button.
Add Another Position	Determines where the "Add Another" button appears—top, bottom, or both.
Equal Column Width	Ensures all columns in the grid have equal width.
Enable Row Groups	Allows rows to be grouped with labels and a defined number of rows per group. You can also delete these row groups later if required.
Hide Group on Header Click	Makes group headers collapsible—clicking hides or shows the group's rows.
Initialize Empty	Starts with no visible rows when the form loads.

Edit Grid

The Edit Grid provides a table-like layout for capturing and displaying structured form data. It allows users to group multiple components into rows, making it ideal for collecting repeated field sets . Multiple Edit Grids can be added to a form, and each grid offers flexibility in how rows are displayed, edited, and saved.

Display Tab Settings

Unique Setting	Description
Open First Row When Empty	Automatically opens a blank row when the form loads. If the first row is opened, it must be saved—even if left empty—for the form to submit successfully.
Disable Adding / Removing Rows	Hides the "Add Another" and "Remove Row" buttons to prevent users from modifying the number of rows.
Display Edit Grid as Table	Renders the Edit Grid using a table layout for a more structured appearance.
Conditional Add Button	Allows you to define a condition when the Add button should be displayed.

Templates Tab Settings

Unique Setting	Description
Header, Row, and Footer Templates	Use the JavaScript Lodash library to customize the grid layout as needed. In the Template section of the component settings, define which components appear in the saved grid row, including header and footer content. By default, all fields in the Edit Grid are rendered when a row is saved.
Row CSS Class	Adds a CSS class to the wrapper of each edit row, allowing for custom styling and layout control.
Add Another Text	Sets custom text for the "Add Another" button.
Display As Modal	Opens the row editor in a modal window for a focused editing experience.
Save Row Text	Customizes the label of the "Save Row" button.
Remove Row Text	Customizes the label of the "Remove Row" button.