---
title: "How to: Use Logic With Dynamic Index"
slug: "dynamic-grid-using-logic-with-dynamic-index"
description: "Learn to leverage UDesignerClassic's Dynamic Index for complex logic, enabling efficient submission reviews and dynamic grid interactions."
updated: 2026-02-02T20:19:03Z
published: 2026-02-03T15:48:58Z
canonical: "docs.unqork.io/dynamic-grid-using-logic-with-dynamic-index"
---

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

# How to: Use Logic With Dynamic Index

**UDesigner**

**Dynamic Index** is one of the most powerful features for using complex logic with a [Dynamic Grid](/v1/docs/dynamic-grid-component) component. In this how-to guide, you'll learn how to use logic and triggers alongside the Dynamic Index feature.

In this example, the Dynamic Grid component displays several rows of submission IDs. You'll import these submission IDs from a Data Collection, then inject them into your grid using logic components. You'll configure triggers and logic so that whenever a row's submission ID is selected, that submission opens in a new tab. This functionality is useful if you're using your Dynamic Grid component to review submissions. But you can also extend this type of logic to other situations where you want to trigger an event when clicking an individual cell. For example, creating a Google query in a new tab with the cell's value as the search query.

In this configuration, there are two ways to open the submission on click:

- Clicking the submission ID value itself in the submission ID column of the grid.
- Clicking a button in the same row as the submission ID.

In practice, you likely do not need both options, but the goal is to explore both approaches.

## Configure the Plug-In Component

To begin, let's retrieve some sample data that the Dynamic Grid component can display. This [Plug-In](/v1/docs/plug-in-component) component uses the **Get Rows from Reference Data** API call to import a simple three-row Data Collection.

![Table displaying unique IDs and corresponding submission IDs for data entries.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_logic_datacollection.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

1. In the Module Builder, drag and drop a **Plug-In** **component** onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginLoadData`.
3. From the **Internal Services** drop-down, select **Get Rows from Reference Data.**
4. From the **Data Collection** drop-down, select **dynamicGridSubmissionDemo.**

> [!NOTE]
> The `dynamicGridSubmissionDemo` value represents the title of the Data Collection used in this example.
5. From the **Post Trigger** drop-down, select **dwfLoadData**.

> [!NOTE]
> The `dwfLoadData` value is the Property ID of the [Data Workflow](/v1/docs/data-workflow-component) component you'll add later.

![Configuration settings for Unqork plugin data collection and triggers displayed on screen.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(864).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save Component**.

## Configure the Button Component

Next, you'll use a [Button](/v1/docs/how-to-guide-button-component) component to trigger the `pluginLoadData` **Plug-In** component and load the Data Collection.

1. Drag and drop a **Button** component onto your canvas, placing it below the `pluginLoadData` **Plug-In** component.
2. In the **Property ID** field, enter `btnLoadData`.
3. In the **Label Text** field, enter `Load Data`.
4. From the **Action Type** drop-down, select **Event.**
5. From the **On Click** drop-down, select **pluginLoadData**.
6. Click **Save Component**.

## Configure the Dynamic Grid Component

Next, set up the [Dynamic Grid](/v1/docs/dynamic-grid-component) component with a two-column layout. One column to display the clickable submission IDs and another with buttons that open the submission in a new tab.

1. Drag and drop a **Dynamic Grid** component onto your canvas, placing it below the `btnLoadData` **Button** component.
2. In the **Property ID** field, enter `dynamicGrid`.
3. In the **Label Text** field, enter `Review Submissions`.
4. In the **Column Setup** table, click **Add New Column** twice. Doing so adds two rows to the Column Setup table.
5. Complete the **Column Setup** table as follows:

| Order | Header Label | Property ID | Column Type |
| --- | --- | --- | --- |
| 0 | Submission ID | submissionId | Text Field |
| 1 | View Submission | btnView | Button |

> [!NOTE]
> The Property ID of of the Submission ID column in the Column Setup table matches the header of the submission ID column in the Data Collection. These two values must match for the data to load in the Dynamic Grid component.

> [!TIP]
> To change the column type, select the row-specific cell under the Column Type header. From the drop-down, select a column type.

![Dynamic grid interface displaying fields for submissions and property ID entry.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(865).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Configure the Text Field Column Type

Next, let's set up the **Submission ID** column so that clicking a submission ID opens it in a new tab. You'll set up the [Decisions](/v1/docs/decisions-component) component later, which will perform this action. So, you’ll reference that component’s Property ID, `ruleOpenId`, here.

1. In the **Submission ID** row of your **Column Setup** table, under the **Actions** column, click **Column Settings**.
2. Under **Actions**, click **Add Trigger**.
3. From the **When...** drop-down, select **Value is Clicked.**
4. In the **Then...** field, enter `ruleOpenId`.

### Configure the Button Column Type

Now, set up a similar trigger for the **Button** column. Instead of clicking the submission ID value, the end-user clicks the **View Submission** button for that row. Clicking the button also triggers the `ruleOpenId` **Decisions** component.

1. In the **View Submission** row of your Column Setup table, under the **Actions** Column, click the **Column Settings** button.
2. Under **Actions**, click **Add Trigger**.
3. From the **Then...** drop-down, select **Custom Action.**
4. In the **Custom Action** field, enter `ruleOpenId`.
5. Click **Save Component**.

## Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the concatenated URL that the [Decisions](/v1/docs/decisions-component) component creates. You'll reference the Hidden component's Property ID when configuring the Decisions component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dynamicGrid` **Dynamic Grid** component.
2. In the **Property ID** and **Label Text** fields, enter `hiddenUrl`.
3. Click **Save Component**.

## Configure the Decisions Component

This [Decisions](/v1/docs/how-to-guide-decisions-component) component generates and opens the URL of the selected submission in a new tab. There are two things to note about how this Decisions component works:

- The Property ID value of the **Inputs** table uses the Dynamic Index feature instead of specifying a row. By using Dynamic Index, the row index value dynamically populates based on which row the end-user clicks.
- The concatenated URL has a hard-coded module ID because the submission IDs all come from the same module. So, only the submission ID needs to be dynamically populated in the URL.

1. Drag and drop a **Decisions** component onto your canvas, placing it below the `hiddenUrl` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleOpenId`.
3. In the **Inputs** table, enter the following:

| # | Property ID | Alias | Type |
| --- | --- | --- | --- |
| 1 | dynamicGrid.row(#).col(submissionId) | submissionId | exact |
4. In the **Outputs** table, enter the following:

| # | Property ID | Type |
| --- | --- | --- |
| 1 | hiddenUrl | pageOpen |
5. In the **Conditionals** table, enter the following:

| # | dynamicGrid.row(#).col(submissionId) | hiddenUrl_pageOpen |
| --- | --- | --- |
| 1 |  | =concatenate('/#/display/613644f0b495e6014304c0f9/', submissionId , '/613644f0b495e6014304c0f9') |

![Decision-making interface showing inputs, outputs, and conditions for a dynamic grid.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(896).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save Component**.

## Configure the Data Workflow Component

Once the [Plug-In](/v1/docs/plug-in-component) component retrieves the data from the Data Collection, it must output to the Dynamic Grid component. So, you'll use a [Data Workflow](/v1/docs/data-workflow-component) component to move the data from one component to another.

1. Drag and drop a **Data Workflow** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfLoadData`.

### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | pluginLoadData |
| Required | Yes |
| Source | Default |

### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | dynamicGrid |
| Action | Value |
3. Connect the output port (right) of the `pluginLoadData` **Input** operator to the input port (left) of the `pluginLoadData` **Output** operator.
4. Click **Save Component**.
5. **Save** your module.

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

![Interface displaying data loading options and submission review features for a plugin.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(866).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

Preview your module in Express View and click the **Load Data** button. Once the submission IDs load, select a submission ID or click **View Submission**. A new tab opens, displaying the relevant submission.

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

**Classic Designer**

**Dynamic Index** is one of the most powerful features for using complex logic with a [Dynamic Grid](/v1/docs/dynamic-grid-component) component. In this how-to guide, you'll learn how to use logic and triggers alongside the Dynamic Index feature.

In this example, the Dynamic Grid component displays several rows of submission IDs. You'll import these submission IDs from a Data Collection, then inject them into your grid using logic components. You'll configure triggers and logic so that whenever a row's submission ID is selected, that submission opens in a new tab. This functionality is useful if you're using your Dynamic Grid component to review submissions. But you can also extend this type of logic to other situations where you want to trigger an event when clicking an individual cell. For example, creating a Google query in a new tab with the cell's value as the search query.

In this configuration, there are two ways to open the submission on click:

- Clicking the submission ID value itself in the submission ID column of the grid.
- Clicking a button in the same row as the submission ID.

In practice, you likely do not need both options, but the goal is to explore both approaches.

## Configure the Plug-In Component

To begin, let's retrieve some sample data that the Dynamic Grid component can display. This [Plug-In](/v1/docs/plug-in-component) component uses the **Get Rows from Reference Data** API call to import a simple three-row Data Collection.

![Table displaying unique IDs and corresponding submission IDs for data entries.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_logic_datacollection.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

1. In the Module Builder, drag and drop a **Plug-In** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginLoadData`.
3. From the **Internal Services** drop-down, select **Get Rows from Reference Data.**
4. From the **Data Collection** drop-down, select **dynamicGridSubmissionDemo.**

> [!NOTE]
> The `dynamicGridSubmissionDemo` value represents the title of the Data Collection used in this example.
5. In the **Post Trigger** field, enter `dwfLoadData`.

> [!NOTE]
> The `dwfLoadData` value is the Property ID of the [Data Workflow](/v1/docs/data-workflow-component) component you'll add later.

![Settings page for a plugin with various configuration options and data collection settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicGrid_logic_plugin.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save**.

## Configure the Button Component

Next, you'll use a [Button](/v1/docs/how-to-guide-button-component) component to trigger the `pluginLoadData` **Plug-In** component and load the Data Collection.

1. Drag and drop a **Button** component onto your canvas, placing it below the `pluginLoadData` **Plug-In** component.
2. In the **Property ID** field, enter `btnLoadData`.
3. In the **Label Text** field, enter `Load Data`.
4. Set the **Action Type** as **Event.**
5. From the **On Click** drop-down, select **pluginLoadData**.
6. Click **Save**.

## Configure the Dynamic Grid Component

Next, set up the [Dynamic Grid](/v1/docs/dynamic-grid-component) component with a two-column layout. One column to display the clickable submission IDs and another with buttons that open the submission in a new tab.

1. Drag and drop a **Dynamic Grid** component onto your canvas, placing it below the `btnLoadData` **Button** component.
2. In the **Property ID** field, enter `dynamicGrid`.
3. In the **Title** field, enter `Review Submissions`.
4. In the **Column Setup** table, click **+ Add New Column** twice. Doing so adds two rows to the Column Setup table.
5. Complete the **Column Setup** table as follows:

| Header Label | Property ID | Column Type |
| --- | --- | --- |
| Submission ID | submissionId | Text Field |
| View Submission | btnView | Button |

![Settings for a dynamic grid including title, height, and column setup options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(868).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

> [!NOTE]
> The Property ID of the Submission ID column in the Column Setup table matches the header of the submission ID column in the Data Collection. These two values must match for the data to load in the Dynamic Grid component.

> [!TIP]
> To change the column type, select the row-specific cell under the Column Type header. From the drop-down, select a column type.

### Configure the Text Field Column Type

Next, let's set up the **Submission ID** column so that clicking a submission ID opens it in a new tab. You'll set up the [Decisions](/v1/docs/decisions-component) component later, which will perform this action. So, you’ll reference that component’s Property ID, `ruleOpenId`, here.

1. In the **Submission ID** row of your **Column Setup** table, under the **Actions** column, click **Column Settings**.
2. Under **Actions**, click + **Add Trigger**.
3. From the **When...** drop-down, select **Value is Clicked.**
4. In the **Then...** field, enter `ruleOpenId`.

### Configure the Button Column Type

Now, set up a similar trigger for the **Button** column. Instead of clicking the submission ID value, the end-user clicks the **View Submission** button for that row. Clicking the button also triggers the `ruleOpenId` **Decisions** component.

1. In the **View Submission** row of your **Column Setup** table, under the **Actions** column, click the **Column Settings** button.
2. Under **Actions**, click + **Add Trigger**.
3. From the **Then...** drop-down, select **Custom Action.**
4. In the **Custom Action** field, enter `ruleOpenId`.
5. Click **Save**.

## Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the concatenated URL that the [Decisions](/v1/docs/decisions-component) component creates. You'll reference the Hidden component's Property ID when configuring the Decisions component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dynamicGrid` **Dynamic Grid** component.
2. In the **Property ID** and **Canvas** **Label Text** fields, enter `hiddenUrl`.
3. Click **Save & Close**.

## Configure the Decisions Component

This [Decisions](/v1/docs/how-to-guide-decisions-component) component generates and opens the URL of the selected submission in a new tab. There are two things to note about how this Decisions component works:

- The Property ID value of the **Inputs** table uses the Dynamic Index feature instead of specifying a row. By using Dynamic Index, the row index value dynamically populates based on which row the end-user clicks.
- The concatenated URL has a hard-coded module ID because the submission IDs all come from the same module. So, only the submission ID needs to be dynamically populated in the URL.

1. Drag and drop a **Decisions** component onto your canvas, placing it below the `hiddenUrl` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleOpenId`.
3. In the **Inputs** table, enter the following:

| Property ID | Alias | Type |
| --- | --- | --- |
| dynamicGrid.row(#).col(submissionId) | submissionId | exact |
4. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| hiddenUrl | pageOpen |
5. In the **Micro Decisions** table, enter the following:

| dynamicGrid.row(#).col(submissionId) | hiddenUrl_pageOpen |
| --- | --- |
|  | =concatenate('/#/display/613644f0b495e6014304c0f9/', submissionId , '/613644f0b495e6014304c0f9') |

![Settings panel displaying property IDs, types, and execution options for decision-making.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(898).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save.**

## Configure the Data Workflow Component

Once the [Plug-In](/v1/docs/plug-in-component) component retrieves the data from the Data Collection, it must output to the Dynamic Grid component. So, you'll use a [Data Workflow](/v1/docs/data-workflow-component) component to move the data from one component to another.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `ruleOpenId` **Decisions** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfLoadData`.

### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | pluginLoadData |
| Required | Yes |
| Source | Default |

### Configure the Output Operator

1. Drag and drop an **Output** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | dynamicGrid |
| Action | Value |
3. Connect the output port (right) of the `pluginLoadData` **Input** operator to the input port (left) of the `pluginLoadData` **Output** operator.
4. Click **Save**.
5. **Save** your module.

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

![Interface displaying data loading options and submission review features for a plugin.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(897).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

Preview your module in Express View and click the **Load Data** button. Once the submission IDs load, select a submission ID or click the **View Submission** button. A new tab opens, displaying the relevant submission.

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

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

A Data Collection is any static data referenced by your application.

A query lets you retrieve, access, manipulate, and delete data in a database.

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 Property ID is the unique field ID used by Unqork to track and link components in your module.

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

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.