How to: Use Merge Operator to Add a Tag to Each Row of an Array

Overview

In this How-to Guide, you’ll use the Merge operator to add a tag to an array. An array is a data structure used to group elements. It can group values, objects, or even other arrays. Arrays index information by integer with the first index being [0], the second being [1], and so on. This index gives each element a specific position in the array. Indexes also make it easier to reference specific values.

Before you can add this tag, you need to create an array. Let's say a customer orders a product and you want to display the order's status. The array you create holds the order's basic information, like cost (in US dollars) and the name of the customer who bought it. This basic information stores in a Data Table and a Data Workflow processes it.

Now, you want to add order and shipping status information for the product as tags. For this example, the tags are Order Status, Shipping Status, Pending, and Complete. A second Data Workflow and its Merge operator create and combine the tag into the rows of your Data Table.

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

Here's how your completed module looks in Express View, including a peek at the DevTools Console:

What You'll Learn

In this article, you'll learn how to add the same tag to each row of an array.

What You Need

To set up this module, you need:

• 1 Data Table component

• 1 Hidden component

• 1 Text Field component

• 1 Initializer component

• 1 Button component

• 2 Data Workflow components

To set up the first Data Workflow, you need:

• 1 Input operator

• 2 Col2Array operators

• 1 Create Table operator

• 2 Set operators

• 1 Append operator

• 1 Create Field operator

• 1 Output operator

To set up the second Data Workflow, you need:

• 2 Input operators

• 1 Create Table operator

• 1 Set operator

• 1 Merge operator

• 2 Console operators

These instructions assume that you have an open module saved with a title.

Pre-Configuration

Configure the Data Table Component

First, use a Data Table to hold your sample array.

1. Drag and drop a Data Table component onto your canvas.

2. In the Label Text and Property Name fields, enter dtTags.

3. In the data table, enter the following:

   order	shipping
   Order Status	Shipping Status

   

4. Click Save.

Configure the Hidden Component

Now, store your sample array in a Hidden component.

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

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

3. Click Save.

Configure the First Data Workflow Component

This Data Workflow creates your sample array and outputs it to the preArray Hidden component. The Data Workflow then combines your Data Table with your end-user name and product pricing.

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

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

   

Configure the Input Operator

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

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

   Setting	Value
   Category	Input
   Component	dtTags
   Required	Yes
   Source	Default

Configure the First Col2Array Operator

1. Drag and drop the first Col2Array operator onto your Data Workflow canvas.

2. Configure the Col2Array operator’s Info window as follows:

   Setting	Value
   Category	Col2Array
   Label	Order
   Drop Empty	Yes
   Path	order
   Default Value

3. Connect the output port (right) of the Input operator to the input port (left) of the Order Col2Array operator.

Configure the Second Col2Array Operator

1. Drag and drop the second Col2Array operator onto your Data Workflow canvas.

2. Configure the Col2Array operator’s Info window as follows:

   Setting	Value
   Category	Col2Array
   Label	Shipping
   Drop Empty	Yes
   Path	shipping
   Default Value

3. Connect the output port (right) of the Input operator to the input port (left) of the Shipping Col2Array operator.

Configure the Create Table Operator

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

2. Configure the Create Table operator’s Info window as follows:

   Setting	Value
   Category	Create Table
   Label	Rows
   Create Index	No
   Number of Rows	1

Configure the First Set Operator

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

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

   Setting	Value
   Category	Set
   Label	Path1
   Path	[0].tags
   Value

3. Connect the output port (right) of the Create Table operator to the upper input port (left) of the Path1 Set operator.

4. Connect the output port (right) of the Order Col2Array operator to the lower input port (left) of the Path1 Set operator.

Configure the Second Set Operator

1. Drag and drop another Set operator onto your Data Workflow canvas.

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

   Setting	Value
   Category	Set
   Label	Path2
   Path	[0].tags
   Value

3. Connect the output port (right) of the Create Table operator to the upper input port (left) of the Path2 Set operator.

4. Connect the output port (right) of the Shipping Col2Array operator to the lower input port (left) of the Path2 Set operator.

Configure the Append Operator

1. Drag and drop an Append operator onto your Data Workflow canvas.

2. Configure the Append operator’s Info window as follows:

   Setting	Value
   Category	Append
   Label	preArray

3. Connect the output port (right) of the Path1 Set operator to the upper input port (left) of the Append operator.

4. Connect the output port (right) of the Path2 Set operator to the lower input port (left) of the Append operator.

Configure the Create Field Operator

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

2. Configure the Create Field operator’s Info window as follows:

   Setting	Value
   Category	Formula
   Label	Customer
   Do Not Sanitize Formula	Yes (checked)
   Field 1	firstName = "Willow"
   Field 2	lastName = "Kusko"
   Field 3	price = "$16.99"
   Field 4
   Field 5

3. Connect the output port (right) of the Append operator to the input port (left) of the Create Field operator.

Configure the Output Operator

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

2. Configure the Output operator’s Info window as follows:

   Setting	Value
   Category	Output
   Component	preArray
   Action	value

3. Connect the output port (right) of the Create Field operator to the input port (left) of the Output operator.

4. Click Save.

Configure the Initializer Component

Now, configure an Initializer component to trigger your Data Workflow.

1. Drag and drop an Initializer component onto your canvas. Place the Initializer component above your Data Table.

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

3. Select New Submission as the Trigger Type.

4. In the Outputs table, set the following:

   Property ID	Type	Value
   dwfCreateSampleArray	trigger	GO

   

5. Click Save.

Configuration

Configure the Text Field Component

Now that you have your sample array created, set up another Data Workflow to create a tag in that array. First, configure a Text Field component so your end-user can enter a tag into the array.

1. Drag and drop a Text Field component onto your canvas. Place the Text Field component below the Hidden component.

2. In the Property ID field, enter tagStatus.

3. In the Label Text field, enter Status.

4. Click Save.

Configure the Second Data Workflow Component

The second Data Workflow lets your end-user create any tag they choose. The Data Workflow merges that single tag into both rows of your Data Table. This means that 1 tag populates the customer's order and shipping statuses. In this example, do a merge using the Inner feature and leave the Merge Key empty. Leaving out a Merge Key combines all your sample array, Data Table, and the tag values together.

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

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

   

Configure the First Input Operator

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

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

   Setting	Value
   Category	Input
   Component	tagStatus
   Required	Yes
   Source	Default

Configure the Second Input Operator

1. Drag and drop another Input operator onto your Data Workflow canvas.

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

   Setting	Value
   Category	Input
   Component	preArray
   Required	Yes
   Source	Default

Configure the Create Table Operator

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

2. Configure the Create Table operator’s Info window as follows:

   Setting	Value
   Category	Create Table
   Label	tag
   Create Index	No
   Number of Rows	0

Configure the Set Operator

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

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

   Setting	Value
   Category	Set
   Label	createTag
   Path	[0].tags[0]
   Value

3. Connect the output port (right) of the Create Table operator to the upper input port (left) of the Set operator.

4. Connect the output port (right) of the tagStatus Input operator to the lower input port (left) of the Set operator.

Configure the Merge Operator

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

2. Configure the Merge operator’s Info window as follows:

   Setting	Value
   Category	Merge
   Label	mergeTag
   Merge Type	Inner
   Keep Flag	False
   Renaming	Push
   Rows to Keep	First
   Merge Key

3. Connect the output port (right) of the preArray Input operator to the upper input port (left) of the Merge operator.

4. Connect the output port (right) of the Set operator to the lower input port (left) of the Merge operator.

Configure the First Console Operator

Finally, add 2 Console operators to watch your Data Workflow. The first connects to the output of the Set operator. The second Console connects to the output of the Merge operator.

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

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

   Setting	Value
   Category	Console
   Label	createTagArray

3. Connect the output port (right) of the Set operator to the input port (left) of the createTagArray Console operator.

Configure the Second Console Operator

1. Drag and drop another Console operator onto your Data Workflow canvas.

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

   Setting	Value
   Category	Console
   Label	merge

3. Connect the output port (right) of the Merge operator to the input port (left) of the merge Console operator.

4. Click Save.

Configure the Button Component

Finally, create a button to fire your second Data Workflow.

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

2. In the Property ID field, enter btnAddTag.

3. In the Label Text field, enter Add Status Tag to Every Row.

4. Select Event as the Action Type.

5. In the Trigger on Click field, enter dwfAddSameTagEveryRow.

   

6. Click Save.

7. Save your module.

Now you're ready to test your configuration. Preview your module in Express View and open the DevTools Console. In the text field, enter Complete and click your button. The result looks like this: