---
title: "Uniform Grid Component"
slug: "uniform-grid-component"
description: "Customize your data entry experience with the Uniform Grid component, perfect for managing guest lists and dynamic input fields in Unqork."
updated: 2026-01-20T20:38:57Z
published: 2026-01-20T20:38:57Z
canonical: "docs.unqork.io/uniform-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.

# Uniform Grid Component

The **Uniform Grid** **component** is a highly customizable grid component that you can use to fine-tune the data entry, viewing, and editing experience for end-users. At its foundation, the Uniform Grid component acts as a container for nesting other Unqork components. In Express View, those nested components render in self-contained rows. The Uniform Grid component not only supports nesting simple input fields but also creates row-level logic based on end-user’s inputs. For example, displaying or hiding fields in the row based on input to another component in that row.

With its traditional table-based layout, the Uniform Grid component is well-suited for inline editing with data in full view. It has flexible styling options and customizable interactions. For example, customizing how end-users can invoke the edit state of the grid or a selected row. The Uniform Grid component works well when end-users need a rich data entry experience, without a set number of rows. For example, listing guests for a booking or adding beneficiaries to an insurance policy.

> [!NOTE]
> The Uniform Grid component supports nesting in most Primary Fields, Secondary Fields, and the following Data & Event Processing components used for logic:
> 
> [Calculator](/v1/docs/calculator-component), [Decisions](/v1/docs/decisions-component), [Initializer](/v1/docs/initializer-component), [Plug-In](/v1/docs/plug-in-component), and [Data Workflow](/v1/docs/data-workflow-component) components.

> [!WARNING]
> Nesting other components like the [Dropdown](/v1/docs/dropdown-component) and [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) components can result in unexpected behavior.

> [!TIP]
> While you can easily customize your Uniform Grid component’s appearance, the Uniform Grid component is best for simple table layout is appropriate. For more advanced layout options, try the [Freeform Grid](/v1/docs/freeform-grid-component) component.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/inlineGrid_configuration_ExpressGif(1).gif?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

You'll find the Uniform Grid 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

Learn more about the Uniform Grid component’s settings by clicking on the tabs below:

UDesignerClassic Designer

### General

### ![A static image displaying the Property ID of Uniform Grid component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid%20Component.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

| Setting | Description |
| --- | --- |
| Property ID | A Property ID is the unique field ID used by Unqork to track and link [components](https://docs.unqork.io/docs/panel-component) in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API calls. Property IDs must use camel case (stylized as camelCase) without spaces or punctuation. It's best practice for Uniform Grid components to have uniformGrid as a prefix in the Property ID. |

### Display Panel

![A static image displaying the Display Panel of the Uniform Grid component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Display%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

| Setting | Description |
| --- | --- |
| Label Text | The heading of the grid. The end-user sees this title at the top of the grid in Express View. To hide the label in Express View, set Hide Label to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**. |
| Tooltip | A short hint that displays when an end-user positions their cursor over the ![Tooltip icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Tooltip.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) (**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 inputs or how to use the grid. The Helper Text displays below the Uniform Grid component's Title in Express View. |
| Hide Label | Setting Hide Label to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)** prevents the label from displaying in Express View. The label still displays in the Module Builder. By default, Hide Label 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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(OFF)**. |
| Hide Field | Displays or hides the component from view. Setting Hide Field to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(OFF)**. |
| Disable User Input | Disables the end-user from editing the field. |
| Grid Height | Select how to set the maximum height of the grid. The options include: - **Auto height**: The grid height scales to show all records. - **Define height by unit**: Define the grid height in pixels. |
| Display Pattern | Defines the display pattern for components nested in the Uniform Grid component. The two supported options are **Inline** and **Simple Loop**. By default, Display Pattern is set to **Inline**. |
| Labels | When the Display Pattern is selected as Inline, the Labels field is visible. Select where nested components' labels display in the Uniform Grid component. - **Show as column headers**: Labels display as column headers at the top of the grid only. - **Show inline**: Labels display above the corresponding component in every row of the grid. - **Hide Label**: Labels do not display. |
| Customize Button Styling | When set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)**(ON)**, customization fields display for the following options: - **Add Row Button** - **Update Row Button** - **Edit Row Button** - **Delete Row Button** To customize each button, edit the fields displayed below the corresponding button's header. |
| Button Label Text | When the Customize Button Styling field is set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)**(ON),** the button's Label Text notifies your end-user about how the button is used when clicked. This text displays in the button itself. Each button has the following default Label Text: - **Add Row Button**: Create New - **Update Row Button**: Done - **Edit Row Button**: Edit - **Delete Row Button**: 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 affect 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. > Click [here](https://getbootstrap.com/docs/3.3/components/) to access the full list of supported GLYPHICONS® glyph codes. |

### Actions Panel

![A static image displaying the Actions Panel of the Uniform Grid component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Actions%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

#### Triggers Group

The Uniform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from four possible triggering events for each trigger.

You can also create several triggers that have the same triggering event.

| Setting | Description |
| --- | --- |
| When... | Select an action to watch for to fire the trigger. The drop-down's options are: - **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 Edited**: Fires the trigger when any row in the grid is edited. - **Row is Saved**: Fires the trigger when the end-user clicks Done after invoking the edit state. |
| Property ID | Enter the Property ID of the component to trigger when the specified **When...** action occurs. |

#### User Affordances Group

These settings determine how your end-user can interact with the grid and its rows. Select how and where the end-user invokes edit state for a row. From the edit state, end-users can edit and delete rows.

There are four options:

- **Full Grid Editable**: All rows of the grid retain the edit state at all times.
- **Full Grid Editable via Global Edit Button**: End-users control the edit state for all rows in the grid using a component-level Edit button. Clicking Edit makes all rows editable. Clicking Done makes all rows view-only.
- **Selected Entry Editable**: End-users control the edit state at the individual row level by selecting the row. Selecting a row makes the selected row editable. Clicking Done makes the selected row view-only.
- **Entry Editable via Edit Button**: End-users control the edit state at the individual row level, using a row-level Edit button. Clicking Edit makes the selected row editable. Clicking Done makes the selected row view-only.

### Validation Panel

![A static image displaying the Validation Panel of the Uniform Grid component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Validation%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

#### Set Number of Allowed Rows Group

| Setting | Description |
| --- | --- |
| Invalid Error | An error message that displays when the grid has any validation errors. |
| Minimum Number of Allowed Rows | Sets the minimum number of allowed rows in the grid. |
| Min Length Error Message | An error message 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. > [!NOTE] > When the maximum number of rows is met, the Uniform Grid's **Create New** button is disabled and end-users cannot add any new rows. |
| Max Length Error Message | An error message displays when the grid exceeds the maximum number of rows set. |

## Adding a Uniform Grid Component

In this configuration, you'll use a Uniform Grid component to let end-users list guests attending an event. The Uniform Grid component is useful for simple data entry scenarios like this example, especially when you don't know how many rows your end-user needs. Nesting input fields in the Uniform Grid component makes it easy to collect information. To see how you can use logic components inside the Uniform Grid component, the configuration includes a [Decisions](/v1/docs/decisions-component) component that displays hidden fields based on the end-user's input.

> [!NOTE]
> This simple configuration focuses on how to use the Uniform Grid component for basic information collection. You can add additional components and leverage features like validation and triggers for more complex functionality.

### Configure the Uniform Grid Component

For this configuration, the Uniform Grid component uses the default settings.

1. In the Module Builder, drag and drop a **Uniform Grid** component onto the canvas.
2. In the **Property ID** field, enter `uniformGridRsvp`.
3. In the **Label Text** field, enter `Guest RSVP`.
4. In the **Helper Text** field, enter `Please list all guests who will attend the event`.
5. From the **Labels** drop-down, select **Show Inline**.
6. Set **Customize Button Styling** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)**(ON)**.
7. Under **Add Row Button**, in the **Button Label Text** field, enter `Add Guest`.

![A static image displaying the configuration of the uniformGridRsvp Uniform Grid component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Component%20configuration.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)
8. Click **Save Component**.

### Configure the Text Field Components

Next, configure [Text Field](https://docs.unqork.io/docs/text-field-component) components to collect basic information about each guest.

1. Drag and drop two **Text Field** components inside the `uniformGridRsvp` **Uniform Grid** component.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | lastName | Last Name |
3. Click **Save Component** for each component as you add it.

### Configure the Number Component

1. Drag and drop a [Number](https://docs.unqork.io/docs/number-component) component inside the `uniformGridRsvp` **Uniform Grid** component, below the `lastName` **Text Field** component.
2. In the **Property ID** field, enter `age`.
3. In the **Label Text** field, enter `Age`.
4. Click **Save Component**.

### Configure the Text Field Component

The third [Text Field](/v1/docs/text-field-component) component is a read-only field, used to display a message. You'll use a [Decisions](https://docs.unqork.io/docs/decisions-component) component to set when this Text Field displays.

1. Drag and drop a **Text Field** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `age` **Number** component.
2. In the **Property ID** field, enter `ageNotice`.
3. In the **Label Text** field, enter `Notice`.
4. Set **Display as Text** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
5. Set **Hide Field** to **(ON)**.
6. Click **Save & Close**.

### Configure the Single Checkbox Component

1. Drag and drop a **Single Checkbox** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `ageNotice` **Text Field** component.
2. In the **Property ID** field, enter `minorGuest`.
3. In the **Label Text** field, enter `I understand that minors must be accompanied by an adult at all times.`
4. Set **Hide Field** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(766).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
5. Click **Save Component**.

### Configure the Decisions Component

The [Decisions](/v1/docs/decisions-component) component displays the `ageNotice` **Text Field** and the `minorGuest` **Single Checkbox** component when certain criteria are met. In this case, when the end-user lists a guest who is under the age of 18, the `ageNotice` **Text Field** displays a message noting the name of the underage guest. Then, the end-user must confirm that they understand that an adult must accompany all minors during the event.

1. Drag and drop a **Decisions** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `minorGuest` **Single Checkbox** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleAdultCheck`.
3. From the **Trigger Type** drop-down, select **Watch**.
4. Set the **Execution Type** to **Merge**. Because the same Property ID appears twice in the Outputs table, a **Merge** execution is necessary to apply both associated outputs.
5. In the **Inputs** table, enter the following:

| # | Property ID | Alias | Type | Required |
| --- | --- | --- | --- | --- |
| 1 | age | A | range | Yes |
| 2 | firstName | B | exact | Yes |
| 3 | lastName | C | exact | Yes |
6. In the **Outputs** table, enter the following:

| # | Property ID | Type |
| --- | --- | --- |
| 1 | ageNotice | visible |
| 2 | minorGuest | requiredAndVisible |
| 3 | ageNotice | value |
7. In the **Conditionals** table, enter the following:

| # | age_min | age_max | firstName | lastName | ageNotice_visible | minorGuest_requiredAndVisible | ageNotice_value |
| --- | --- | --- | --- | --- | --- | --- | --- |
| 1 | 0 | 17 |  |  | yes | yes | =CONCATENATE(B, " ", C, " is a minor. Please answer the following question.") |
| 2 | 18 |  |  |  | no | no |  |

> [!TIP]
> By using a concatenation formula that references the `firstName` and `lastName` Property IDs, the `ageNotice` message can include the guest's name.

![A static image displaying the configuration of the ruleAdultCheck Decisions component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Decisions_ruleAdultCheck.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)
8. Click **Save Component**.
9. **Save** your module.

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

![A static image displaying the module in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Uniform%20Grid_Module.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

Preview your module in Express View. The completed configuration works like the following:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Uniform%20Grid_Express%20View.mp4?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

The following image shows an example of how two rows of data entered in a Uniform Grid component look in the DevTools Console:

![A static image displaying the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Uniform%20Grid_Console.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

## Structure of a Uniform Grid Component's Data

Data entered in the Uniform Grid component is stored as an array of objects under a single key. The top-level key is the Uniform Grid component's Property ID. Each row added to the Uniform Grid component becomes a new object in the array of row objects. In each row object, row-specific values are stored as explicit key/value pairs, where the keys are the Property IDs of the components nested in the Uniform Grid component. The values are those entered by the end-user in that row. Depending on the component type, values are stored as different data types and data structures.

### General

![A static iamge displaying the Property Id of the Uniform Grid component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid%20component.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

| Setting | Description |
| --- | --- |
| Property ID | A Property ID is the unique field ID used by Unqork to track and link [components](https://docs.unqork.io/docs/panel-component) in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API calls. Property IDs must use camel case (stylized as camelCase) without spaces or punctuation. It's best practice for Uniform Grid components to have uniformGrid as a prefix in the Property ID. |
| Field Tags | Assign one-word labels to help organize, identify, and group the components in your application. Consider an example from the [API Specification Snippet](https://docs.unqork.io/docs/api-specification-snippet): Field Tags are applied to [Hidden](https://docs.unqork.io/docs/hidden-component) components in the `panelRequest` and `panelResponse Panel` components. The Field Tags identify the data type of parameters included in the API request and response. The [API Docs Dashboard tool](https://docs.unqork.io/docs/api-docs-dashboard-tool) populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag `tagForDecision` to multiple components in your module. Open the Inputs table of a [Decisions](https://docs.unqork.io/docs/how-to-reference-field-tags-in-decisions) component and reference the `tagForDecision` Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the `tagForDecision` Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry. |
| Settings Tab | Select this tab to display the component's Display, Data, Actions, and Validation settings panels, as applicable. |
| Permissions Tab | Select this tab to see the RBAC settings of the component. |
| Notes Tab | Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component. |
| Cancel | Click this button to undo any unsaved configuration changes and return to the Module Builder canvas. |
| Save | Click this button to save all setting configuration changes and return to the Module Builder canvas. |

### Display Panel

![A static image displaying the Display Panel of the Uniform Grid component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid_Display%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

| Setting | Description |
| --- | --- |
| Title | The heading of the grid. The end-user sees this title at the top of the grid in Express View. It’s best practice to always include a title. To hide the title in Express View, set the Hide Title toggle to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**. |
| Title Tooltip | A short hint that displays when an end-user positions their cursor over the ![Tooltip icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Tooltip.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) (**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 inputs or how to use the grid. The Helper Text displays below the Uniform Grid component's Title in Express View. |
| 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. |
| Grid Height | Select how to set the maximum height of the grid. The options are: - **Auto height**: The grid height scales to show all records. - **Define height by unit**: Define the grid height in pixels. |
| Display Pattern | Defines the display pattern for components nested in the Uniform Grid component. It supports two options, **Inline** and **Simple Loop**. By default, Display Pattern is set to **Inline**. |
| Labels | When the Display Pattern is selected as Inline, the Labels field is visible. Select where nested components' labels display in the Uniform Grid. - **Show as column headers**: Labels display as column headers at the top of the grid only. - **Show inline**: Labels display above the corresponding component in every row of the grid. - **Hide label**: Labels do not display. |
| Hide Component | Displays or hides the component from view. Setting Hide Field to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(OFF)**. |
| Hide Title | Setting the Hide Title toggle to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(OFF)**. |
| Customize Button Styling | When set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**, customization fields display for the following buttons: - **Add Row** - **Update Row** - **Edit Row** - **Delete Row** To customize each button, edit the fields displayed below the corresponding button's header. |
| Button Label Text | When the Customize Button Styling field is set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON),** the Button's Label Text tells your end-user what the button does before they click it. This text shows in the button itself. Each button has the following default Label Text: - **Add Row**: Create New - **Update Row**: Done - **Edit Row**: Edit - **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 affect 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. > Click [here](https://getbootstrap.com/docs/3.3/components/) to access the full list of supported GLYPHICONS® glyph codes. |

### Actions Panel

![A static image displaying the Actions Panel of the Uniform Grid component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid_Actions%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

#### Triggers Group

The Uniform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from four 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 rules to trigger components when a specified action occurs. |
| When... | Select an action to watch for to fire the trigger. The drop-down's options are: - **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 Edited**: Fires the trigger when any row in the grid is edited. - **Row is Saved**: Fires the trigger when the end-user clicks Done after invoking the edit state. |
| Then... | Enter the Property ID of the component to trigger when the specified **When...** action occurs. |

#### User Affordances Group

These settings determine how your end-user can interact with the grid and its rows. Select how and where the end-user invokes edit state for a row. From the edit state, end-users can edit and delete rows. There are four options:

- **Full Grid Editable**: All rows of the grid retain the edit state at all times.
- **Full Grid Editable via Global Edit Button**: End-users control the edit state for all rows in the grid using a component-level Edit button. Clicking Edit makes all rows editable. Clicking Done makes all rows view-only.
- **Selected Entry Editable**: End-users control the edit state at the individual row level by selecting the row. Selecting a row makes the selected row editable. Clicking Done makes the selected row view-only.
- **Entry Editable via Edit Button**: End-users control the edit state at the individual row level, using a row-level Edit button. Clicking Edit makes the selected row editable. Clicking Done makes the selected row view-only.

### Validation Panel

![A static image displaying the Validation Panel of the Uniform Grid component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid_Validation%20Panel.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%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 displays when the grid does not meet the minimum number of rows set. |
| Maximum | Sets the maximum number of allowed rows in the grid. > [!NOTE] > When the maximum number of rows is met, the Uniform Grid's **Create New** button is disabled and end-users cannot add any new rows. |
| Maximum Error Message | An error message 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 any validation errors. |

## Adding a Uniform Grid Component

In this configuration, you'll use a Uniform Grid component to let end-users list guests attending an event. The Uniform Grid component is useful for simple data entry scenarios like this example, especially when you don't know how many rows your end-user needs. Nesting input fields in the Uniform Grid component makes it easy to collect information. To see how you can use logic components inside the Uniform Grid component, the configuration includes a [Decisions](/v1/docs/decisions-component) component that displays hidden fields based on the end-user's input.

> [!NOTE]
> This simple configuration focuses on how to use the Uniform Grid component for basic information collection. You can add additional components and leverage features like validation and triggers for more complex functionality.

### Configure the Uniform Grid Component

For this configuration, the Uniform Grid component uses the default settings.

1. In the Module Builder, drag and drop a **Uniform Grid** component onto the canvas.
2. In the **Property ID** field, enter `uniformGridRsvp`.
3. In the **Title** field, enter `Guest RSVP`.
4. In the **Helper Text** field, enter `Please list all guests who will attend the event`.
5. Under **Labels**, select the **Show inline** radio button.
6. Set **Customize Button Styling** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
7. Under **'Add Row' Button**, in the **Button Label Text** field, enter `Add Guest`.

![A static image displaying the configuration of the uniformGridRsvp Uniform Grid component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid%20component%20configuration.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)
8. Click **Save**.

### Configure the Text Field Components

Next, configure two [Text Field](https://docs.unqork.io/docs/text-field-component) components to collect basic information about each guest.

1. Drag and drop two **Text Field** components inside the `uniformGridRsvp` **Uniform Grid** component.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | lastName | Last Name |
3. Click **Save & Close** for each component as you add it.

### Configure the Number Component

1. Drag and drop a [Number](https://docs.unqork.io/docs/number-component) component inside the `uniformGridRsvp` **Uniform Grid** component, below the `lastName` **Text Field** component.
2. In the **Property ID** field, enter `age`.
3. In the **Label Text** field, enter `Age`.
4. Click **Save & Close**.

### Configure the Text Field Component

The third [Text Field](/v1/docs/text-field-component) component is a read-only field, used to display a message. You'll use a [Decisions](https://docs.unqork.io/docs/decisions-component) component to set when this Text Field displays.

1. Drag and drop a **Text Field** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `age` **Number** component.
2. In the **Property ID** field, enter `ageNotice`.
3. In the **Label Text** field, enter `Notice`.
4. Set **Display as Text** to![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
5. Set **Hide Field** to![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
6. Click **Save & Close**.

### Configure the Single Checkbox Component

1. Drag and drop a **Single Checkbox** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `ageNotice` **Text Field** component.
2. In the **Property ID** field, enter `minorGuest`.
3. In the **Label Text** field, enter `I understand that minors must be accompanied by an adult at all times.`
4. Set **Hide Field** to![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Toggle%20ON.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D) **(ON)**.
5. Click **Save & Close**.

### Configure the Decisions Component

The [Decisions](/v1/docs/decisions-component) component displays the `ageNotice` **Text Field** and the `minorGuest` **Single Checkbox** component when certain criteria are met. In this case, when the end-user lists a guest who is under the age of 18, the `ageNotice` **Text Field** displays a message noting the name of the underage guest. Then, the end-user must confirm that they understand that an adult must accompany all minors during the event.

1. Drag and drop a **Decisions** component inside the `uniformGridRsvp` **Uniform Grid** component, below the `minorGuest` **Single Checkbox** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleAdultCheck`.
3. Set the **Trigger Type** to **Watch**.
4. Set the **Execution Type** to **Merge**. Because the same Property ID appears twice in the Outputs table, a **Merge** execution is necessary to apply both associated outputs.
5. In the **Inputs** table, enter the following:

| Property ID | Alias | Type | Required |
| --- | --- | --- | --- |
| age | A | range | Yes |
| firstName | B | exact | Yes |
| lastName | C | exact | Yes |
6. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| ageNotice | visible |
| minorGuest | requiredAndVisible |
| ageNotice | value |
7. In the **Micro Decisions** table, enter the following:

| age_min | age_max | firstName | lastName | ageNotice_visible | minorGuest_requiredAndVisible | ageNotice_value |
| --- | --- | --- | --- | --- | --- | --- |
| 0 | 17 |  |  | yes | yes | =CONCATENATE(B, " ", C, " is a minor. Please answer the following question.") |
| 18 |  |  |  | no | no |  |

> [!TIP]
> By using a concatenation formula that references the `firstName` and `lastName` Property IDs, the `ageNotice` message can include the guest's name.

![A static image displaying the configuration of the ruleAdultCheck Decisions component in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid_Decisions__ruleAdultCheck.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)
8. Click **Save**.
9. **Save** your module.

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

![A static image displaying the module in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Uniform%20Grid_Module.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

Preview your module in Express View. The completed configuration works like the following:

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Uniform%20Grid_Express%20View.mp4?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

The following image shows an example of how two rows of data entered in a Uniform Grid component look in the DevTools Console:

![A static image displaying the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Uniform%20Grid_Console.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A12Z&se=2026-11-09T04%3A51%3A12Z&sr=c&sp=r&sig=9NzvTVf%2FuKItxYDJovXTfbFglDaccrIEbcNQUoen2JE%3D)

## Structure of a Uniform Grid Component's Data

Data entered in the Uniform Grid component is stored as an array of objects under a single key. The top-level key is the Uniform Grid component's Property ID. Each row added to the Uniform Grid component becomes a new object in the array of row objects. In each row object, row-specific values are stored as explicit key/value pairs, where the keys are the Property IDs of the components nested in the Uniform Grid component. The values are those entered by the end-user in that row. Depending on the component type, values are stored as different data types and data structures.

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.

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.

Rendering is the process of loading components and displaying the final result on the front-end screen.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton.

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

Elements are are what you use to build Unqork applications. Elements include modules, workflows, Data Collections, Data Schema, and Record Collections.

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

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

Data types are a classification of data that determines how it is stored and interpreted.

A data structure is the design used for organizing, using, and storing data.

Data types are a classification of data that determines how it is stored and interpreted.

RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network.