Array2Col Operator

Overview

The Array2Col operator takes an array and converts it into a column in a table. Remember, a table is just an indexed array of objects. So, really, the Array2Col operator takes an array of values and converts it into an array of objects.

You'll find the Array2Col operator under the Array group at the left of your canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Array2Col 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 and displays 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.

Key Name

Each value in the array will become an object, formatted like this: {"key":"value"}. Enter a name for the key you want to use in each object.

Adding an Array2Col Operator

The data input source for Array2Col must be an array. So, for this use case, you'll first create a Data Table. Then, you'll use a Data Workflow with a Col2Array operator to turn the table into an array. This will give you an array, ready to connect to an Array2Col operator in a second Data Workflow. There are some components that create arrays, like the Multi-Select Dropdown. But for now, let's practice using the Col2Array operator to make a source array.

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

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

What You'll Need

To set up this use case, you'll need:

  • 1 Data Table component

  • 1 Hidden component

  • 2 Data Workflow components

  • 1 Button component

To set up your first Data Workflow, you'll need:

  • 1 Input operator

  • 1 Col2Array operator

  • 1 Output operator

To set up your second Data Workflow, you'll need:

  • 1 Input operator

  • 1 Array2Col operator

  • 2 Console operators

Configure the Data Table Component

First up, let's create a Data Table you can turn into an array. This is an easy way to get an array and test out the Array2Col operator.

1. Drag and drop a Data Table component onto your canvas.
2. Enter dtTable in the Property ID and Label Text.
3. Complete the Data Table as follows:

name

Minna

Veronika

Theola

Albina

Ezekiel

4. Click Save.

Configure the Hidden Component

In the next step, you'll use a Data Workflow to turn the Data Table into an array. So, let's add a Hidden component to store that array.

1. Drag and drop a Hidden component onto your canvas, placing it below the Data Table.
2. Enter outputArray in the Property ID and Label Text.
3. Click Save.

Configure the First Data Workflow Component

Here, you'll use the Col2Array operator to create an array out of your Data Table. This is an easy way to get an array and test out the Array2Col operator.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the Data Table.
2. Enter dwfCreateArray in the Label and Property Name.

Configure the Input Operator

First up, let's get your data source, the dtTable Data Table, into the Data Workflow.

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

Setting

Value

Category

Input

Component

dtTable

Required

Yes

Source

Default

Configure the Col2Array Operator

Now you're ready to set up the Col2Array operator. Notice the value you'll enter in the Info window's Path field. It matches the column header in your Data Table.

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

Setting

Value

Category

Col2Array

Label

 

Drop Empty

Yes

Path

name

Default Value

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

Configure the Output Operator

Finally, you'll add an Output operator, connected to your outputArray Hidden component.

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

Setting

Value

Category

Output

Label

outputArray

Action

Value
3. Connect the output port (right) of the Col2Array operator to the input port (left) of the Output operator.
4. Click Save.

Configure the Second Data Workflow Component

Now that you've got a sample array, you're ready to test out the Array2Col operator. So, let's set up the Data Workflow that'll make it happen.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the outputArray Hidden component.
2. Enter dwfArray2Col in the Canvas Label Text and Property Name.
3. Select Manual from the Trigger Type.

Configure the Input Operator

Let's get your sample array, stored in the outputArray Hidden component, into the Data Workflow.

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

Setting

Value

Category

Input

Component

outputArray

Required

Yes

Source

Default

Configure the First Console Operator

This Console operator helps you see the "before" of your Data Workflow in the DevTools Console. Later, you'll add an "after" Console operator, making it easy to see exactly what the Array2Col operator does.

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

Setting

Value

Category

Console

Label

Before Array2Col
3. Connect the output port (right) of the Input operator to the input port (left) of the Console operator.

Configure the Array2Col Operator

Now you're ready to set up the Array2Col operator. Notice the value you'll enter in the Info window's Key Name field. It'll become the key in each key/value pair created from the array.

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

Setting

Value

Category

Array2Col

Label

 

Key Name

name
3. Connect the output port (right) of the Input operator to the input port (left) of the Array2Col operator.

Configure the Second Console Operator

Now for one last operator. Here, you'll add a Console operator so you can easily see the "after" of your Data Workflow. You'll notice that the Array2Col operator only outputs to this Console operator. When creating applications, you might also want to use a dedicated Output operator. Then, you could connect that Output operator to a Hidden component. This would let 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. Complete the operator's Info window as follows:

Setting

Value

Category

Console

Label

After Array2Col
3. Connect the output port (right) of the Array2Col operator to the input port (left) of the Console operator.
4. Click Save.

Configure the Button Component

Finally, you'll create a button you can click in Express View to trigger your Data Workflow.

1. Drag and drop a Button component onto your canvas, placing it above the dwfArray2Col Data Workflow.
2. Enter btnRunDWF in the Property ID.
3. Enter Run Array2Col in the Label Text.
4. Select Event from the Button Action Type.
5. Enter dwfArray2Col in the Trigger on Click field.

6. Click Save.
7. Save your module.

Now you're ready to test out your Array2Col operator. Preview your module in Express View and open the DevTools Console. Click the Run Array2Col button and watch what happens in the DevTools Console! It should look something like this:

Changing an Array2Col Operator's Settings

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 an Array2Col 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.

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.

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 Array2Col 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.

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 Array2Col Operator lab here: https://training.unqork.io/#/form/5f46924ec2375b021e67c373/edit.