Nested Array Operator

Overview

Using the Nested Array operator, you can:

  • Dynamically add key/value pairs to a nested array.

  • Add key/value pairs with values based on the value of another field in the nested array. For example, creating a field with a value calculated using the value from another field.

  • Add key/value pairs with a conditional value. For example, adding one of 2 possible values, based on a conditional if/then expression.

  • Conditionally update existing fields in a nested table.

If you know how to use the Create Field operator, you already know how to use the Nested Array operator. You can use both operators to add or update any number of 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. These can help organize large amounts of table values.

You'll find the Nested Array operator under the Table group in the menu on the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Nested Array operator looks like, along with its Info window:

A static image displaying the Nested Array operator and its Settings Info window.

And 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. The label you enter here shows beneath your 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 does its best to clean up values coming into or defined in the operator. For example, removing special characters. Some of those special characters include ', $, #, &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 isn't 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 doesn't 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 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 Tables into a Set operator, and then outputting the new table into a second Data Workflow. In this second Data Workflow, 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.

Here's how the completed use case will look in the Module Builder:

A static image displaying the Nested Array operator completed use case in the Module Builder.

Here's how the completed use case will work in Express View 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., including a peek at the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.:

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 The DevTools Console helps you securely store, build, test, and deploy your software.:

Static image displaying the Nested Array operator use case data in the DevTools Console.

Configure the First Data Table Component

First, you'll set up a Data Table with a customer's name and account information. Let's call this first Data Table your "top level" data. The next Data Table will be your nested table.

1. Drag and drop a Dropdown Component Icon Data Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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

A static image displaying the first Data Table configuration in the Nested Array operator use case.

4. Click Save & Close.

Configure the Second Data Table Component

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

1. Drag and drop a Dropdown Component Icon Data Table component onto your canvas, placing it below your dtTopLevel Dropdown Component Icon Data Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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

A static image displaying the second Data Table configuration in the Nested Array operator use case.

4. Click Save & Close.

Configure the First Hidden Component

In this Hidden component, you'll store the output of your first Data Workflow. The output references your combined tables.

1. Drag and drop a iconHidden component onto your canvas, placing it below your Dropdown Component Icon Data Table components.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.s and Canvas Label Text 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 . fields, enter array.
3. Click Save & Close.

Configure the First Data Workflow Component

You'll now set up a Data Workflow to input your Data Tables and nest them into an array. The simplest way to create this array is with a Set operator. You'll also configure this first Data Workflow to trigger your second Data Workflow.

1. Drag and drop a Data Workflow Icon Data Workflow component onto your canvas, placing it below your array iconHidden component.
2. In the Canvas Label Text and Property Name fields, enter dwfSetArray.

Static image displaying the Data Workflow configuration for the Nested Array operator use case.

Configure the First Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the Input operator's Info window as follows:
Setting Value

Category

Input

Component

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 Input 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 Set 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 operator.
4. Connect the output port (right) of the dtNested Input operator to the input port (left) of the Set operator.

Configure the First Output Operator

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

Category

Output

Component

array

Action

value

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

Category

Output

Component

dwfNestedArray

Action

trigger

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

Setting

Value

Category

Console

Label

Nested Array

3. Connect the output port (right) of the Set operator to the input port (left) of the Console operator.
4. Click Save.

Configure the Button Component

To trigger your first Data Workflow, you'll add a Button component.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it between your Data Workflow Icon Data Workflow component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnUpdateAddress.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Update Address.
4. Set the Action Type to Event.
5. In the On Click field, enter dwfSetArray.

Static image showing the Button component's Action Type configuration in the Nested Array operator use case.

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 iconHidden component onto your canvas, placing it below your Dropdown Component Icon Data Table components.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.s and Canvas Label Text 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 . 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 Data Workflow Icon Data Workflow component onto your canvas, placing it below your afterArray iconHidden component.
2. In the Canvas Label Text and Property Name fields, enter dwfNestedArray.

Static image displaying the second Data Workflow configuration for the Nested Array operator use case.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the Input operator's Info window as follows:
Setting Value

Category

Input

Component

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 Nested Array operator's Info window as follows:
Setting Value

Category

Nested Array

Label

address

No 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 Input operator to the input port (left) of the Nested Array operator.

Configure the Output Operator

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

Category

Output

Component

arrayAfter

Action

value

3. Connect the output port (right) of the Nested Array operator to the input port (left) of the Output operator.

Configure the Console Operator

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

Setting

Value

Category

Console

Label

Change of Address

3. Connect the output port (right) of the Nested Array operator to the input port (left) of the Console operator.
4. Click Save.
5. Save your module.

Preview your module in Express View 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., and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Click your Update Address button, and expand each Console. When you expand address, you'll see that your customer's address updated from "100 Main Street" to "200 Wall Street".

Resources