Input Operator: Binded Tables

Overview

In some configurations, you'll need to use an Input operator to create a binded table. A binded table lets you use dynamic values in a Data Table. Say you have Text Fields in your module that you want to use to update a Data Table. You can use a binded table to do that.

As an example, let's set up a Data Table to hold the Name, Breed, and Color of various canine Unqorkers. Instead of populating that table, though, you'll use Text Fields inside your module to fill it. To do that, you'll link the Text Fields to your Data Table using a Data Workflow.

Here's how the completed use case looks in the Module Builder:

Here's how the completed use case works in Express View, including a peek at the DevTools Console:

What You'll Learn

In this article, you'll learn how to set up a binded table.

What You Need

To set up this use case, you need:

• 3 Text Field components

• 1 Data Table component

• 1 Hidden component

• 1 Button component

• 1 Data Workflow component

To set up your Data Workflow, you need:

• 1 Input operator

• 1 Output operator

These instructions assume you have a new module open, saved, and with a title.

Configuration

Configure the Text Field Components

First, you add 3 Text Field components. These fields are where you can enter information for each dog. Later, you can configure a Data Table to pull the information from these fields.

1.

Drag and drop 3 Text Field components onto your canvas.

2.

Enter the following Property IDs and Label Text:

3.

Save each component as you add it.

Configure the Data Table Component

Next, you add a Data Table to hold the data for each dog that you added in your Text Fields.

1.

Drag and drop a Data Table component onto your canvas. Place your Data Table below your Text Field components.

2.

Enter dtDogs in the Label and Property Name fields.

3.

In the Data Table, enter the following:

4.

Click Save.

Configure the Hidden Component

Before you can add your Data Workflow, you need a place to store its output. For that, you use a Hidden component.

1.

Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Data Table.

2.

Enter bindedTableOutput in the Property ID and Label Text fields.

3.

Click Save.

Configure the Data Workflow Component

Next, you set up the Data Workflow itself.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow component above your Hidden component.

2.

Enter dwfDogs in the Canvas Label Text and Property Name fields.

Configure the Input Data Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Output Data Operator

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the Input operator to the input port (left) of the Output operator.

4.

Click Save.

Configure the Button Component

Finally, to trigger the Data Workflow, add a Button component.

1.

Drag and drop a Button component onto your canvas. Place your Button component above your Data Workflow component.

2.

Enter btnTrigger in the Property ID field.

3.

Enter Trigger Data Workflow in the Label Text field.

4.

Select Event from the Action Type.

5.

Enter dwfDogs in the Trigger on Click field.

6.

Click Save.

7.

Save your module.

Now you can test out your Data Workflow. First, open your module in Express View and complete your end-user input fields. Then, click your button to trigger the Data Workflow. The Data Workflow assigns the values from your Text Field components to your Data Table. The Data Workflow then puts the resulting value in your Hidden component.

Lab

You can view this complete use case here: https://training.unqork.io/#/form/5f4d3166c2375b021e67cb3b/edit.