Set Operator

Overview

A static image displaying the Data Workflow component's Create Field Operator icon and configuration window.

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 to the left of the Data Workflow canvas.

About the Info Window

Learn more about each setting in the Set 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. If you set a string A string is an object that represents a sequence of characters. Strings typically hold data represented in text form., you do not need to add quotes around the value.

Input Port Functionality

There are two input ports on the left of the Set operator. Each input port provides a different function:

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.

Configure the Set Operator

In this example, use the Set operator to create a key/value pair in an existing 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.. First, define an object in the Default Value field 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 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. where you'll add a key/value pair.

1. In the Module Builder, drag and drop a Hidden 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 Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter sampleObject.
3. In the Default Value field, enter the following: {"firstName":"Minna", "lastName":"Amigon", "age":27}.
4. Click Save Component.

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 Hidden 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 dwfSet.
3. In the 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 . field, enter dwfSet.

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

The JSON Parse operator lets you create the data structure defined in your Hidden component. It parses the JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. and creates the specified object. You cannot add a key/value pair to the object without the JSON Parse operator because you need an object where you can add a key/value pair.

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

Category

JSON Parse

Label

parseData

Preserve Argument Type

☐ (unchecked)

3. Connect the output port (right) of the sampleObject Input operator to the input port (left) of the parseData 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 parseData 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

setOccupation

Path

occupation

Value

lawyer
3. Connect the output port (right) of the parseData JSON Parse operator to the upper input port (left) of the setOccupation Set operator.

Configure the Second Console Operator

Add a Console operator to view how the Set operator affects the data in the Data Workflow.

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 setOccupation Set operator to the input port (left) of the After Set Console operator.
4. Click Save Component.

Here's how the completed Data Workflow looks:

A static image displaying the completed Data Workflow component.

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 Icon Button component onto your canvas, placing it below the dwfSet Data Workflow.
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 btwRunDWF.
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 Run DWF Set.
4. Navigate to the Actions settings.
5. From the Action Type drop-down, select Event.
6. In the On Click field, enter or select dwfSet.

A static image displaying the Button component's configuration settings.

7. Click Save Component.
8. Save your module.

Your completed module looks like the following in the Module Builder:

A static image displaying the completed 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.. Open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. and click Run DWF Set.

Overview

A static image displaying the Data Workflow component's Create Field Operator icon and configuration window.

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 to the left of the Data Workflow canvas.

About the Info Window

Learn more about each setting in the Set 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 A string is an object that represents a sequence of characters. Strings typically hold data represented in text form., 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. Each input port provides a different function:

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 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.. First, define an object in the Default Value field 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 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. where you'll add a key/value pair.

1. In the Module Builder, drag and drop a Hidden 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 Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter sampleObject.
3. In the Default Value field, enter the following: {"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 sampleObject Hiddencomponent.
2. In the Label and Property Name fields, enter dwfSet.

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

The JSON Parse operator lets you create the data structure defined in your Hidden component. It parses the JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. and creates the specified object. You cannot add a key/value pair to the object without the JSON Parse operator because you need an object where you can add a key/value pair.

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

Category

JSON Parse

Label

parseData

Preserve Argument Type

☐ (unchecked)

3. Connect the output port (right) of the sampleObject Input operator to the input port (left) of the parseData 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 parseData 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 parseData JSON Parse operator to the upper input port (left) of the setOccupation Set operator.

Configure the Second Console Operator

Add a Console operator to view how the Set operator affects the data in the Data Workflow.

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 setOccupation Set operator to the input port (left) of the After Set Console operator.
4. Click Save.

Here's how the completed Data Workflow looks:

A static image displaying the completed data workflow.

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 Icon Button component onto your canvas, placing it below the dwfSet Data Workflow.
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 btwRunDWF.
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 Run DWF Set.
4. From the configuration window, click the Actions Icon Actions button.
5. Set the Action Type type to Event.
6. In the On Click field, enter or select dwfSet.

A static image displaying the Button component's configuration.

7. Click Save & Close.
8. Save your module.

Your completed module looks like the following in the Module Builder:

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.. Open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. and click Run DWF Set.