How to: Create Rows in a Table Using the Set Operator

The Set operator lets you add rows to an empty data table.

Configuration

In this how-to guide, you'll use a Create Table operator to create an empty table instead of using a Data Table component. Then, you can use Set operators to add rows to your empty table.

Configure the Data Workflow Component

First, create the empty table in a Data Workflow. This table contains three rows as a three-object array.

1. In the Module Builder, drag and drop a Data Workflow component onto your canvas.

2. In the Property ID and Canvas Label Text fields, enter dwfSet.

Configure the Create Table Operator

1. Drag and drop a Create Table operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Create Table
   Label	Empty Table
   Create Index	No
   Number of Rows	3

Create an empty table (array) and set Number of Rows to 3 to produce [{ }, { }, { }]. Ensure Create Index is set to No, otherwise each row will include key/value pairs, like "index":0, "index":1, and so on.

Configure the Set Operators

1. Drag and drop three Set operators onto your Data Workflow canvas.

2. Configure the first Set operator's Info window as follows:

   Setting	Value
   Category	Set
   Label	Set Index 0
   Path	[0].name
   Value	John

3. Configure the second Set operator's Info window as follows:

   Setting	Value
   Category	Set
   Label	Set Index 1
   Path	[1].age
   Value	67

4. Configure the third Set operator's Info window as follows:

   Setting	Value
   Category	Set
   Label	Set Index 2
   Path	[2].occupation
   Value	Engineer

   The three Set operators populate the empty rows (objects) in your table. Use the Path setting to specify the row and key. For example, [0].name adds a "name" key in the [0] index position. Then, set the corresponding value in the Value field.

5. Connect the output port (right) of the Create Table operator to the input port (left) of the Set Index 0 Set operator.

6. Connect the output port (right) of the Set Index 0 Set operator to the input port (left) of the Set Index 1 Set operator.

7. Connect the output port (right) of the Set Index 1 Set operator to the input port (left) of the Set Index 2 Set operator.

Configure the Console Operators

Next, add three Console operators to view the process. Connect a Console operator to each of the Set operator's output ports. That way, you can see how each Set operator works.

1. Drag and drop three Console operators onto your Data Workflow canvas.

2. Configure the first Console operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Index 0

3. Configure the second Console operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Index 1

4. Configure the third Console operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Index 2 / Final Table

   In an actual application, use an Output operator connected to a Hidden component to store the final table and reference it elsewhere in your application.

5. Connect the output port (right) of the Set Index 0 Set operator to the input port (left) of the Index 0 Console operator.

6. Connect the output port (right) of the Set Index 1 Set operator to the input port (left) of the Index 1 Console operator.

7. Connect the output port (right) of the Set Index 2 Set operator to the input port (left) of the Index 2 / Final Table Console operator.

   

8. Click Save Component.

Configure the Button Component

Lastly, add a Button component to trigger your Data Workflow.

1. Drag and drop a Button component onto your canvas, placing it below the Data Workflow component.

2. In the Property ID field, enter btnRunDWFSet.

3. In the Label Text field, enter Run DWF Set.

4. From the Action Type drop-down, select Event.

5. rom the On Click drop-down, select dwfSet.

   

6. Click Save Component.

7. Save your module.

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

Preview your module in Express View and open the DevTools Console. Click the Run DWF Set button and view the index value for all three Console outputs.