How to: Use Logic With Dynamic Index

Dynamic Index is one of the most powerful features for using complex logic with a Dynamic Grid 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 component uses the Get Rows from Reference Data API call to import a simple three-row Data Collection.

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.

   The dynamicGridSubmissionDemo value represents the title of the Data Collection used in this example.

5. From the Post Trigger drop-down, select dwfLoadData.

   The dwfLoadData value is the Property ID of the Data Workflow component you'll add later.

   

6. Click Save Component.

Configure the Button Component

Next, you'll use a Button 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 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

   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.

   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 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 component stores the concatenated URL that the Decisions 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 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')

   

6. Click Save Component.

Configure the Data Workflow Component

Once the Plug-In component retrieves the data from the Data Collection, it must output to the Dynamic Grid component. So, you'll use a Data Workflow 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:

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.