Set Operator

Overview

Sometimes, you'll work with an incomplete data set. Maybe you need to add a new value into an object or another row to an existing table. Or maybe you have more complex tasks, like nesting an entire array inside an object. The Set operator simplifies these tasks. Think of the Set operator as a reverse Get operator. Instead of extracting values from a data structure, you're adding them in. 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 at the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

Info Window Settings

The Set operator looks like this, along with its Info window:

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

Setting

Description

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.

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.

Note: 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

Notice the two input ports on the left of the Set operator. The data source connects to the upper input port. For example, an Input operator would connect to a Data Table here. Or, an Input operator would connect to a Create Table operator if you use the Set operator to create rows in a new table.

The lower input port connects data to add to your data source. This lower input port is optional since you can also define the data to add in the Set operator's Info window. Remember though, you can only define simple values to add, like a string or a number, in the Info window. To add a more complex data structure, like an array or object, to an existing object, you can 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 (no quotes) for numbers. Then, connect the output port (right) of the Create Value operator to the lower input port (left) of the Set operator.

Now you know the difference between the input ports of the Set operator. Next, let's look at how you add and configure this operator.

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 Editor:

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:

Modify a Set Operator

You can revisit and make changes to this operator.

1. Click the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator to open its Info Window.
4. Make changes to the operator's settings as needed.
5. Click Save.
6. Save your module.

Copying a Set Operator

You can make a copy of your operator using familiar keyboard settings. You can copy and paste an exact copy of your operator, matching all settings.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to duplicate.
4. On your keyboard, press Command + C (Mac OS) or Ctrl + C (Windows/Linux) to copy the operator.

TIP  You can copy more than one operator at a time. Hold Command or Ctrl on your keyboard and click all the operators you want to copy. Follow the rest of the steps as usual.

5. On your keyboard, press Command + V (Mac OS) or Ctrl + V (Windows/Linux) to paste the copied operator(s) to the Data Workflow canvas.
6. Click Save.
7. Save your module.

TIP  Did you know you can copy an operator and paste it into a different Data Workflow? You'll use the same steps outlined above.

Removing a Set Operator

Lastly, you can delete this operator from your Data Workflow canvas. You can also use these same steps to delete a connection between two operators.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to delete.
4. On your keyboard, press Delete.

NOTE  Once you delete this operator, make sure to connect your remaining operators. If your Data Workflow path doesn't end with an Output or Console operator, your Data Workflow won't work. So, once you delete an operator, make sure to update any remaining paths to end at an Output or Console operator.

5. Click Save.
6. Save your module.

Lab

You can find the completed Creating a Key/Value Pair in an Object lab here: https://training.unqork.io/#/form/646fbc5cbbed1f2a2dcc3e97/edit.