---
title: "Nested Array Operator"
slug: "nested-array-operator"
description: "Learn to use the Nested Array operator to dynamically add and update key/value pairs in nested tables, enhancing data organization and management."
updated: 2025-10-28T13:28:56Z
published: 2025-10-28T13:28:56Z
canonical: "docs.unqork.io/nested-array-operator"
---

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

# Nested Array Operator

UDesignerClassic Designer

###### ChatGPT said:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(161).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)Using the **Nested Array operator**, you can dynamically add key/value pairs to a nested array. It also allows you to add key/value pairs where the value is based on another field in the nested array, like creating a field with a value calculated from an existing one. You can also add key/value pairs with conditional values, selecting from two or more options based on an **if/then** expression. The operator also supports conditional updates to existing fields within a nested table.

If you know how to use the [Create Field](/v1/docs/create-field-operator) operator, you already know how to use the Nested Array operator. You can use both operators to add or update rows of a table. The difference between these two is that you'll use the Nested Array operator to make changes to a nested table, while you'll use a Create Field operator to make changes to a data table. You can think of a nested table as a table inside a table, which helps organize large amounts of table values.

You'll find the Nested Array operator under the [Table](/v1/docs/tableoperators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

Here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Do Not Sanitize Formula | When this checkbox is clear, the operator cleans values coming into or defined in the operator. For example, removing special characters. Some of those special characters include `'`, `$`, `#`, and `&amp`. The operator also cleans up complex values. For example, logically breaking up strings of numbers and letters using underscores. A sample module ID can go from `5f6b4cdfabf886024d4de2d3 to 5f_6b_4cdfabf_886024d_4de_2d_3`. Sanitizing improves performance. But it can also lead to unexpected data behavior. If your Create Field is not behaving as expected, try selecting this box. When selected, the operator uses your values and expressions as-is. This is best when working with complex values or values that should remain unchanged. By default, this setting is selected, which means the operator does not attempt to sanitize. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Table Path | This is the reference key of the data you want to nest. An example in a Data would be the heading of a column in a Data Table. |
| Field 1-4 | Notice how the Nested Array operator has 4 different Field options. This means you can add multiple fields using a single operator. Define the field you want to create or update, using the following format: **key=value**. For string values, add single or double quotes around the value. For example, `employed="yes"`. The value part of the **key=value** expression can also include calculations, conditional expressions, and references to other fields. It can also reference values coming into the argument port, using the alias `_arg`. For example, this expression that uses a calculation: `incomeMonthly=_arg/12`. The calculation happens on the input coming into the operator's argument port. Or this one, that includes a conditional expression, a reference to another field, and a calculation: `lowIncome=IF(incomeAnnual<24000,"yes","no")`. Conditional expressions should use the following format: `key=IF(condition,valueIfTrue,valueIfFalse)`. |

## Adding a Nested Array Operator

In this example, you'll use the Nested Array operator to update a single row of a nested table. You'll create a nested table by inputting two [Data Table](/v1/docs/data-table-component) components into a [Set](/v1/docs/set-operator) operator, and then output the new table into a second [Data Workflow](/v1/docs/data-workflow-component) component. In this second Data Workflow component, you'll use a Nested Array operator to update a patient's address information.

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

### Configure the First Data Table Component

First, you'll set up a [Data Table](/v1/docs/data-table-component) component with a customer's name and account information. Let's call this first Data Table component your "top level" data. The next Data Table component will be your nested table.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** field, enter `dtTopLevel`.
3. In the data table, enter the following:

| # | A | B | C | D |
| --- | --- | --- | --- | --- |
| 1 | accountNumber | firstName | lastName | accountValue |
| 2 | 12347 | Willow | Kusko | 54389 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(162).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
4. Click **Save Component**.

### Configure the Second Data Table Component

Now, you'll set up a nested Data Table component storing the customer's current address.

1. Drag and drop a **Data Table** component onto your canvas, placing it below your `dtTopLevel` **Data Table** component.
2. In the **Property ID** field, enter `dtNested`.
3. In the data table, enter the following:

| # | A | B | C | D |
| --- | --- | --- | --- | --- |
| 1 | address | city | state | zip |
| 2 | 100 Main Street | New York | NY | 10001 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(163).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
4. Click **Save Component.**

### Configure the First Hidden Component

In this [Hidden](/v1/docs/hidden-component) component, you'll store the output of your `dtTopLevel` **Data Table** component. The output references your combined tables.

1. Drag and drop a **H****idden** component onto your canvas, placing it below your `dtTopLevel` **Data Table** component and `dtNested` **Data Table** component.
2. In the **Property ID** and **Label Text** fields, enter `array`.
3. Click **Save Component.**

### Configure the First Data Workflow Component

You'll now set up a [Data Workflow](/v1/docs/data-workflow-component) component to input your Data Table components and nest them into an array. The simplest way to create this array is with a [Set](/v1/docs/set-operator) operator. You'll also configure this first Data Workflow to trigger your second Data Workflow.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below your `array` **H****idden** component.
2. In the **Property Name** and **Canvas Label Text** fields, enter `dwfSetArray`.

#### 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 | dtTopLevel |
| Required | No |
| 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 | dtNested |
| Required | No |
| Source | Default |

#### 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 | Set Nested Array |
| Path | [0].address |
| Value |  |
3. Connect the output port (right) of the `dtTopLevel` **Input** operator to the input port (left) of the `Set Nested Array` **Set** operator.
4. Connect the output port (right) of the `dtInline` **Input** operator to the input port (left) of the `Set Nested Array` **Set** operator.

#### Configure the First 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 | array |
| Action | value |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `array` **Output** operator.

#### Configure the Second Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | dwfNestedArray |
| Action | trigger |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `dwfNestedArray` **Output** operator.

#### Configure the 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 | Nested Array |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `Nested Array` **Console** operator.
4. Click **Save Component.**

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(166).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

### Configure the Button Component

To trigger the `dwfSetArray` **Data Workflow**, add a [Button](/v1/docs/button-component) component.

1. Drag and drop a **Button** component onto your canvas, placing it between your **D****ata Workflow** component.
2. In the **Property ID** field, enter `btnUpdateAddress`.
3. In the **Label Text** field, enter `Update Address`.
4. Set the **Action Type** to **Event.**
5. In the **On Click** field, enter `dwfSetArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(164).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
6. Click **Save Component.**

### Configure the Second Hidden Component

In the second Hidden component, you'll store the output of your second Data Workflow.

1. Drag and drop a **H****idden** component onto your canvas, placing it below your **Data Table** components.
2. In the **Property ID**s and **Canvas Label Text** fields, enter `arrayAfter`.
3. Click **Save Component.**

### Configure the Second Data Workflow Component

You'll now input your first Data Workflow into your second Data Workflow. Then, you'll use a Nested Array operator to update the address in your nested table.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below your `afterArray` **H****idden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfNestedArray`.

#### 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 | array |
| Required | No |
| Source | Default |

#### Configure the Nested Array Operator

1. Drag and drop a **Nested Array** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Nested Array |
| Label | address |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(4).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D) (checked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D) (unchecked) |
| Table Path | address |
| Field 1 | address="200 Wall Street" |
| Field 2 |  |
| Field 3 |  |
| Field 4 |  |
3. Connect the output port (right) of the `array` **Input** operator to the input port (left) of the `address` **Nested Array** 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 | arrayAfter |
| Action | value |
3. Connect the output port (right) of the `address` **Nested Array** operator to the input port (left) of the `arrayAfter` **Output** operator.

#### Configure the 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 | Change of Address |
3. Connect the output port (right) of the `address` **Nested Array** operator to the input port (left) of the `Change of Address` **Console** operator.
4. Click **Save Component**.
5. **Save** your module.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(171).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(165).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

> [!NOTE]
> This use case works behind the scenes, so you won't see anything in Express View. Instead, here's a look at the DevTools Console:

Preview your module in Express View, and open the DevTools Console. Click the **Update Address** button, and expand the data. When you expand the **address** data, you'll see that your customer's address was updated from `100 Main Street` to `200 Wall Street`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Nested_Array_09.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

###### ChatGPT said:

![A static image displaying the Nest Array operator and its Info window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_NestedArrayOperator_Info_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)Using the **Nested Array operator**, you can dynamically add key/value pairs to a nested array. It also allows you to add key/value pairs where the value is based on another field in the nested array, like creating a field with a value calculated from an existing one. You can also add key/value pairs with conditional values, selecting from two or more options based on an **if/then** expression. The operator also supports conditional updates to existing fields within a nested table.

If you know how to use the [Create Field](/v1/docs/create-field-operator) operator, you already know how to use the Nested Array operator. You can use both operators to add or update rows of a table. The difference between these two is that you'll use the Nested Array operator to make changes to a nested table, while you'll use a Create Field operator to make changes to a data table. You can think of a nested table as a table inside a table, which helps organize large amounts of table values.

You'll find the Nested Array operator under the [Table](/v1/docs/tableoperators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

Here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Do Not Sanitize Formula | When this checkbox is clear, the operator cleans values coming into or defined in the operator. For example, removing special characters. Some of those special characters include `'`, `$`, `#`, and `&amp`. The operator also cleans up complex values. For example, logically breaking up strings of numbers and letters using underscores. A sample module ID can go from `5f6b4cdfabf886024d4de2d3 to 5f_6b_4cdfabf_886024d_4de_2d_3`. Sanitizing improves performance. But it can also lead to unexpected data behavior. If your Create Field is not behaving as expected, try selecting this box. When selected, the operator uses your values and expressions as-is. This is best when working with complex values or values that should remain unchanged. By default, this setting is selected, which means the operator does not attempt to sanitize. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Table Path | This is the reference key of the data you want to nest. An example in a Data would be the heading of a column in a Data Table. |
| Field 1-4 | Notice how the Nested Array operator has 4 different Field options. This means you can add multiple fields using a single operator. Define the field you want to create or update, using the following format: **key=value**. For string values, add single or double quotes around the value. For example, `employed="yes"`. The value part of the **key=value** expression can also include calculations, conditional expressions, and references to other fields. It can also reference values coming into the argument port, using the alias `_arg`. For example, this expression that uses a calculation: `incomeMonthly=_arg/12`. The calculation happens on the input coming into the operator's argument port. Or this one, that includes a conditional expression, a reference to another field, and a calculation: `lowIncome=IF(incomeAnnual<24000,"yes","no")`. Conditional expressions should use the following format: `key=IF(condition,valueIfTrue,valueIfFalse)`. |

## Adding a Nested Array Operator

In this example, you'll use the Nested Array operator to update a single row of a nested table. You'll create a nested table by inputting two [Data Table](/v1/docs/data-table-component) components into a [Set](/v1/docs/set-operator) operator, and then output the new table into a second [Data Workflow](/v1/docs/data-workflow-component) component. In this second Data Workflow component, you'll use a Nested Array operator to update a patient's address information.

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

### Configure the First Data Table Component

First, you'll set up a [Data Table](/v1/docs/data-table-component) component with a customer's name and account information. Let's call this first Data Table component your "top level" data. The next Data Table component will be your nested table.

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 `dtTopLevel`.
3. In the data table, enter the following:

| # | A | B | C | D |
| --- | --- | --- | --- | --- |
| 1 | accountNumber | firstName | lastName | accountValue |
| 2 | 12347 | Willow | Kusko | 54389 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_NestedArrayOperator_DT2_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
4. Click **Save & Close**.

### Configure the Second Data Table Component

Now, you'll set up a nested Data Table component storing the customer's current address.

1. Drag and drop a **Data Table** component onto your canvas, placing it below your `dtTopLevel` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dtNested`.
3. In the data table, enter the following:

| # | A | B | C | D |
| --- | --- | --- | --- | --- |
| 1 | address | city | state | zip |
| 2 | 100 Main Street | New York | NY | 10001 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_NestedArrayOperator_DT1_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
4. Click **Save & Close**.

### Configure the First Hidden Component

In this [Hidden](/v1/docs/hidden-component) component, you'll store the output of your `dtTopLevel` **Data Table** component. The output references your combined tables.

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

### Configure the First Data Workflow Component

You'll now set up a [Data Workflow](/v1/docs/data-workflow-component) component to input your Data Table components and nest them into an array. The simplest way to create this array is with a [Set](/v1/docs/set-operator) operator. You'll also configure this first Data Workflow to trigger your second Data Workflow.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below your `array` **H****idden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfSetArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Nested_Array_06_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

#### 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 | dtTopLevel |
| Required | No |
| 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 | dtNested |
| Required | No |
| Source | Default |

#### 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 | Set Nested Array |
| Path | [0].address |
| Value |  |
3. Connect the output port (right) of the `dtTopLevel` **Input** operator to the input port (left) of the `Set Nested Array` **Set** operator.
4. Connect the output port (right) of the `dtInline` **Input** operator to the input port (left) of the `Set Nested Array` **Set** operator.

#### Configure the First 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 | array |
| Action | value |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `array` **Output** operator.

#### Configure the Second Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | dwfNestedArray |
| Action | trigger |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `dwfNestedArray` **Output** operator.

#### Configure the 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 | Nested Array |
3. Connect the output port (right) of the `Set Nested Array` **Set** operator to the input port (left) of the `Nested Array` **Console** operator.
4. Click Save.

### Configure the Button Component

To trigger your `dwfSetArray` **Data Workflow**, you'll add a [Button](/v1/docs/button-component) component.

1. Drag and drop a **Button** component onto your canvas, placing it between your **D****ata Workflow** component.
2. In the **Property ID** field, enter `btnUpdateAddress`.
3. In the **Label Text** field, enter `Update Address`.
4. Set the **Action Type** to **Event.**
5. In the **On Click** field, enter `dwfSetArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_NestedArrayOperator_Button_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)
6. Click **Save & Close**.

### Configure the Second Hidden Component

In the second Hidden component, you'll store the output of your second Data Workflow.

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

### Configure the Second Data Workflow Component

You'll now input your first Data Workflow into your second Data Workflow. Then, you'll use a Nested Array operator to update the address in your nested table.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it below your `afterArray` **H****idden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfNestedArray`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Nested_Array_08_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

#### 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 | array |
| Required | No |
| Source | Default |

#### Configure the Nested Array Operator

1. Drag and drop a **Nested Array** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Nested Array |
| Label | address |
| Dtejeo Not Sanitize Formula | checked (yes) |
| Preserve Argument Type | Unchecked (no) |
| Table Path | address |
| Field 1 | address="200 Wall Street" |
| Field 2 |  |
| Field 3 |  |
| Field 4 |  |
3. Connect the output port (right) of the `array` **Input** operator to the input port (left) of the `address` **Nested Array** 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 | arrayAfter |
| Action | value |
3. Connect the output port (right) of the `address` **Nested Array** operator to the input port (left) of the `arrayAfter` **Output** operator.

#### Configure the 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 | Change of Address |
3. Connect the output port (right) of the `address` **Nested Array** operator to the input port (left) of the `Change of Address` **Console** operator.
4. Click **Save**.
5. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_NestedArrayOperator_ModEdit_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

> [!NOTE]
> This use case works behind the scenes, so you won't see anything in Express View. Instead, here's a look at the DevTools Console:

Preview your module in Express View, and open the DevTools Console. Click the **Update Address** button, and expand the data. When you expand the **address** data, you'll see that your customer's address was updated from `100 Main Street` to `200 Wall Street`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Nested_Array_09.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A43Z&se=2026-11-08T04%3A56%3A43Z&sr=c&sp=r&sig=Bx0NeBR4%2BA79BLO8MvxKFWd2nw8WkgGcjyUs1RBfAFE%3D)

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

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.

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 .

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

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.