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:
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 ', $, #, &. 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:
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.:
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 Data Table component onto your canvas. |
3. | In the data table, enter the following: |
|
A |
B |
C |
D |
---|---|---|---|---|
1 |
accountNumber |
firstName |
lastName |
accountValue |
2 |
12347 |
Willow |
Kusko |
54389 |
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 Data Table component onto your canvas, placing it below your dtTopLevel Data Table component. |
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 |
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 Hidden component onto your canvas, placing it below your Data Table components. |
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 component onto your canvas, placing it below your array Hidden component. |
2. | In the Canvas Label Text and Property Name fields, enter dwfSetArray. |
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 onto your canvas, placing it between your 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. |
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 Hidden component onto your canvas, placing it below your Data Table components. |
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 component onto your canvas, placing it below your afterArray Hidden 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 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
-
You can view this complete use case here: https://training.unqork.io/#/form/605a1b5d50bd5c2b0f1f7d7e/edit.
-
Modify the Nested Array operator in the Data Workflow's configuration window.