Set Operator
Overview
The Set Operator lets Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. add new values to a data structure. Examples of how you can use a Set operator include:
-
Creating a new key/value pair in an object.
-
Creating new row(s) in a table.
-
Adding new key/value pairs in a table row.
You'll find the Set operator in the Table group in the menu on the Data Workflow canvas.
About the Info Window
Learn more about each setting in the Create Field operator's 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. |
Path |
Enter the key of the key/value pair you want to create. If you add this key to a specific position in an existing array, it specifies the path to get that position. Use dot notation. For example, [0].name would create a key called name in the 0 index position. |
Value |
Enter the value for the key/value pair you want to create. You can leave the Value setting blank if you connect another data source to the Set operator's lower input port. No special formatting is required. Simply enter the value to add. Also, if you set a string, you don't need to add quotes around the value. |
Input Port Functionality
There are two input ports on the left of the Set operator.
Upper Input Port
Connect the upper input port to connect to a data source. For example, an Input operator connected to a Data Table component could be the data source. Or, an Input operator could connect to a Create Table operator if you use the Set operator to create rows in a new table.
Lower Input Port
The lower input port connects data to add to your data source. The lower input port is optional as you can define data to add in the Set operator's Info window. However, you can only define simple values to add like a string A string is an object that represents a sequence of characters. Strings typically hold data represented in text form. or a number The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values., in the Info window. To add a more complex data structure, like an array An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. or object 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., to an existing object, connect the array to the lower input port and the object to the upper input port.
The lower input port can also connect a Create Value operator. Instead of defining the value to add in the Set operator, you'll define the value in the Create Value operator. Enter a value in the Expression/Value field of the Create Value operator. Make sure to use the following formats: =string for strings, and =number for numbers. Then, connect the output port (right) of the Create Value operator to the lower input port (left) of the Set operator.
Adding and Configuring the Set Operator
In this example, use the Set operator to create a key/value pair in an existing object. First, define an object in the Default Value of a Hidden component. Then, use a JSON Parse operator in the Data Workflow to turn the JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. into an object data structure.
Configure the Hidden Component
Use a Hidden component to create an object that you'll add a key/value pair to.
1. | Drag and drop a Hidden component onto your canvas. |
3. | Enter sampleObject in the Property ID and Label Text. |
4. | Enter the following in the Default Value field: {"firstName":"Minna", "lastName":"Amigon", "age":27}. |
5. | Click Save. |
Configure the Data Workflow Component
Next, you'll create the Data Workflow which adds a new key/value pair to your object.
1. | Drag and drop a Data Workflow component onto your canvas, placing it below the sampleObject Hiddencomponent. |
2. | Enter dwfSet in the Label and Property Name. |
3. | Select Manual from the Trigger Type. |
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: |
Info | |
---|---|
Category |
Input |
Component |
sampleObject |
Required |
Yes |
Source |
Default |
Configure the JSON Parse Operator
This operator lets you create the data structure defined in your Hidden component. It parses the JSON and creates the specified object. You can't add a key/value pair to the object without the JSON Parse operator because you need an object to which you can add a key/value pair.
1. | Drag and drop a JSON Parse operator onto your Data Workflow canvas. You don't need to configure the operator's Info window. |
2. | Connect the output port (right) of the Input operator to the input port (left) of the JSON Parse operator. |
Configure the First Console Operator
1. | Drag and drop a Console operator onto your Data Workflow canvas. |
2. | Configure the operator's Info window as follows: |
Info | |
---|---|
Category |
Console |
Label |
Before Set |
3. | Connect the output port (right) of the JSON Parse operator to the input port (left) of the Console operator. |
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: |
Info | |
---|---|
Category |
Set |
Label |
|
Path |
occupation |
Value |
lawyer |
3. | Connect the output port (right) of the JSON Parse operator to the upper input port (left) of the Set operator. |
Configure the Second Console Operator
Add a Console operator so you can easily see the after of your Data Workflow. You'll notice that the Set operator only outputs to this Console operator. When creating applications, you might also want to use a dedicated Output operator. Then, you can connect that Output operator to a Hidden component. This lets you store the final object and reference it elsewhere in your application.
1. | Drag and drop a Console operator onto your Data Workflow canvas. |
2. | Configure the operator's Info window as follows: |
Info | |
---|---|
Category |
Console |
Label |
After Set |
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
Finally, create a button to click in Express View that triggers your Data Workflow.
1. | Drag and drop a Button component onto your canvas, placing it below the Data Workflow. |
2. | Enter btnRunDWF in the Property ID. |
3. | Enter Run DWF Set in the Label Text. |
4. | Select Event from the Button Action Type. |
5. | Enter dwfSet in the Trigger on Click field. |
6. | Click Save. |
7. | Save your module. |
Your completed module looks like the following:
Now, test out your Set operator. 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. Click the Run DWF Set button and see what displays in the DevTools Console! It looks something like this:
Overview
The Set Operator lets Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. add new values to a data structure. Examples of how you can use a Set operator include:
-
Creating a new key/value pair in an object.
-
Creating new row(s) in a table.
-
Adding new key/value pairs in a table row.
You'll find the Set operator in the Table group in the menu on the Data Workflow canvas.
About the Info Window
Learn more about each setting in the Create Field operator's 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 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. |
Field 1-5 |
The Create Field operator has five different field options letting Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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). How your data iterates through your Data Workflow depends on the type of key/value pairs you enter in these fields. This iteration order depends on the keys used:
To learn more, view the ECMAScript language here: https://tc39.es/ecma262/#sec-ordinaryownpropertykeys. |
Adding and Configuring the Set Operator
Now that you know what the Set operator can do, you'll explore how to use it in a Data Workflow. You'll learn how to use the Set operator to create a key/value pair in an existing object. You get that object through a simple step: define an object in the Default Value of a Hidden component. Then, use a JSON Parse operator in the Data Workflow to turn that JSON into an object data structure.
The completed use case looks like this in the Module Builder:
The completed use case works like this in Express View, and the final object in the DevTools Console looks like this:
What You'll Need
For this use case, you'll need:
-
1 Hidden component
-
1 Button component
-
1 Data Workflow component
For your Data Workflow, you'll need:
-
1 Input operator
-
1 JSON Parse operator
-
1 Set operator
-
2 Console operators
Configure the Hidden Component
Use a Hidden component to create an object that you'll add a key/value pair to.
1. | Drag and drop a Hidden component onto your canvas. |
2. | Enter sampleObject in the Property ID and Label Text. |
3. | Enter the following in the Default Value field: {"firstName":"Minna", "lastName":"Amigon", "age":27}. |
4. | Click Save. |
Configure the Data Workflow Component
Next, you'll create the Data Workflow which adds a new key/value pair to your object.
1. | Drag and drop a Data Workflow component onto your canvas, placing it below the Hidden component. |
2. | Enter dwfSet in the Label and Property Name. |
3. | Select Manual from the Trigger Type. |
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 |
sampleObject |
Required |
Yes |
Source |
Default |
Configure the JSON Parse Operator
This operator lets you create the data structure defined in your Hidden component. It parses the JSON and creates the specified object. You can't add a key/value pair to the object without the JSON Parse operator because you need an object to which you can add a key/value pair.
1. | Drag and drop a JSON Parse operator onto your Data Workflow canvas. You don't need to configure the operator's Info window. |
2. | Connect the output port (right) of the Input operator to the input port (left) of the JSON Parse operator. |
Configure the First Console 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 |
Before Set |
3. | Connect the output port (right) of the JSON Parse operator to the input port (left) of the Console operator. |
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 |
|
Path |
occupation |
Value |
lawyer |
3. | Connect the output port (right) of the JSON Parse operator to the upper input port (left) of the Set operator. |
Configure the Second Console Operator
Add a Console operator so you can easily see the after of your Data Workflow. You'll notice that the Set operator only outputs to this Console operator. When creating applications, you might also want to use a dedicated Output operator. Then, you can connect that Output operator to a Hidden component. This lets you store the final object and reference it elsewhere in your application.
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 |
After Set |
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
Finally, create a button to click in Express View that triggers your Data Workflow.
1. | Drag and drop a Button component onto your canvas, placing it below the Data Workflow. |
2. | Enter btnRunDWF in the Property ID. |
3. | Enter Run DWF Set in the Label Text. |
4. | Select Event from the Button Action Type. |
5. | Enter dwfSet in the Trigger on Click field. |
6. | Click Save. |
7. | Save your module. |
Now, test out your Set operator. Preview your module in Express View and open the DevTools Console. Click the Run DWF Set button and see what displays in the DevTools Console! It looks something like this: