How to: Add Key/Value Pairs to Specific Rows in a Table

The Set operator lets you add key/value pairs to specific rows in an existing data table.

Configuration

In this how-to guide, you'll begin by creating a Data Table component to create a three-row table so you can add values. Then, you'll use Set operators to add a unique key/value pair to each row.

Configure the Data Table Component

Let's create the Data table component where you'll add your new key/value pairs.

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

2. In the Property ID field, enter dtTable.

3. In the data table, enter the following:

   name	age
   Cammy	32
   Josephine	41
   Ammie	22

   

4. Click Save Component.

Configure the Data Workflow Component

With the Data Table component set up, you’ll set up a Data Workflow with Set operators to add new key/value pairs to each row.

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

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

Configure the Input Operator

Let's begin by connecting your Data Table component to the Data Workflow using an 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	dtTable
   Required	Yes
   Source	Default

Configure the Set Operators

For each of these operators, you'll add a key/value pair to a row of the table. The Path setting specifies the table row where you add each value. You must also define the key in the Path setting. For example, [0].occupation adds an occupation key in the [0] index position. Next, use the Value setting to define the added value.

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].occupation
   Value	mathematician

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

   Setting	Value
   Category	Set
   Label	Set Index 1
   Path	[1].occupation
   Value	physicist

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

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

5. Connect the output port (right) of the Input 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

Connect a Console operator to each of the Set operators. That way, you can view how each Set operator processes the data.

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

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.

   You'll notice that the Set Index 2 Set operator only outputs to Index 2/Final Table Console operator. When creating applications, you might want to use a dedicated Output operator. By connecting it to a Hidden component, you can store the final table and reference it throughout your application.

Configure the Button Component

Lastly, create a button you can click in Express View 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 btnRunDWF.

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

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

5. From the On Click drop-down, enter or 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 look at the data in the DevTools Console.