---
title: "How to: Add Different Tags to Each Row of an Array"
slug: "merge-operator-adding-different-tags-to-each-row-of-an-array"
updated: 2025-12-23T15:49:18Z
published: 2025-12-23T15:49:18Z
canonical: "docs.unqork.io/merge-operator-adding-different-tags-to-each-row-of-an-array"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Add Different Tags to Each Row of an Array

UDesignerClassic Designer

The **Merge operator** can be used to add two different tags to an array. An array is a data structure that groups elements like values, objects, or other arrays. Each element in an array is indexed by an integer, starting with **[0]** for the first element, **[1]** for the second, and so on. These indices give each element a specific position and make it easier to reference values.

## Preconfiguration

Before adding tags, you must create a sample array. For example, if a customer orders a product, and you want to display the order’s status, the array should store the order’s basic information. This information could be the cost (in US dollars) and the customer’s name. This basic information can be stored in a [Data Table](/v1/docs/data-table-component) component and processed by a [Data Workflow](/v1/docs/data-workflow-component).

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Data Table Component

First, use a [Data Table](https://docs.unqork.io/docs/data-table-component) 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** and **Canvas** **Label Text** fields, enter `dtTags`.
3. In the data table, enter the following:

| order | shipping |
| --- | --- |
| Order Status | Shipping Status |

![A static image displaying the configuration of the dtTags Data Table configuration in UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Merge%20op_Data%20Table_dtTags.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Now, store your sample array in a [Hidden](https://docs.unqork.io/docs/hidden-component) component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dtTags` **Data Table** component.
2. In the **Property ID** and **Label Text** fields, enter `preArray`.
3. Click **Save Component**.

### Configure the First Data Workflow Component

This [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) 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, placing it above the `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 a **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 another **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 the `preArray` **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 | Create Field |
| Label | customer |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Unchecked-box-old(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) (unchecked) |
| Preserve Argument type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Unchecked-box-old(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) (unchecked) |
| 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.

![A static image displaying the configuration of the dwfCreateSampleArray Data Workflow component in UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Merge%20op_DWF_dwfCreateSampleArray.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save Component**.

### Configure the Initializer Component

Now, configure an [Initializer](https://docs.unqork.io/docs/initializer-component) component to trigger your Data Workflow.

1. Drag and drop an **Initializer** component onto your canvas. Place it above the `dtTags` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initCreateArray`.
3. Select **Trigger Type** as **New Submission**.
4. In the **Outputs** table, set the following:

| Property ID | Type | Value |
| --- | --- | --- |
| dwfCreateSampleArray | trigger | GO |

![A static image displaying the configuration of the initCreateArray Initializer component in UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Merge%20op_Initializer_initCreateArray.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
5. Click **Save Component**.

## Configuration

Next, you’ll add order and shipping status information as tags. In this example, the tags include `Order Status`, `Shipping Status`, `Pending`, `Processing`, and `Complete`. A second Data Workflow, with a [Merge](/v1/docs/merge-operator) operator, creates and combines these tags into the two rows of the data table.

### Configure Two Text Field Components

Next, configure two [Text Field](https://docs.unqork.io/docs/text-field-component) components so your end-user can enter `order` and `shipping` tags into the array.

1. Drag and drop two **Text Field** components onto your canvas, placing them below the `preArray` **Hidden** component.
2. Enter the **Property ID** and **Label Text** as follows:

| Property ID | Label Text |
| --- | --- |
| tagOrder | Order Status |
| tagShipping | Shipping Status |
3. Click **Save Component**.

### Configure the Second Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) lets your end-user create any tags they choose by entering them in the `tagOrder` and `tagShipping` **Text Field** components. The Data Workflow merges those tags into the two rows of the `dtTags` **Data Table** component. Meaning that one tag populates with the customer's order status and the other with the shipping status. In this example, you’ll use the [Merge](/v1/docs/merge-operator) operator’s Inner feature and set `index` as the **Merge Key**.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `tagShipping` **Text Field** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfAddDiffTagEveryRow`.

#### 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 | tagOrder |
| 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 | tagShipping |
| Required | Yes |
| Source | Default |

#### Configure the Third 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 | tags |
| Create Index | No |
| Number of Rows | 0 |

#### 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 | createTagOrder |
| Path | [0].tags[0] |
| Value |  |
3. Connect the output port (right) of the `tags` **Create Table** operator to the upper input port (left) of the `createTagOrder` **Set** operator.
4. Connect the output port (right) of the `tagOrder` **Input** operator to the lower input port (left) of the `createTagOrder` **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 | createTagShipping |
| Path | [0].tags[0] |
| Value |  |
3. Connect the output port (right) of the `createTagOrder` **Set** operator to the upper input port (left) of the `createTagShipping` **Set** operator.
4. Connect the output port (right) of the `tagShipping` **Input** operator to the lower input port (left) of the `createTagShipping` **Set** operator.

#### Configure the First Create Index Operator

1. Drag and drop a **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label | indexMergeTags |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the `createTagShipping` **Set** operator to the input port (left) of the `indexMergeTags` **Create Index** operator.

#### Configure the Second Create Index Operator

1. Drag and drop another **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label | indexMergePreArray |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the `preArray` **Input** operator to the input port (left) of the `indexMergePreArray` **Create Index** 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 | mergeTags |
| Merge Type | Inner |
| Keep Flag | False |
| Renaming | Push |
| Rows to Keep | First |
| Merge Key | index |
3. Connect the output port (right) of the `indexMergePreArray` **Create Index** operator to the upper input port (left) of the `mergeTags` **Merge** operator.
4. Connect the output port (right) of the `indexMergeTags` **Create Index** operator to the lower input port (left) of the `mergeTags` **Merge** operator.

#### Configure the First Console Operator

Lastly, add two [Console](/v1/docs/console-operator) operators to watch your Data Workflow. The first monitors the tags before the `mergeTags` **Merge** operator. The second monitors the tags after the `mergeTags` **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 | createDifferentTagsArray |
3. Connect the output port (right) of the `createTagShipping` **Set** operator to the input port (left) of the `createDifferentTagsArray` **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 | mergeDifferentTags |
3. Connect the output port (right) of the `mergeTags` **Merge** operator to the input port (left) of the `mergeDifferentTags` **Console** operator.

![A static image displaying the configuration of the dwfAddDiffTagEveryRow Data Workflow component in UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Merge%20op_DWF_dtAddDiffTagEveryRow.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save Component**.

### Configure the Button Component

Lastly, configure a [Button](https://docs.unqork.io/docs/button-component) component to trigger your second Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it above your `dwfAddDiffTagEveryRow` **Data Workflow** component.
2. In the **Property ID** field, enter `btnAddTagDiff`.
3. In the **Label Text** field, enter `Add Order Tag to Row 0 & Shipping Tag to Row 1`.
4. From the **Action Type**, select **Event**.
5. From the **On Click** field, select **dwfAddDiffTagEveryRow**.

![A static image displaying the configuration of the btnAddTagDiff Button component in UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Merge%20op_Button_btnAddTagDiff.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
6. Click **Save Component.**
7. **Save** your module.

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

![A static image displaying the configuration of the module in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)

Preview your module in Express View and open the DevTools Console. In the **Order Status** field, enter `Complete`. In the **Shipping Status** field, enter `Processing`. Click the **Add Order Tag to Row 0 & Shipping Tag to Row 1** button to see the result:

![A static image displaying the Express View and DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1766150004762.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)

The **Merge operator** can be used to add two different tags to an array. An array is a data structure that groups elements like values, objects, or other arrays. Each element in an array is indexed by an integer, starting with **[0]** for the first element, **[1]** for the second, and so on. These indices give each element a specific position and make it easier to reference values.

## Preconfiguration

Before adding tags, you must create a sample array. For example, if a customer orders a product, and you want to display the order’s status, the array should store the order’s basic information. This information could be the cost (in US dollars) and the customer’s name. This basic information can be stored in a [Data Table](/v1/docs/data-table-component) component and processed by a [Data Workflow](/v1/docs/data-workflow-component).

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Data Table Component

First, use a [Data Table](https://docs.unqork.io/docs/data-table-component) 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** and **Canvas** **Label Text** fields, enter `dtTags`.
3. In the data table, enter the following:

| order | shipping |
| --- | --- |
| Order Status | Shipping Status |

![A static image displaying the configuration of the dtTags Data Table component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_Data%20Table_dtTags.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save & Close**.

### Configure the Hidden Component

Now, store your sample array in a [Hidden](https://docs.unqork.io/docs/hidden-component) component.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dtTags` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `preArray`.
3. Click **Save & Close**.

### Configure the First Data Workflow Component

This [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) 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, placing it above the `preArray` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name** 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 a **Col2Array** operator onto your Data Workflow canvas.
2. Configure the first **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 `dtTags` **Input** operator to the input port (left) of the `Order` **Col2Array** operator.

#### Configure the Second Col2Array Operator

1. Drag and drop another **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 `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 the `preArray` **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 | Create Field |
| Label | customer |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Unchecked-box-old(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) (unchecked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Unchecked-box-old(1).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) (unchecked) |
| 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.

![A static image displaying the configuration of the dwfCreateSampleArray Data Workflow component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_DWF__dwfCreateSampleArray.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save**.

### Configure the Initializer Component

Now, configure an [Initializer](https://docs.unqork.io/docs/initializer-component) component to trigger your Data Workflow.

1. Drag and drop an **Initializer** component onto your canvas, placing it above the `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, set the following:

| Property ID | Type | Value |
| --- | --- | --- |
| dwfCreateSampleArray | trigger | GO |

![A static image displaying the configuration of the initCreateArray Initializer component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_Initializer_initCreateArray.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
5. Click **Save & Close**.

## Configuration

Next, you’ll add order and shipping status information as tags. In this example, the tags include `Order Status`, `Shipping Status`, `Pending`, `Processing`, and `Complete`. A second Data Workflow, with a [Merge](/v1/docs/merge-operator) operator, creates and combines these tags into the two rows of the data table.

### Configure Two Text Field Components

Next, configure two [Text Field](https://docs.unqork.io/docs/text-field-component) components so your end-user can enter `order` and `shipping` tags into the array.

1. Drag and drop two **Text Field** components onto your canvas, placing them below the `preArray` **Hidden** component.
2. Enter the **Property ID** and **Label Text** as follows:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | tagOrder | Order Status |
| 2 | tagShipping | Shipping Status |
3. Click **Save & Close**.

### Configure the Second Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) lets your end-user create any tags they choose by entering them in the `tagOrder` and `tagShipping` **Text Field** components. The Data Workflow merges those tags into the two rows of the `dtTags` **Data Table** component. Meaning that one tag populates with the customer's order status and the other with the shipping status. In this example, you’ll use the [Merge](/v1/docs/merge-operator) operator’s Inner feature and set `index` as the **Merge Key**.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `tagShipping` **Text Field** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfAddDiffTagEveryRow`.

#### 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 | tagOrder |
| 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 | tagShipping |
| Required | Yes |
| Source | Default |

#### Configure the Third 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 | tags |
| Create Index | No |
| Number of Rows | 0 |

#### 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 | createTagOrder |
| Path | [0].tags[0] |
| Value |  |
3. Connect the output port (right) of the `tags` **Create Table** operator to the upper input port (left) of the `createTagOrder` **Set** operator.
4. Connect the output port (right) of the `tagOrder` **Input** operator to the lower input port (left) of the `createTagOrder` **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 | createTagShipping |
| Path | [0].tags[0] |
| Value |  |
3. Connect the output port (right) of the `createTagOrder` **Set** operator to the upper input port (left) of the `createTagShipping` **Set** operator.
4. Connect the output port (right) of the `tagShipping` **Input** operator to the lower input port (left) of the `createTagShipping` **Set** operator.

#### Configure the First Create Index Operator

1. Drag and drop a **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label | indexMergeTags |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the `createTagShipping` **Set** operator to the input port (left) of the `indexMergeTags` **Create Index** operator.

#### Configure the Second Create Index Operator

1. Drag and drop another **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label | indexMergePreArray |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the `preArray` **Input** operator to the input port (left) of the `indexMergePreArray` **Create Index** 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 | mergeTags |
| Merge Type | Inner |
| Keep Flag | False |
| Renaming | Push |
| Rows to Keep | First |
| Merge Key | index |
3. Connect the output port (right) of the `indexMergePreArray` **Create Index** operator to the upper input port (left) of the `mergeTags` **Merge** operator.
4. Connect the output port (right) of the `indexMergeTags` **Create Index** operator to the lower input port (left) of the `mergeTags` **Merge** operator.

#### Configure the First Console Operator

Lastly, add two **Console** operators to watch your Data Workflow. The first monitors the tags before the `mergeTags` **Merge** operator. The second monitors the tags after the `mergeTags` **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 | createDifferentTagsArray |
3. Connect the output port (right) of the `createTagShipping` **Set** operator to the input port (left) of the `createDifferentTagsArray` **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 | mergeDifferentTags |
3. Connect the output port (right) of the `mergeTags` **Merge** operator to the input port (left) of the `mergeDifferentTags` **Console** operator.

![A static image displaying the configuration of the dwfAddDiffTagEveryRow Data Workflow component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_DWF_dwfAddDiffTagEveryRow.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
4. Click **Save**.

### Configure the Button Component

Lastly, configure a [Button](https://docs.unqork.io/docs/button-component) component to trigger your second Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it above your `dwfAddDiffTagEveryRow` **Data Workflow** component.
2. In the **Property ID** field, enter `btnAddTagDiff`.
3. In the **Label Text** field, enter `Add Order Tag to Row 0 & Shipping Tag to Row 1`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfAddDiffTagEveryRow**.

![A static image displaying the configuration of the btnAddTagDiff Button component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_Button_btnAddTagDiff.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)
6. Click **Save & Close.**
7. **Save** your module.

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

![A static image displaying the configuration of the module in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Merge%20op_module.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)

Preview your module in Express View and open the DevTools Console. In the **Order Status** field, enter `Complete`. In the **Shipping Status** field, enter `Processing`. Click the **Add Order Tag to Row 0 & Shipping Tag to Row 1** button to see the result:

![A static image displaying the Express View and DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1766150004762.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D)

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A data structure is the design used for organizing, using, and storing data.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

The DevTools Console helps you securely store, build, test, and deploy your software.