---
title: "Freeform Grid Component"
slug: "freeform-grid-component"
updated: 2025-12-04T19:26:56Z
published: 2025-12-04T19:26:56Z
canonical: "docs.unqork.io/freeform-grid-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Freeform Grid Component

UDesignerClassic Designer

At its foundation, the **Freeform Grid component** acts as a container for nesting other Unqork components. In Express View, those nested components render in self-contained rows of the grid, making it a flexible and customizable grid component for creating complex data and displaying interactions.

In addition to nesting simple input fields, you can also use the Freeform Grid component to nest logic components inside the grid, creating row-level logic regardless whether your end-users inputs data inside or outside the grid. It also lets you nest components in other nested components, like displaying a fully-configured [Uniform Grid](/v1/docs/uniform-grid-component) component in each row of the Freeform Grid component.

The Freeform Grid component also provides flexible layout and styling options. These layout options let you create a custom viewing and editing experience that's ideal for complex data display.

The Freeform Grid component also uses a summary-detail view to display data in Express View, letting you easily convey your information hierarchy.

The summary view is an at-a-glance layout that includes the following options:

- Stacked rows
- Table

The detail view displays when selecting a row from the summary view. From the detail view, you can explore details and perform actions, like adding, editing, or deleting data.

The detail view includes the following options:

- Accordion view
- Modal view
- Sidebar view

You can mix-and-match most summary and detail views, giving you the flexibility to create custom layouts and complex display logic. For example, your end-user can review information at-a-glance by scrolling through stacked rows. Then, they can select a row to display a modal with more details.

The following video shows three different summary/detail view combinations, applied to the same Freeform Grid component and its data. The only configuration change between each view is the detail view selected. In order: Rows and Sidebar, Rows and Accordion, and Rows and modal.[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A04018A-freeform_express_detailviews.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

You can find the component under the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

### Display Panel

#### Field Text

[![A static image displaying the UDesigner Freeform Grid component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform_Grid_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform%20Grid%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

| Setting | Description |
| --- | --- |
| **Label Text** | The heading of the grid that displays to the end-user in Express View. To hide the title in Express View, set **Hide Label** to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**. |

#### Contextual Help

| Setting | Description |
| --- | --- |
| **Tooltip** | A short hint that displays when an end-user positions their cursor over the ![Questionmark Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Tooltip(15).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

#### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Label** | Setting Hide Label to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(OFF)**. |
| **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(OFF)**. |

#### Formatting

| Setting | Description |
| --- | --- |
| **Customize Button Styling** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**, customization fields display for the following buttons: - **Add Row** - **Cancel Row** - **Update Row** - **Delete Row** To customize each button, edit the fields displayed below the corresponding button's header. |
| **Button Label Text** | The Button Label Text identifies the purpose of the button before your end-user clicks it. Each button has the following default Label Text: - **Add Row**: Create New - **Cancel Row**: Cancel - **Update Row**: Save - **Delete Row**: Delete |
| **Button Style** | Sets the visual appearance of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button component's appearance and does not effect its function. |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to the button. When you update the CSS styling, it applies to all elements that reference this custom class name. |
| **Left/Right Icon** | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/.](https://getbootstrap.com/docs/3.3/components/.) |

#### Summary View

The Summary View table is where you set up the information you want displayed in the grid's summary view. You'll define the grid headings and the values to display under that heading. Click **New Row** to add a new heading.

> [!NOTE]
> The top-to-bottom order of rows in your Summary View table creates the left-to-right order of headings in Express View.

| Setting | Description |
| --- | --- |
| **Heading** | Enter a heading to display in the summary view. |
| **Property ID** | Define the value to display under the heading. You can reference a Property ID in the grid or use a formula that references multiple Property IDs. For example: - Using CONCATENATE to join the values of two [Text Field](/v1/docs/text-field-component) components in the grid. - Using SUM to total the values of multiple [Number](/v1/docs/number-component) components in the grid. > [!TIP] > The Property ID or Formula field supports the same formulas as other Unqork components, like the [Calculator](/v1/docs/calculator-component) component. Formulas innclude standard Excel formulas and Moment.js for [Date Input](/v1/docs/date-input-component) fields. You can also string together formulas to create more complex formulas. > To learn more about support formulas in Unqork, view our [Supported Formulas](/v1/docs/supported-formulas) page on the Documentation Hub. |

#### Customize Summary and Detail View Group

The following settings let you configure the component's summary and detail view options:

| Setting | Description |
| --- | --- |
| **Choose Summary View** | Select which summary view your Freeform Grid component uses: - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Rows**: Each row of the grid displays as a stacked row. The headings and values defined in the Summary View table display in each row. To display a row's full detail view, select the stacked row. - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Table**: Each row of the grid displays as a row in a table. The headings defined in the Summary View table display at the top of the table. The accompanying values display as a row in the table. To display a row's full detail view, select the table row. |
| **Customize Detail View** | Select which detail view your Freeform Grid component uses: - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Accordion**: The detail view expands below the row. - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Modal**: The detail view opens as a modal in the same frame. - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Sidebar**: The detail view displays as a sidebar in the same frame. |
| **Modal Title** | Displays when Customize Detail View is set to ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)**Modal**. Enter a title for the detail view modal. |
| **Sidebar Title** | Displays when Customize Detail View is set to ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)**Sidebar**. Enter a title for the detail view sidebar. |

### Actions Panel

#### Triggers Group

The Freeform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from various possible triggering events for each trigger. You can also create several triggers that have the same triggering event.

| Setting | Description |
| --- | --- |
| **New Row** | Click **New Row** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. |
| **When...** | Select an action that, when it occurs, executes the trigger. Actions include the following: - **Row is Added**: Fires the trigger when a new row is added to the grid. - **Row is Deleted**: Fires the trigger when any row in the grid is deleted. - **Row is Saved**: Fires the trigger when any row in the grid is saved. |
| **Property ID** | Enter the Property ID of the component to trigger when the specified **When...** action occurs. |

[![A static image displaying the UDesigner Freeform Grid component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform_Grid_Component_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform%20Grid%20Component%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

### Validation Panel

#### Validation

| Setting | Description |
| --- | --- |
| **Invalid Grid Error** | An error message that displays when the grid has validation errors. |
| **Invalid Row Error** | An error message that displays when a specific row of the grid has validation errors. |

[![A static image displaying the UDesigner Email component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform_Grid_Component_Validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform%20Grid%20Component%20Validation.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

#### Set Number of Allowed Rows

| Setting | Description |
| --- | --- |
| **Minimum Number of Allowed Rows** | Sets the minimum number of allowed rows in the grid. |
| **Minimum Length Error Message** | An error message that displays when the grid does not meet the minimum number of rows set. |
| **Maximum Number of Allowed Rows** | Sets the maximum number of allowed rows in the grid.When the maximum number of rows is met, the Freeform Grid component's **Create New** button is disabled and end-users cannot add any new rows. > [!NOTE] > When the maximum number of rows is met, the Freeform Grid component's **Create New** button is disabled and end-users cannot add any new rows. |
| **Maximum Length Error Message** | An error message that displays when the grid exceeds the maximum number of rows set. |

### Advanced Panel

#### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

[![A static image displaying the UDesigner Email component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform_Grid_Component_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform%20Grid%20Component%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

## Adding a Freeform Grid Component

In this configuration, you'll use a Freeform Grid component to let end-users create a list of guests that are joining a reservation. This simple usage of the Freeform Grid component highlights its support for nesting components, including nesting components in other nested components.

> This configuration focuses on how to use the Freeform Grid component for basic information collection. To learn about more complex configuration scenarios, including notes on using logic components with the Freeform Grid, visit the [Uniform Grid and Freeform Grid: Logic and Referencing Syntax](/v1/docs/uniform-grid-and-freeform-grid-logic-and-referencing-syntax) article.

### Configure the Freeform Grid Component

For this configuration, the Freeform Grid uses the Rows summary view with a modal detail view. The modal is where the end-user fills out all the fields nested in the Freeform Grid. The summary view then displays the values from some of the nested components, as defined in the **Summary View** table.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Freeform Grid** component onto the canvas.
2. In the Property ID field, enter **freeformGridGuests**.
3. In the **Label Text** field, enter `Guests`.
4. In the **Helper Text** field, enter `Please list all guests who will be on this reservation`.
5. Set the **Customize Button Styling** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
6. Complete the **Summary View** table as follows:

| **Heading** | **Property ID** |
| --- | --- |
| Guest Requests | requests |
| Email | email |
| Full Name | =CONCATENATE(firstName, " ", lastName) |

> [!TIP]
> By using a concatenation formula that references the firstName and lastName Property IDs, the summary view can include the guest's full name while the submission data stores individual values.
7. Under **Choose Summary View**, select ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Rows**.
8. Under **Customize Detail View**, select ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **Modal**.
9. Under **'Add Row' Button**, in the **Button Label Text** field, enter `Add Guest`.
10. Click **Save Component**.

### Configure the Columns Component

A [Columns](/v1/docs/columns-component) component helps structure and organize the module.

1. Drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component onto your canvas, placing it inside the Freeform Grid component.
2. In the Property ID field, enter **col1**.
3. Under **Formatting**, select ![Inline image of the three columns setting option.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Three_UDesigner.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)**(3 columns)**.
4. Click **Save Component**.

### Configure the Text Field Components

The following two [Text Field](/v1/docs/text-field-component) components to collect some basic information about the guest.

1. Drag and drop two **T****ext Field** components onto the canvas, placing one in **column 1** and the other in **column 2** of the **col1** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component.
2. Complete the Property ID and Label Text as follows:

| **Property ID** | **Label Text** |
| --- | --- |
| **firstName** | First Name |
| **lastName** | Last Name |
3. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** for both fields.
4. Click **Save Component** for each component as you add it.

### Configure the Email Component

Next, you'll use an [Email](/v1/docs/email-component) component to collect the guest's email address.

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Email** component onto the canvas, placing it in **column 3** of the **col1** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component.
2. In the Property ID field, enter **email**.
3. In the Label Text field, enter `Email`.
4. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
5. Click **Save Component**.

### Configure the Uniform Grid Component

This [Uniform Grid](/v1/docs/uniform-grid-component) component collects phone numbers using a nested [Phone Number](/v1/docs/phone-number-component) component and [Dropdown](/v1/docs/dropdown-component) component. Using a Uniform Grid makes it easy for the end-user to add multiple phone numbers, if needed.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component onto the canvas, placing it below the **col1** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component inside the **freeformGridGuests** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Freeform Grid** component.
2. In the Property ID field, enter **uniformGridPhoneNumber**.
3. In the Label Text field, enter `Phone Number(s)`.
4. In the **Helper Text** field, enter `Enter your phone number(s) below:`.
5. Set the **Customize Button Styling** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
6. Under **'Add Row' Button**, in the **Button Label Text** field, enter `Add Number`.
7. Navigate to the **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component's **Validation** settings.
8. In the **Invalid Error** field, enter `Please add at least one phone number`.
9. In the **Minimum Number of Allowed Rows** field, enter `1`.
10. Click **Save Component**.

### Configure the Phone Number Component

Configure a [Phone Number](/v1/docs/phone-number-component) component inside the Uniform Grid component to collect guest phone numbers.

1. Drag and drop a **P****hone Number** component onto the canvas, placing it inside the **uniformGridPhoneNumber** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component.
2. In the Property ID field, enter **phoneNumber**.
3. In the Label Text field, enter `Phone Number`.
4. Click **Save Component**.

### Configure the Dropdown Component

Configure a [Dropdown](/v1/docs/dropdown-component) component inside the Uniform Grid component to let guests identify if the phone number they entered is a home, mobile, or work phone number.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Dropdown** component onto the canvas, placing it inside the **uniformGridPhoneNumber** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component.
2. In the Property ID field, enter **numberType**.
3. In the Label Text field, enter `Number Type`.
4. Complete the **Values** table as follows:

|  | **Label** | **Value** |
| --- | --- | --- |
| 1 | Mobile | mobile |
| 2 | Home | home |
| 3 | Work | work |
5. Click **Save Component**.

### Configure the Radio Buttons Component

The next three components, the [Radio Buttons](/v1/docs/radio-buttons-component), [Text Area](/v1/docs/text-area-component), and [Decisions](/v1/docs/decisions-component) components, work together to form a specific functionality. Based on the answer to the Radio Buttons component, the Decisions component either makes the hidden Text Area component visible or it remains hidden.

1. Drag and drop a **R****adio Buttons** component onto the canvas, placing it inside the **freeformGridGuests** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Freeform Grid** component and below the **uniformGridPhoneNumber** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component.
2. In the Property ID field, enter **requests**.
3. In the Label Text field, enter `Does this guest have any accommodation requests or other restrictions (e.g. allergies)?`.
4. Complete the **Values** table as follows:

|  | **Label** | **Value** |
| --- | --- | --- |
| 1 | Yes | Yes |
| 2 | No | No |
5. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
6. Click **Save Component**.

### Configure the Text Area Component

Based on the radio-button choice the guest makes, this [Text Area](/v1/docs/text-area-component) component becomes visible to add further information.

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component onto the canvas, placing it below the **requests** **R****adio Buttons** component.
2. In the Property ID field, enter **guestNotes**.
3. In the Label Text field, enter `Please list your accommodation requests or other notes:`.
4. Set the **Hide Field** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
5. Click **Save Component**.

### Configure the Decisions Component

Lastly, you'll configure a Decisions component with the following if/then logic:

- If the end-user selects **Yes** from the **requests** **R****adio Buttons** component, then make the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component visible.
- If the end-user selects **No**, then keep the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component hidden.

1. Drag and drop a **D****ecisions** component onto the canvas, placing it below the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleRequests`.
3. Set the **Trigger Type** to Watch.
4. Complete the Inputs table as follows:

|  | **Source** | Alias | Type | Required |
| --- | --- | --- | --- | --- |
| 1 | requests |  | exact | (**checked**) |
5. Complete the Outputs table as follows:

|  | **Source** | Type |
| --- | --- | --- |
| 1 | guestNotes | visible |
6. Complete the **Conditionals** **table** table as follows:

|  | requests | guestNotes_visible |
| --- | --- | --- |
| 1 | Yes | yes |
| 2 | No | no |
7. Click **Save Component**.
8. **Save** your module.

### Preview Your Configuration

If you need to troubleshoot your work, here's how the completed configuration looks in the Module Builder:

[![Static image displaying the completed Freeform Grid use case in the UDesigner Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform_Grid_Component_UseCase_Complete_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Freeform%20Grid%20Component%20UseCase%20Complete.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

You're now ready to test out your configuration. Click Preview to open your module in Express View. [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform_configuration_express.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

At its foundation, the **Freeform Grid component** acts as a container for nesting other Unqork components. In Express View, those nested components render in self-contained rows of the grid, making it a flexible and customizable grid component for creating complex data and displaying interactions.

In addition to nesting simple input fields, you can also use the Freeform Grid component to nest logic components inside the grid, creating row-level logic regardless whether your end-user inputs data inside or outside the grid. It also lets you nest components in other nested components, like displaying a fully-configured [Uniform Grid](/v1/docs/uniform-grid-component) component in each row of the Freeform Grid component.

The Freeform Grid component also provides flexible layout and styling options. These layout options let you create a custom viewing and editing experience that's ideal for complex data display.

The Freeform Grid component also uses a summary-detail view to display data in Express View, letting you easily convey your information hierarchy.

The summary view is an at-a-glance layout that includes the following options:

- Stacked rows
- Table

The detail view displays when selecting a row from the summary view. From the detail view, you can explore details and perform actions, like adding, editing, or deleting data.

The detail view includes the following options:

- Accordion view
- Modal view
- Sidebar view

You can mix-and-match most summary and detail views, giving you the flexibility to create custom layouts and complex display logic. For example, your end-user can review information at-a-glance by scrolling through stacked rows. Then, they can select a row to display a modal with more details.

The following video shows three different summary/detail view combinations, applied to the same Freeform Grid component and its data. The only configuration change between each view is the detail view selected. In order: Rows and Sidebar, Rows and Accordion, and Rows and Modal.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/A04018A-freeform_express_detailviews.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

You can find the component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

- Creating a dashboard to review customer information, with high-level information available in the summary view and full customer details available in detail view.
- Displaying a list of available doctors in the area, where end-users can select a doctor's name to reveal their contact information, without leaving the page.
- Adding or reviewing beneficiaries for an insurance policy.

## About the Configuration Window

> [!TIP]
> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

### Display Panel

[![Static image displaying the Freeform Grid Display configuration settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid_displayPanel_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid%20displayPanel.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

| Setting | Description |
| --- | --- |
| **Title** | The heading of the grid. The end-user sees this title at the top of the grid in Express View. > [!NOTE] > It's best practice to always include a title. To hide the title in Express View, set Hide Title to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**. |
| **Title Tooltip** | A short hint that displays when an end-user positions their cursor over the (**Tooltip**) icon. Tooltips can display across more than one line. The tooltip displays next to the title. |
| **Helper Text** | A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

#### Summary View Table

The Summary View table is where you set the information that displays in your grid's summary view. Define headings as well as what values to show under that heading.

Click **+ New** to add a new heading.

> [!NOTE]
> The top-to-bottom order of rows in your Summary View table creates the left-to-right order of headings in Express View.

| Setting | Description |
| --- | --- |
| **Heading** | Enter a heading to display in the summary view. |
| **Property ID or Formula** | Define the value to display under the heading. You can reference a Property ID in the grid or use a formula that references multiple Property IDs. For example: - Using `CONCATENATE` to join the values of two [Text Field](/v1/docs/text-field-component) components in the grid. - Using `SUM` to total the values of multiple [Number](/v1/docs/number-component) components in the grid. > [!TIP] > The Property ID or Formula field supports the same formulas as other Unqork components, like the [Calculator](/v1/docs/calculator-component) component. Formulas innclude standard Excel formulas and Moment.js for [Date Input](/v1/docs/date-input-component) fields. You can also string together formulas to create more complex formulas. > To learn more about support formulas in Unqork, view our [Supported Formulas](/v1/docs/supported-formulas) page on the Documentation Hub. |

#### Customize Summary and Detail View Group

The following settings set the summary and detail view options for your Freeform Grid.

| Setting | Description |
| --- | --- |
| **Choose Summary View** | Select which summary view your Freeform Grid uses: - **Rows**: Each row of the grid displays as a stacked row. The headings and values defined in the Summary View table show in each row. To display a row's full detail view, select the stacked row. - **Table**: Each row of the grid displays as a row in a table. The headings defined in the Summary View table display once at the top of the table. The accompanying values display as a row in the table. To display a row's full detail view, select the table row. |
| **Customize Detail View** | Select which detail view your Freeform Grid uses: - **Accordion**: The detail view expands below the row. - **Modal**: The detail view opens as a modal in the same frame. - **Sidebar**: The detail view displays as a sidebar in the same frame. |
| **Modal Title** | Displays when Customize Detail View is set to **Modal**. Enter a title for the detail view modal. |
| **Sidebar Title** | Displays when Customize Detail View is set to **Sidebar**. Enter a title for the detail view sidebar. |

#### Additional Display Settings

| Setting | Description |
| --- | --- |
| **Hide Component** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** hides the component in Express View. Setting it to![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(OFF)** displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(OFF)**. |
| **Hide Title** | Setting the Hide Title toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** stops the title from displaying in Express View. The title still displays in the Module Builder. By default, Hide Title is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(OFF)**. |
| **Customize Button Styling** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**, customization fields display for the following buttons: - **Add Row** - **Cancel Row** - **Update Row** - **Delete Row** To customize each button, edit the fields displayed below the corresponding button's header. |
| **Button Label Text** | The Button Label Text identifies the purpose of the button before your end-user clicks it. Each button has the following default Label Text: - **Add Row**: Create New - **Cancel Row**: Cancel - **Update Row**: Save - **Delete Row**: Delete |
| **Button Style** | Sets the visual appearance of the button. Options include: `Primary`, `Secondary`, `Success`, `Danger`, `Warning`, `Info`, `Light`, `Dark`, and `Link`. The Button Style only affects the Button component's appearance and does not effect its function. |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to the button. When you update the CSS styling, it applies to all elements that reference this custom class name. |
| **Left/Right Icon** | Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button. > The full list of supported GLYPHICONS® glyph codes is available here: [https://getbootstrap.com/docs/3.3/components/](https://getbootstrap.com/docs/3.3/components/). |

### Actions Panel

[![Static image displaying the Freeform Grid Actions configuration settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid_actionsPanel_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid%20actionsPanel.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

#### Triggers Group

The Freeform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from three possible triggering events for each trigger. You can also create several triggers that have the same triggering event.

| **Setting** | Description |
| --- | --- |
| **+ Add Trigger** | Click **+ Add Trigger** to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs. |
| **When...** | Select an action that, when it occurs, executes the trigger. Actions include the following: - **Row is Added**: Fires the trigger when a new row is added to the grid. - **Row is Deleted**: Fires the trigger when any row in the grid is deleted. - **Row is Saved**: Fires the trigger when any row in the grid is saved. |
| **Then...** | Enter the Property ID of the component to trigger when the specified **When...** action occurs. |

### Validation Panel

[![Static image displaying the Freeform Grid Validation configuration settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid_validationPanel_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeFormGrid%20validationPanel.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

#### Set Number of Allowed Rows Group

| Setting | Description |
| --- | --- |
| **Minimum** | Sets the minimum number of allowed rows in the grid. |
| **Minimum Error Message** | An error message that displays when the grid does not meet the minimum number of rows set. |
| **Maximum** | Sets the maximum number of allowed rows in the grid.When the maximum number of rows is met, the Freeform Grid component's **Create New** button is disabled and end-users cannot add any new rows. |
| **Maximum Error Message** | An error message that displays when the grid exceeds the maximum number of rows set. |

#### Validation

| Setting | Description |
| --- | --- |
| **Invalid Error** | An error message that displays when the grid has validation errors. |
| **Invalid Row Error** | An error message that displays when a specific row of the grid has validation errors. |

## Adding a Freeform Grid Component

In this configuration, you'll use a Freeform Grid to let end-users list guests joining a reservation. This simple usage of the Freeform Grid component highlights its support for nesting components, including nesting components within already-nested components.

> [!NOTE]
> This configuration focuses on how to use the Freeform Grid component for basic information collection. To learn about more complex configuration scenarios, including notes on using logic components with the Freeform Grid, visit the [Uniform Grid and Freeform Grid: Logic and Referencing Syntax](/v1/docs/uniform-grid-and-freeform-grid-logic-and-referencing-syntax) article.

Here's how the completed configuration looks in the Module Builder:

[![Static image displaying the completed Freeform Grid use case in the Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform_configuration_moduleEditor_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform%20configuration%20moduleEditor.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

### Configure the Freeform Grid Component

For this configuration, the Freeform Grid uses the Rows summary view with a Modal detail view. The modal is where the end-user fills out all the fields nested in the Freeform Grid. The summary view then displays the values from some of the nested components, as defined in the Summary View table.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Freeform Grid** component onto the canvas.
2. In the Property ID field, enter **freeformGridGuests**.
3. In the **Title** field, enter `Guests`.
4. In the **Helper Text** field, enter `Please list all guests who will be on this reservation`.
5. Complete the Summary View table as follows:

| **Heading** | **Property ID or Formula** |
| --- | --- |
| Guest Requests | requests |
| Email | email |
| Full Name | =CONCATENATE(firstName, " ", lastName) |

> [!TIP]
> By using a concatenation formula that references the firstName and lastName Property IDs, the summary view can include the guest's full name while the submission data stores individual values.×
6. Under **Choose Summary View**, select Rows.
7. Under **Customize Detail View**, select Modal.
8. Set the **Customize Button Styling** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
9. Under Triggers, select + Add Trigger.
10. Under 'Add Row' Button, in the **Button Label Text** field, enter `Add Guest`.

[![Static image displaying how the Freeform Grid component's Display settings are configured.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform_configuration_freeFormGrid_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform%20configuration%20freeFormGrid.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)
11. Click **Save**.

### Configure the Columns Component

A [Columns](/v1/docs/columns-component) component helps structure and organize the modal.

1. Drag and drop a **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component onto your canvas, placing it inside the Freeform Grid component.
2. In the Property ID field, enter **col1**.
3. Under **Column Layout**, select ![Inline image of the three columns setting option.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/checkboxes_three_column(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) (3 columns).
4. Click **Save & Close**.

### Configure the Text Field Components

The following two [Text Field](/v1/docs/text-field-component) components and the Email component collect some basic information about the guest.

1. Drag and drop two **T****ext Field** components onto the canvas, placing one in **column 1** of the Columns component, and the other in **column 2** of the Columns component.
2. Complete the Property ID and Label Text as follows:

| **Property ID** | **Label Text** |
| --- | --- |
| **firstName** | First Name |
| **lastName** | Last Name |
3. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)** for both fields.
4. **Save & Close** each component as you add it.

### Configure the Email Component

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Email** component onto the canvas, placing it in **column 3** of the **col1** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component.
2. In the Property ID field, enter **email**.
3. In the Label Text field, enter `Email`.
4. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
5. Click **Save & Close**.

### Configure the Uniform Grid Component

This [Uniform Grid](/v1/docs/uniform-grid-component) collects phone numbers, with the help of a nested [Phone Number](/v1/docs/phone-number-component) component and Dropdown component. Using a Uniform Grid makes it easy for the end-user to add multiple phone numbers, if needed.

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component onto the canvas, placing it below the **col1** **![Columns Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/columns_teal_component(14).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Columns** component inside the **freeformGridGuests** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Freeform Grid**.
2. In the Property ID field, enter **uniformGridPhoneNumber**.
3. In the **Title** field, enter `Phone Number(s)`.
4. In the **Helper Text** field, enter `Enter your phone number(s) below:`.
5. Set the **Customize Button Styling** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
6. Under '**Add Row' Button**, in the **Button Label Text** field, enter `Add Number`.
7. Under **Set Number of Allowed Rows**, in the **Minimum** field, enter `1`.
8. Under **Validation**, in the **Invalid Error** field, enter `Please add at least one phone number`.
9. Click **Save**.

### Configure the Phone Number Component

1. Drag and drop a **P****hone Number** component onto the canvas, placing it inside the **uniformGridPhoneNumber** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component.
2. In the Property ID field, enter **phoneNumber**.
3. In the Label Text field, enter `Phone Number`.
4. Click **Save & Close**.

### Configure the Dropdown Component

1. Drag and drop a **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(6).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Dropdown** component onto the canvas, placing it inside the **uniformGridPhoneNumber** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(5).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Uniform Grid** component.
2. In the Property ID field, enter **numberType**.
3. In the Label Text field, enter `Number Type`.
4. Complete the Values table as follows:

|  | Option Label | Data Source Values |
| --- | --- | --- |
| 1 | Mobile | mobile |
| 2 | Home | home |
| 3 | Work | work |
5. Click **Save & Close**.

### Configure the Radio Buttons Component

The next three components, the [Radio Buttons](/v1/docs/radio-buttons-component), [Text Area](/v1/docs/text-area-component), and [Decisions](/v1/docs/decisions-component) components, work together. Based on the answer to the Radio Buttons, the Decisions component will either make the hidden Text Area component visible or keep it hidden.

1. Drag and drop a **R****adio Buttons** component onto the canvas, placing it inside the Freeform Grid, below the Uniform Grid component.
2. In the Property ID field, enter **requests**.
3. In the Label Text field, enter `Does this guest have any accommodation requests or other restrictions (e.g. allergies)?`.
4. Complete the Values table as follows:

|  | Option Label | Value to Store in Submission Data |
| --- | --- | --- |
| 1 | Yes | Yes |
| 2 | No | No |
5. Set the **Required** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
6. Click **Save & Close**.

### Configure the Text Area Component

1. Drag and drop a **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component onto the canvas, placing it below the **requests** **R****adio Buttons** component.
2. In the Property ID field, enter **guestNotes**.
3. In the Label Text field, enter `Please list your accommodation requests or other notes:`.
4. Set the **Hide Field** toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) **(ON)**.
5. Click **Save & Close**.

### Configure the Decisions Component

The if/then logic for this Decisions component is:

- If the end-user selects **Yes** in the **requests** **R****adio Buttons** component, then make the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** visible.
- If the end-user selects **No**, then keep the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** hidden.

1. Drag and drop a **D****ecisions** component onto the canvas, placing it below the **guestNotes** **![Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/text_area_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) Text Area** component.
2. In the Property ID and Canvas Label Text fields, enter `ruleRequests`.
3. Set the **Trigger Type** to Watch.
4. Complete the Inputs table as follows:

|  | Property ID | Alias | Type | Required |
| --- | --- | --- | --- | --- |
| 1 | requests |  | exact | ![Checked Box icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D) (Checked) |
5. Complete the Outputs table as follows:

|  | Property ID | Type |
| --- | --- | --- |
| 1 | guestNotes | visible |
6. Complete the **Micro Decisions** table as follows:

|  | Input Values | Output Values |
| --- | --- | --- |
|  | requests | guestNotes_visible |
| 1 | Yes | yes |
| 2 | No | no |

[![Static image displaying how the Freeform Grid component's Actions settings are configured.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform_configuration_decisions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform%20configuration%20decisions.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)
7. Click **Save & Close**.
8. **Save** your module.

### Preview Your Configuration

You're now ready to test out your configuration. Click Preview to open your module in Express View.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeform_configuration_express.webm?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

## Structure of a Freeform Grid Component's Data

Data entered in the Freeform Grid component stores as an array of objects under a single key. The top-level key is the Freeform Grid component's Property ID, and each row added to the Freeform Grid component in Express View becomes a new object in the array of row objects. In each row object, row-specific values store as explicit key/value pairs, where the keys are the Property IDs of the components nested in the Freeform Grid component. The values are those entered by the end-user in that row

Depending on the component type, values store as different data types and data structures. The following image shows an example of how two rows of data entered in a Freeform Grid component display in the DevTools Console:

[![Static image displaying an example of how the Freeform Grid data shows in the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeformgrid_datastructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeformgrid%20datastructure.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)

### Freeform Grid Data Storage: Grid Cache and Submission Data Object

There are a couple of locations where data can be read or written to the Freeform Grid component:

- **Grid cache**: Any data entered in the Freeform Grid component is written to the cache. Cached data is temporarily saved in the browser, but the data only writes to the submission data object after a grid **Save** event occurs.
- **Submission data object (**`submission.data`**)**: The submission data object stores data for all components in the module. The Freeform Grid component's data is accessible from the `submission.data.[gridPropertyId]` path. Data from the Freeform Grid component writes to the submission data object after a grid **Save** event.

> [!TIP]
> To get a snapshot of data in the grid cache, you can use the following Angular command in the DevTools Console: `angular.element('.unqorkio-form').injector().get('CacheService').cache`. To get a snapshot of data in the submission data object, use the following Angular command: `angular.element('.unqorkio-form').scope().submission`.

The following diagram shows a simplified flow of data in a module containing a Freeform Grid component, after both a grid and module**Save** event.

> [!NOTE]
> In the image below, assume **myGrid** is the Property ID of the Freeform Grid component. Then, submission.data.{gridPropertyID} is the data access path for the Freeform Grid component's array of row objects.

[![Static image displaying the flow of data in a module that contains a Freeform Grid component after a grid save event and save event occur.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeForm_dataSaveStoreFlow_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/freeForm%20dataSaveStoreFlow.jpeg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A46Z&se=2026-11-07T18%3A57%3A46Z&sr=c&sp=r&sig=XyLXtqjme9QChgkMg56AJKD%2Fhbi6ZLDX2f7KigF%2BprM%3D)The data from the input component outside of the Freeform Grid component automatically syncs to the submission data object. The data from the input components inside the Freeform Grid component only syncs to the grid cache. A grid **Save** event is required for the grid cache to sync to the submission data object. That said, none of these changes can save as a submission in the database until a module**Save** event occurs.

> The grid cache impacts how logic components nested inside a Freeform Grid component behave. To learn about using logic components with the Freeform Grid component, including how to use grid referencing syntax, visit the [Uniform Grid and Freeform Grid: Logic and Referencing Syntax](/v1/docs/uniform-grid-and-freeform-grid-logic-and-referencing-syntax) article.

> [!CAUTION]
> Due to limitations of the grid cache, nesting an Advanced Datagrid component(s) is not supported in a Freeform Grid component.

## Resource

- [Modify the Uniform Grid component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Additional Display & Layout Field Components](/v1/docs/display-layout).
- [Uniform Grid and Freeform Grid: Logic and Referencing Syntax](/v1/docs/uniform-grid-and-freeform-grid-logic-and-referencing-syntax)

---

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A modal is a window that appears on top of the content you are currently viewing.

An accordion is a type of menu that displays a list of headers stacked on top of one another.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Enter inputs components and actions you want the component to perform.

Enter outputs components and actions you want the component to perform.

A modal is a window that appears on top of the content you are currently viewing.

The DevTools Console helps you securely store, build, test, and deploy your software.

The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission