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

Estimated Reading Time:  11 minutes

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

NOTE  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: