---
title: "How to: Add a Tag to Each Row of an Array Using the Merge Operator"
slug: "how-to-use-merge-operator-to-add-a-tag-to-each-row-of-an-array"
description: "Learn to use the Merge operator to efficiently tag and manage order and shipping statuses in your data workflows with arrays and data tables."
updated: 2025-11-24T17:25:35Z
published: 2025-11-25T16:08:31Z
canonical: "docs.unqork.io/how-to-use-merge-operator-to-add-a-tag-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 a Tag to Each Row of an Array Using the Merge Operator

UDesignerClassic Designer

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](https://docs.unqork.io/docs/data-workflow-component) 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.

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

### Configure the Data Table Component

Begin by adding a [Data Table](/v1/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** field, enter `dtTags`.
3. In the data table, enter the following:

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(385).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Next, 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 your `dtTags` **Data Table** component.
2. In the **Property ID** and the **Label Text** fields, enter `preArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(386).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
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 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 | Formula |
| Label | Customer |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D) (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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(388).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%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, 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(389).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
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](https://docs.unqork.io/docs/text-field-component) 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`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(390).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(391).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
4. Click **Save Component**.

### Configure the Button Component

Now, configure a [Button](/v1/docs/button-component) 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**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(445).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
6. Click **Save Component**.
7. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(393).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(394).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)

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](https://docs.unqork.io/docs/data-workflow-component) 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.

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

### Configure the Data Table Component

Begin by adding 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 **Label** and **Property Name** fields, enter `dtTags`.
3. In the data table, enter the following:

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(397).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
4. Click **Save**.

### Configure the Hidden Component

Next, 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 your `dtTags` **Data Table** component.
2. In the **Property ID** and the **Canvas Label Text** fields, enter `preArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(398).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
3. Click **Save**.

### 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 **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 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 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 | Formula |
| Label | Customer |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D) (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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(399).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%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 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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(400).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
5. Click **Save & Close**.

## 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. Begin by configuring a [Text Field](https://docs.unqork.io/docs/text-field-component) 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`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(401).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
4. Click **Save & Close**.

### 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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(402).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
4. Click **Save**.

### Configure the Button Component

Now, configure a [Button](/v1/docs/button-component) 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. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfAddSameTagEveryRow**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(403).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)
6. Click **Save & Close**.
7. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(404).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(394).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A23Z&se=2026-11-08T11%3A18%3A23Z&sr=c&sp=r&sig=dEl2tXQdK7N3lq6Q45KoxMvsfvrn0goz0txhQ%2FL2kus%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.

Elements are are what you use to build Unqork applications. Elements include modules, workflows, Data Collections, Data Schema, and Record Collections.

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.

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

The location of an element in an array.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others.

Deteremines how the component triggers.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

The action performed by the button when selected.

DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.

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.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

## Related

- [Data Workflow Component](/data-workflow-component.md)
- [Data Workflow: Operator Library](/how-to-guide-data-workflow-operator-library.md)
- [Introduction to Data Workflow](/introduction-to-data-workflow.md)