---
title: "Advanced Datagrid Component"
slug: "advanced-datagrid-component"
updated: 2025-12-04T19:22:11Z
published: 2025-12-04T19:22:11Z
canonical: "docs.unqork.io/advanced-datagrid-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.

# Advanced Datagrid Component

UDesignerClassic Designer

The **Advanced Datagrid component** is a Centauri (v1.0) layout component that, like the [Data Grid](/v1/docs/data-grid-component) component, lets you organize other [components](/v1/docs/module-builder-component-library). The difference is that the Advanced Datagrid component displays other components in a modal.

Examples of when to use an Advanced Datagrid include the following:

- Display entries in a dashboard.
- Collect detailed prescription medication information.
- Collect beneficiary information, including percentage calculations.
- Build lists or combine other grids or tables into a single grid.
- Use reference keys to reference other tables or grids, combining multiple types of information and layouts.

You'll find the Advanced Datagrid in 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, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

| Setting | Description |
| --- | --- |
| Label Text | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Default State Options

| Setting | Description |
| --- | --- |
| Disable User Input | Prevents the end-user from entering a value in the field by displaying it as grayed-out and unclickable in Express View. By default, Disable User Input 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Draft Save | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)** to let end-users save a draft. By default, this setting is set to off ![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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Hide Label | Displays or hides the Label field from view. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)** hides it 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)** displays the field. The component will always remain visible in the Module Builder. By default, Hide Label is 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**. |
| Hide Component | Shows or hides the component. Set Hide Component 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)** to hide it in Express View. The component will always remain visible 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |

[![A static image displaying the Advanced Data Grid's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Modal Formatting

| Setting | Description |
| --- | --- |
| **Modal Title** | Enter a title for the pop-up modal. |
| **Modal Message** | Lets configure a pop-up modal message that displays a submission's progress. By default, the message reads: `Loading please wait....` |
| **When to reset the form** | Choose when to restore the form to its default values: - **On Add**: Restores the default values when a submission is added. - **On Save**: Restores the default values when a submission is saved. |
| Fullscreen | Expands your modal screen to the full width and height of the window. By default, this setting is set to off ![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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| **OK Button Label** | A button displays at the bottom left of your modal in Express View. This field lets you choose the label text of the button. By default, this button label text displays as **OK**. |
| **Save Button Label** | A button displays at the bottom left of your modal in Express View. This field lets you set the button label text of the button. By default, this button label text displays as **Save**. |

[![A static image displaying the Advanced Data Grid's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Grid Formatting

| Setting | Description |
| --- | --- |
| **Delete Title** | Enter title for the modal that displays when deleting an entry in Express View. By default, the modal displays the following: `Are you sure you want to delete this item?`. |
| **Delete Text** | This modal displays if end-users select Confirm Deletion and try to delete an entry. By default, the message reads: `Are you sure you want to delete this item?` |
| **Title for Save Confirmation Alert** | When your end-user saves an invalid entry an error message displays. This field lets you set a title for that error message. |
| **Message for Save Confirmation Alert** | When your end-user saves an invalid entry an error message displays. |
| **Save Event** | Lets you create an event for your save confirmation modal. |
| **Message While Saving** | Enter a message that displays when an entry saves. By default, the message reads: `Saving...` |
| **Cancel Button Label** | Sets the button label text for the Cancel button. By default, this button label text displays as `Cancel`. |
| **Action Label** | Sets the button label text for the Action button. By default, this button label text displays as `Actions`. |
| **Add Button Label** | Sets the button label text for the Add button. By default, this button label text displays as `Add`. |
| **Edit Button Label** | Sets the button label text for the Edit button. By default, the button label text displays as `Edit`. |
| **Delete Button Label** | Sets the button label text for the Delete button. By default, the button label text displays as `Delete`. |
| **View Label** | Sets the button label text for the View button. By default, the button label text displays as `View`. |

[![A static image displaying the Advanced Data Grid's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display3_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display3.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Additional Settings

| Setting | Description |
| --- | --- |
| Confirm Deletion | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, a pop-up modal displays when deleting an entry in Express View. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Show Yes/No Instead of Delete/Edit | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, the grid displays Yes/No options instead of the default Delete/Edit buttons. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Show Select Option Instead of Add/Edit | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, this checkbox lets you display a Select option instead of the default Add/Edit buttons. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Remember Scroll Position | Stores the page and vertical scroll position of the Advanced Datagrid component. When enabled, the component remembers the last place scrolled to on the grid. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Display Inline Rows | The Advanced Datagrid component defaults to a table style in the Express View. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Default First Row to Open | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, the component automatically opens the first row of the accordion in Express View. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Show the Save Button in the Accordions | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, displays a Save button in each row of the grid. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Show a Modal for Confirmation of Save | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, a pop-up modal displays, confirming a save action. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| Hide Table When Empty | Hide the grid in Express View when there's no data in it. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |

[![A static image displaying the Advanced Data Grid's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display4_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display4.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Data Settings

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |
| **Component Reference Key** | Enter the Property ID of the Data Table component where you're retrieving data. You'll notice this field duplicates the functionality of the Data Reference Key field. |
| **Yes/No Reference Key** | This field is specific to components containing Yes/No lists. Enter the Property ID of the component where you're retrieving data. |
| **Filter Field** | Enter the component containing a value that filters the list. |
| **Filter Yes/No Component** | When the Yes/No Reference Key contains a component Property ID, you can use this field to filter the component’s Yes/No list. |

[![A static image displaying the Advanced Data Grid's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data1.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Display

| Setting | Description |
| --- | --- |
| ID | This field lets you map a component in your Advanced Datagrid component. Enter the component's Property ID to display the component's data in your grid. |
| Heading | For each Property ID you enter in the ID fields, you can display a header in Express View. |
| New Row | Adds a new row to the table. |

[![A static image displaying the Advanced Data Grid's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data2_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Extra Fields to Include

| Setting | Description |
| --- | --- |
| ID | This field lets you map a component in your Advanced Datagrid component. Enter the component's Property ID to display the component's data in your grid. |
| New Row | Adds a new row to the table. |

[![A static image displaying the Advanced Data Grid's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data3_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data3.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

### Yes/No Question Listing

[![A static image displaying the Advanced Data Grid's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data4_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data4.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

| Setting | Description |
| --- | --- |
| Code | Enter text to display for the Yes/No Question listing |
| Text | Enter text to display for the Yes/No Question listing. |
| Required | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), your end-user must enter a value into the field before they can save an entry. Clear the checkbox when an entry is optional. By default, this checkbox is clear. |
| 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(12).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |
| Subheader | Enter a value to display under the header of the Yes/No Question listing. |
| New Row | Adds a new row to the table. |

## Actions

### Triggers

| Setting | Description |
| --- | --- |
| **New Row** | Enter the Property ID of a component that, when triggered, creates a new row in Express View. |
| **Edit Row** | Enter the Property ID of a component that, when triggered, edits a row in Express View. |

[![A static image displaying the Advanced Data Grid's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_0_0(5).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions(5).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Validation

### User Input

| Setting | Description |
| --- | --- |
| **Required** | 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**, the input is optional. By default, Required 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%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

[![A static image displaying the Advanced Data Grid's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(7).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(7).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Advanced

### Additional Validation Options

| Setting | Description |
| --- | --- |
| **Error Title** | Display as a header in a modal to the end-user if an error occurs. |
| **Error Message** | Displays under the **Error Title** in a modal to the end-user if an error occurs. |
| **Min Length** | Sets the minimum number of characters an end-user must enter for valid input. |
| **Max Length** | Sets the maximum number of characters an end-user must enter for valid input. |

### 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. |
| **Add Button Icon Class** | Enter a Custom CSS Class to apply to the Add button. |
| **Edit Button Icon Class** | Enter a Custom CSS Class to apply to the Edit button. |

[![A static image displaying the Advanced Data Grid's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(8).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(8).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Adding an Advanced Datagrid Component

In this example, you'll set up an Advanced Datagrid component with a few components for data entry. In Express View, your end-user can add, edit, or delete data as needed. These instructions assume that you have an open module saved with a title.

### Configure the Advanced Datagrid Component

Configure an Advanced Datagrid component to contain your information fields.

1. In the Module Builder, drag and drop an **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid** component onto your canvas.
2. In the Property ID field, enter **adgApplication** .
3. In the Label Text field, enter `Application`.
4. Navigate to the Display setting's **Grid Formatting** section.
5. In the **Add Button** field, enter `Add Applicant`.
6. Navigate to the **Data** settings.
7. In the **Display** table, enter the following:

|  | ID | Heading |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | lastName | Last Name |
| 3 | email | Email |
| 4 | phoneNumber | Phone Number |

> [!NOTE]
> You'll configure the components that match these values in later steps.

[![A static image displaying the Advanced Datagrid's Data display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adgApplication_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adgApplication.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
8. Click **Save Component**.

### Configure the Text Field Components

Configure two [Text Field](/v1/docs/text-field-component) components for your first and last name fields.

1. Drag and drop two **T****ext Field** components inside of the **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing them one below the other.
2. For each component, enter the following Property ID and Label Text values:

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

### Configure the Email Component

Configure an [Email](/v1/docs/email-component) component to gather email addresses from your end-users.

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Email** component into your **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing it below your **firstName** and **lastName** **T****ext Field** components.
2. In the Property ID field, enter **email**
3. In the Label Text field, enter `Email`.
4. Click **Save Component**.

### Configure the Phone Number Component

Configure a [Phone Number](/v1/docs/phone-number-component) component to gather phone number data from your end-users.

1. Drag and drop a **P****hone Number** component into your **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing it below your **email** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Email** component
2. In the Property ID field, enter **phoneNumber**.
3. In the Label Text field, enter `Phone Number`.
4. Click **Save Component**
5. **Save** your module.

Preview your module in Express View to see the following functionality:

[![A static image displaying the Advanced Data Grid in Express View.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView(2).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

The **Advanced Datagrid component** is a Centauri (v1.0) layout component that, like the [Data Grid](/v1/docs/data-grid-component) component, lets you organize other [components](/v1/docs/module-builder-component-library). The difference is that the Advanced Datagrid component displays other components in a modal.

You can use an Advanced Datagrid to:

- Display entries in a dashboard.
- Collect detailed prescription medication information.
- Collect beneficiary information, including percentage calculations.

When designing an Advanced Datagrid component, you'll create headings identify the information in the grid. In Express View, your end-users can add, edit, and delete data stored in the grid. All end-user edits take place in a modal.

Other advantages of the Advanced Datagrid component include the following:

- Build lists or combine other grids or tables into a single Advanced Datagrid component.
- Using reference keys to reference other tables or grids. Reference keys let you combine multiple types of information and layouts in your Advanced Datagrid component .

You'll find the Advanced Datagrid in 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, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Dataviewer Panel

### General and Button Settings

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg_genButtons_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg%20genButtons.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

| **Setting** | Description |
| --- | --- |
| **Label** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Property Name** | A Property Name (Property ID) is the unique field ID used by Unqork to track and link your module components. The Property Name is how the software identifies your component. Using Property Names lets you link components, creating logic-based configurations and API (application programming interface) calls. Property Names must use camel case (stylized as camelCase) without spaces or punctuation. |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |
| **Yes/No Reference Key** | This field is specific to components containing Yes/No lists. Enter the Property ID of the component where you're referencing data. |
| **Component Reference Key** | Enter the Property ID of the Data Table component where you're referencing data. You'll notice that this field duplicates the functionality of the Data Reference Key field. |
| **Modal Title** | You can configure a pop-up that displays the loading progress of the Advanced Datagrid. This field lets you enter a title for the pop-up. |
| **Modal Message** | You can configure a pop-up that displays a submission's progress. By default, the message reads: `Loading please wait...` |
| **OK Button** | This button displays at the bottom left of your modal in Express View. On button-press of the OK button, the pop-up closes. This field lets you choose the label text of the button. By default, this button label text shows as `OK`. |
| **Save Button** | This button displays at the bottom left of your modal in Express View. On button-press, your updates store, and you'll return to the grid. This field lets you set the button label text for the button. By default, this button label text shows as `Save`. |
| **Cancel Button** | This button displays at the bottom left of your modal in Express View. On button-press, your updates clear and you'll return to the grid. This field lets you set the button label text for the button. By default, this button label text shows as `Cancel`. |
| **Action** | By default, the Advanced Datagrid has an Actions column in Express View. You can perform Actions on entries added to the table. This field lets you set the label text of the column. By default, these actions are `Edit` and `Delete`. |
| **Add Button** | The Add button lets you add entries to your grid in Express View. This field lets you set the button label text for the button. By default, this button label text shows as `Add`. |
| **Edit Button** | The Edit button displays at the right of your grid in Express View. On button-press, you can change or update your entries. This field lets you set the button label text for the button. By default, the button label text shows as `Edit`. |
| **Delete Button** | This button displays at the right of your grid in Express View. On button-press, you'll remove the entry associated with the button. This field lets you set the button label text for the button. By default, the button label text shows as `Delete`. |
| **View** | When disabling a component, the View button lets your end-user see the entry but not edit it. This field lets you set the button label text for the button. By default, the button label text shows as `View`. |
| **When to reset the form** | Choose when to restore the form to default values: - **On Add**: Restores the default values when a submission is added. - **On Save**: Restores the default values when a submission is saved. This setting is optional. |

### Error and Component Settings

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg_errorsFilters_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg%20errorsFilters.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

| **Setting** | Description |
| --- | --- |
| **Error Title** | When your end-user saves an invalid entry an error message shows. This field lets you set a title for that error message. By default, the Error Title shows as: `Oops - {{ errors }} error(s) have been found!`. `{{ errors }}` represents the count of errors returned. |
| **Error Message** | When your end-user saves an invalid entry an error message shows. By default, the message reads: `Please check your module and fix fields outlined in red.` |
| **Delete Title** | When deleting an entry in Express View, you can configure a pop-up to appear. This field lets you choose the title of the pop-up. By default, the pop-up asks: `Are you sure you want to delete this item?` |
| **Delete Text** | When deleting an entry in Express View, you can configure a pop-up to display. This pop-up displays if you select the Confirm Deletion checkbox and try to delete an entry. By default, the message reads: `Are you sure you want to delete this item?` |
| **Confirm Deletion** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), a pop-up displays if you try to delete an entry in Express View. By default, this setting is ☐ (**unchecked**). |
| **Fullscreen** | Sets your modal screen to expand to the entire width and height of the window. By default, this setting is ☐ (**unchecked**). |
| **Required** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), your end-user must enter a value into the field before they can save an entry. Clear the checkbox when an entry is optional. By default, this setting is ☐ (**unchecked**). |
| **Draft Save** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), gives you the option to save a draft. By default, this setting is ☐ (**unchecked**). |
| **Minimum Length** | Sets the minimum number of rows to display in the grid inExpress View. When you reach this lower limit, the button disappears. |
| **Maximum Length** | Sets the maximum number of rows to display in the grid in Express View. When you reach this upper limit, the button disappears. |
| **Disabled** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), prevents end-users from interacting with or editing the input field in Express View. When your end-user hovers over the field, their cursor changes to alert them to the status change. By default, this setting is ☐ (**unchecked**). |
| **Hidden** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), hides the grid and all components from the end-user in Express View. By default, this setting is ☐ (**unchecked**). |
| **Show Yes/No Instead of Delete/Edit** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), the grid shows Yes/No options instead of the default Delete/Edit buttons. By default, this setting is ☐ (**unchecked**). |
| **Remember Scroll Position** | Stores the page and vertical scroll position of your Advanced Datagrid. When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), Unqork remembers the last place you scrolled to on your grid. When you return to the page, it directs you automatically to that position. This is helpful if you have a large grid and want to return to the same entries on your next visit. By default, this setting is ☐ (**unchecked**). |
| **Show Select Option Instead of Add/Edit** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), lets you display a Select option rather than Add/Edit buttons. By default, this setting is (**checked**). |
| **Persistent** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), data is stored each time the module executes. By default, this setting is ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**). |
| **Hide Label** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), stops Label Text from displaying in Express View. Your Label Text still displays in Module Builder. By default, this setting is ☐ (**unchecked**). |
| **Hide Table When Empty** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), lets you hide your grid in Express View when there's no data in it. By default, this setting is ☐ (**unchecked**). |
| **Filter Field** | Enter the component containing a value that filters the list. |
| **Filter Yes/No Component** | When the Yes/No Reference Key contains a component Property ID, you can use this field to filter the component’s yes/no list. |

### Triggers and Display Settings

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg_triggersDisplay_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/adg%20triggersDisplay.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

| **Setting** | Description |
| --- | --- |
| **New Row Trigger** | Enter the Property ID of a component that, when triggered, creates a new grid row in Express View. |
| **Edit Row Trigger** | Enter the Property ID of a component that, when triggered, edits a grid row in Express View. |
| **Display Inline Rows** | The Advanced Datagrid defaults to a table style in the Express View. To set up data in an accordion, set this to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**) |
| **Default First Row to Open** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**) to automatically open the first row of the accordion in Express View. By default, this setting is ☐ (**unchecked**). |
| **Show the Save Button in the Accordions** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), displays a Save button in each row of your grid. By default, this setting is ☐ (**unchecked**). |
| **Show a Modal for Confirmation of Save** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), a pop-up displays to confirm the saving of an entry in your grid. By default, this setting is ☐ (**unchecked**). |
| **Message for Save Confirmation Alert** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), creates a Save confirmation pop-up. This field lets you enter the text for that pop-up. |
| **Title For Save Confirmation Alert** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), lets you create a title for your save confirmation pop-up. |
| **Save Event** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**checked**), lets you create an event for your save confirmation pop-up. |
| **Message While Saving** | This field lets you enter a message that displays as an entry saves. By default, the message reads: `Saving...` |

### Display

| Setting | Description |
| --- | --- |
| ID | This field lets you map a component in your Advanced Datagrid. Enter the component's Property ID to display the component's data in your grid. |
| Heading | For each Property ID you enter in the ID fields, you can display a heading in Express View. |

### Yes/No Question Listing

| Setting | Description |
| --- | --- |
| Code | Details coming soon! |
| Text | Details coming soon! |
| Required | When you select the Required checkbox, your end-user must enter a value into the field before they can save an entry. Clear the checkbox when an entry is optional. By default, this checkbox is clear. |
| 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(12).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) (**Tooltip**) icon. Tooltips can display across more than one line. |
| Subheader | Details coming soon! |
| Field Tags | Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the [API Specification Snippet](/v1/docs/api-specification-snippet): Field Tags are applied to Hidden components in the **panelRequest** and **panelResponse** **P****anel** components. The Field Tags identify the data type of parameters included in the API request and response. The [API Docs Dashboard tool](/v1/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 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. |

## Adding an Advanced Datagrid Component

In this example, you'll set up an Advanced Datagrid component with a few components for data entry. In Express View, your end-user can add, edit, or delete data as needed. These instructions assume that you have an open module saved with a title.

### Configure the Advanced Datagrid Component

Configure an Advanced Datagrid component to contain your information fields.

1. In the Module Builder, drag and drop an **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid** component onto your canvas.
2. In the **Label** and **Property Name** fields, enter `adgApplication` .
3. In the **Add Button** field, enter `Add Applicant`.

[![A static image displaying the Data Grid's Add Button settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_AdvDataGrid_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20AdvDataGrid%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
4. In the **Display** table, enter the following:

| ID | Heading |
| --- | --- |
| firstName | First Name |
| lastName | Last Name |
| email | Email |
| phoneNumber | Phone Number |

> [!NOTE]
> You'll configure the components that match these values in later steps.

[![A static image displaying the Advanced Data Grid's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_AdvDataGrid_03_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20AdvDataGrid%2003.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)
5. Click **Save**.

### Configure the Text Field Components

Configure two [Text Field](/v1/docs/text-field-component) components for your first and last name fields.

1. Drag and drop two **T****ext Field** components inside of the **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing them one below the other.
2. For each component, enter the following Property ID and Label Text values:

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

### Configure the Email Component

Configure an [Email](/v1/docs/email-component) component to gather email addresses from your end-users.

1. Drag and drop an **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Email** component into your **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing it below your **firstName** and **lastName** **T****ext Field** components.
2. In the Property ID and Label Text fields, enter `email` .
3. Click **Save**.

### Configure the Phone Number Component

Configure a [Phone Number](/v1/docs/phone-number-component) component to gather phone number data from your end-users.

1. Drag and drop a **P****hone Number** component onto your **adgApplication** **![Advanced Data Grid Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advGrid_teal_icon.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Advanced Datagrid**, placing it below your **email** **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/email_teal_component(4).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D) Email** component
2. In the **Property ID** and **Label Text** fields, enter `phoneNumber`.
3. Click Save
4. **Save** your module.

Preview your module in Express View to see the following functionality:

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild_AdvDataGrid_05_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuild%20AdvDataGrid%2005.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A45Z&se=2026-11-07T18%3A57%3A45Z&sr=c&sp=r&sig=kOjymUBOFAt%2FujjbrqDV28Pm6f3feJOVmWIsT7Q7R10%3D)

## Resources

- [Display & Layout Components Landing Page](/v1/docs/display-layout)
- [Introduction to Display & Layout Components](/v1/docs/introduction-to-display-layout)
- [Data Grid Component](/v1/docs/data-grid-component)
- [Vega Table Component](/v1/docs/vega-table-component)

The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications.

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

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.

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.

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

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.

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

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

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.