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

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 add this tag, you need to create an array. For example, when a customer places an order for a product, it’s important to display the current status of that order clearly. The array you create stores the order's basic information, like cost (in US dollars) and the name of the customer who bought it. This basic information can be organized and stored in a data table, which is then processed through a Data Workflow to ensure that everything is handled efficiently.

If you want to add order and shipping status information for the product as tags, the tags would be Order Status, Shipping Status, Pending, and Complete. Using a second Data Workflow, a Merge operator can combine the tags into the rows in your data table. This process not only organizes the data but also makes it easier to track and manage the status of each order effectively.

Configuration

In this how-to guide, you’ll create a Data Workflow to index basic product information. Then, you’ll create a second Data Workflow with a Merge operator to combine order and shipping information tags in a data table.

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

Configure the Data Table Component

Begin by adding a Data Table component to store your sample array.

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

2. In the Property ID field, enter dtTags.

3. In the data table, enter the following:

   order	shipping
   Order Status	Shipping Status

   

4. Click Save Component.

Configure the Hidden Component

Next, store your sample array in a Hidden component.

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

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

   

3. Click Save Component.

Configure the First Data Workflow Component

Now, configure a Data Workflow that creates your sample array and outputs it to the preArray Hidden component. The Data Workflow then combines your data with your end-user's name and product pricing.

1. Drag and drop a Data Workflow component onto your canvas, placing it above your preArray Hidden component.

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

Configure the 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	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 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 dtTags 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 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 dtTags 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 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 operator’s Info window as follows:

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

3. Connect the output port (right) of the Rows 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 operator’s Info window as follows:

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

3. Connect the output port (right) of the Rows 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 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 preArray Append operator.

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

Configure the Create Field Operator

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

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

   Setting	Value
   Category	Formula
   Label	Customer
   Do Not Sanitize Formula	(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 preArray Append operator to the input port (left) of the Customer Create Field operator.

Configure the Output Operator

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

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

   Setting	Value
   Category	Output
   Component	preArray
   Action	value

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

   

4. Click Save Component.

Configure the Initializer Component

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

1. Drag and drop an Initializer component onto your canvas, placing it above your dtTags Data Table component.

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

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   dwfCreateSampleArray	trigger	GO

   

5. Click Save Component.

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. Begin by configuring a Text Field component so that your end-user can enter a tag into the array.

1. Drag and drop a Text Field component onto your canvas, placing it below the preArray Hidden component.

2. In the Property ID field, enter tagStatus.

3. In the Label Text field, enter Status.

   

4. Click Save Component.

Configure the Second Data Workflow Component

The second Data Workflow lets the end-user create a tag. The Data Workflow merges that single tag into both rows of your data table. So, one tag populates the customer's order and shipping statuses. In this example, you’ll merge using the Merge operator’s Inner and leave the Merge Key empty. Leaving out a Merge Key combines your sample array, data table, and the tag values.

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

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

Configure the First 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	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 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 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 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 tag Create Table operator to the upper input port (left) of the createTag Set operator.

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

Configure the Merge Operator

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

2. Configure the 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 mergeTag Merge operator.

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

Configure the First Console Operator

Lastly, add two Console operators to view the progress of 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 operator’s Info window as follows:

   Setting	Value
   Category	Console
   Label	createTagArray

3. Connect the output port (right) of the createTag 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 operator’s Info window as follows:

   Setting	Value
   Category	Console
   Label	merge

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

   

4. Click Save Component.

Configure the Button Component

Now, configure a Button component to trigger your Data Workflow.

1. Drag and drop a Button component onto your canvas, placing it 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. From the Action Type drop-down, select Event.

5. In the On Click drop-down, select dwfAddSameTagEveryRow.

   

6. Click Save Component.

7. Save your module.

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

Preview your module in Express View and open the  DevTools Console. In the Status field, enter Complete and click the Add Status Tag to Every Row button. In the image below, you can see the tags added to each array.