Object2Table Operator

Overview

The Object2Table operator creates a table out of an object. Each key/value pair in the object becomes a row in the final table. Remember, a table is just an indexed array of objects. So, really, each key/value pair in the object becomes its own separate object in an array.

You'll find the Object2Table operator under the Object group at the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

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

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

Setting Description

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.

Key Column Name

Each key/value pair in the source object becomes an object split into 2 key/value pairs. For example going from {"a":"b"} to {"key":"a", "value":"b"}. Enter the name of the key for the "key" key/value pair.

Value Column Name

Each key/value pair in the source object becomes an object split into 2 key/value pairs. For example going from {"a":"b"} to {"key":"a", "value":"b"}. Enter the name of the value for the "value" key/value pair.

Adding and Configuring the Object2Table Operator

This use case shows how to use the Object2Table operator to create a table out of an object. You'll also see how to define your own object using a Hidden component.

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

Here's how the completed use case works in Express View, including a peek at the final table in the DevTools Console:

What You Need

To set up this use case, you need:

  • 1 Hidden component

  • 1 Button component

  • 1 Data Workflow component

To set up your Data Workflow, you need:

  • 1 Input operator

  • 1 JSON Parse operator

  • 1 Object2Table operator

  • 2 Console operators

Configure the Hidden Component

First, add a Hidden component to create a sample object. All you need to do is define a JSON (JavaScript Object Notation) object in the Default Value field. This sample object contains 3 key/value pairs.

1. Drag and drop a Hidden component onto your canvas.
2. Enter sampleObject in the Property ID and Label Text fields.
3. Enter {"name":"Theola", "age":35, "city":"Massapequa"} in the Default Value field.

4. Click Save.

Configure the Data Workflow Component

Next, create the Data Workflow that turns your object into a table.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the Hidden component.
2. Enter dwfObject2Table in the Canvas Label Text and Property Name fields.

Configure the Input Operator

This operator brings your source data into the Data Workflow.

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 First Console Operator

This operator helps you see the before of your Data Workflow in the DevTools Console. Later, you'll add an after Console operator to show what the Object2Table operator does.

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

Configure the JSON Parse Operator

This operator takes the JSON object defined in your Hidden component and turns it into an actual object data structure. Without the JSON Parse operator, you end up with nonsense in your final table.

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

JSON Parse
3. Connect the output port (right) of the Input operator to the input port (left) of the JSON Parse operator.

Configure the Object2Table Operator

Now, you're ready to set up the Object2Table operator. Notice the value you enter in the Info window's Key Column Name and Value Column Name fields. These are the 2 column headers of your final table.

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

Setting

Value

Category

Object2Table

Label

Create Table

Key Column Name

testKey

Key Value Name

testValue
3. Connect the output port (right) of the JSON Parse operator to the input port (left) of the Object2Table operator.

Configure the Second Console Operator

This operator lets you see the after of your Data Workflow. Notice that the Object2Table operator only outputs to this Console operator. When creating applications, you can also use a dedicated Output operator. Then, you can connect that Output operator to a Hidden component. This lets you store the final table 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 Object2Table
3. Connect the output port (right) of the Object2Table operator to the input port (left) of the Console operator.
4. Click Save.

Configure the Button Component

Finally, add 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 above the Data Workflow.
2. Enter btnRunDWF in the Property ID field.
3. Enter Run Object2Table in the Label Text field.
4. Select Event as the Button Action Type.
5. Enter dwfObject2Table in the Trigger on Click field.

6. Click Save.
7. Save your module.

Now you're ready to test out your Object2Table operator. Preview your module in Express View and open the DevTools Console. Click the Run Object2Table button and see what displays in the DevTools Console:

Changing an Object2Table Operator's Settings

You can revisit and make changes to this operator.

1. Click the dwfValueData 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 Component.
6. Save your module.

Copying an Object2Table 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 dwfValueData 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.

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 Component
7. Save your module.

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 an Object2Table 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 dwfValueData 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.

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 Component.
6. Save your module.

Lab

You can find the completed Object2Table Operator lab here: https://training.unqork.io/#/form/5f4727bc972685021f685d35/edit.