Object2Table Operator

Overview

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

The Object2Table operator creates a table from 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., with each key/value pair in the object becoming a row in the final table. Because a table is an indexed 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. of objects, each key/value pair in the object becomes a separate object in an array.

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

About the Info Window

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

Info

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.

Preserve Argument Type

When selected, this setting ensures the argument data type is respected when the operator executes.

Key Column Name

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

Value Column Name

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

Adding an Object2Table Operator

This example uses the Object2Table operator to create a table out of 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.. You'll also define the object using a Hidden component.

These instructions assume you have a new module open and saved with a title.

Configure the Hidden Component

First, you'll configure a Hidden component to create a sample object. Define a JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. object in the Default Value field. This sample object contains three key/value A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases. pairs.

1. 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. Navigate to the Data settings.
4. In the Default Value field, enter {"name":"Theola", "age":35, "city":"Massapequa"}.

A static image displaying the Hidden component configuration details in UDesginer.

5. Click Save Component.

Configure the Data Workflow Component

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

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 dwfObject2Table.
3. In theCanvas 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 ., enter dwfObject2Table.

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 Input operator's Info window as follows:
Info

Category

Input

Component

sampleObject

Required

Yes

Source

Default

Configure the First Console Operator

This operator helps you view the Data Workflow before its modified. Later, you'll add another Console operator to show the results of the Object2Table 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 Object2Table

3. Connect the output port (right) of the sampleObjectInput operator to the input port (left) of the Before Object2TableConsole operator.

Configure the JSON Parse Operator

This operator takes the JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. object defined in your Hidden component and converts it into an object data structure.

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

JSON Parse

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

Configure the Object2Table Operator

Now, 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 two 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:

Info

Category

Object2Table

Label

Create Table

Key Column Name

testKey

Key Value Name

testValue

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

Configure the Second Console Operator

This operator lets you view the results of the Object2Table operator. When creating applications, you'll typically use a dedicated Output operator to store the data in a Hidden component.

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 Object2Table

3. Connect the output port (right) of the Create TableObject2Table operator to the input port (left) of the After Object2TableConsole operator.
4. Click Save Component.

Here's how the completed Data Workflow looks:

A static image displaying the object 2 table conversion data workflow configuration

Configure the Button Component

Lastly, add a Button component to trigger the Data Workflow and convert your object into a table.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it above the 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 btnRunDWF.
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 Object2Table.
4. From the Action Type drop-down, select Event.
5. From the On Click drop-down, select dwfObject2Table.

A static image displaying the button component configuration in UDesigner.

6. Click Save Component.
7. Save your module.

Here's how the completed example looks in the Module Builder:

A static image displaying the complete usecase 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. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Click the button and view the data before and after Object2Table operation.

A static image displaying the data in the DevTools Console in Express View.

Overview

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

The Object2Table operator creates a table from 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., with each key/value pair in the object becoming a row in the final table. Because a table is an indexed 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. of objects, each key/value pair in the object becomes a separate object in an array.

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

About the Info Window

Learn more about each setting in the Object2Table operator's 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 two key/value pairs. For example, converting {"a":"b"} to {"key":"a", "value":"b"}. Enter the name of the key for the "key".

Value Column Name

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

Adding and Configuring the Object2Table Operator

This example uses the Object2Table operator to create a table out of 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.. You'll also define the object using a Hidden component.

These instructions assume you have a new module open and saved with a title.

Configure the Hidden Component

First, you'll configure a Hidden component to create a sample object. Define a JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. object in the Default Value field. This sample object contains three key/value A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases. pairs.

1. 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 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 . fields, enter sampleObject.
3. Navigate to the component's Data section.
4. In the Default Value field, enter {"name":"Theola", "age":35, "city":"Massapequa"}.

A static image displaying the Hidden component configuration details in UDesginer.

5. Click Save & Close.

Configure the Data Workflow Component

Next, you'll configure the Data Workflow that converts your object into a table.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the sampleObject Hidden component.
2. 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 . and Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. fields, enter dwfObject2Table.

Configure the Input Operator

This operator brings your source data into the Data Workflow.

1. Drag and drop anInput operator onto your Data Workflow canvas.
2. Configure the Input 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 view the Data Workflow before its modified. Later, you'll add another Console operator to show the results of the Object2Table 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 Object2Table

3. Connect the output port (right) of the sampleObjectInput operator to the input port (left) of the Before Object2TableConsole operator.

Configure the JSON Parse Operator

This operator takes the JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. object defined in your Hidden component and converts it into an object data structure.

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 sampleObjectInput operator to the input port (left) of the JSON ParseJSON Parse operator.

Configure the Object2Table Operator

Now, 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 two 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 ParseJSON Parse operator to the input port (left) of the Create TableObject2Table operator.

Configure the Second Console Operator

This operator lets you view the results of the Object2Table operator. When creating applications, you'll typically use a dedicated Output operator to store the data in a Hidden component.

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 Create TableObject2Table operator to the input port (left) of the After Object2TableConsole operator.
4. Click Save.

Here's how the completed Data Workflow looks:

A static image displaying the object 2 table conversion data workflow configuration in classic designer.

Configure the Button Component

Lastly, add a Button component to trigger the Data Workflow and convert your object into a table.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it above the 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 btnRunDWF.
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 Object2Table.
4. To the left of the component's configuration window, click Actions Icon Actions.
5. Set the Action Type as Event.
6. From the On Click drop-down, select dwfObject2Table.

A static image displaying the button component configuration in classic Designer.

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

Here's how the completed example looks in the Module Builder:

A static image displaying the complete usecase 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. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Click the button and view the data before and after Object2Table operation.

A static image displaying the data in the DevTools Console in Express View.