Join Operator

Overview

You can use the Join operator to combine strings of an array into a new array. For example, say you have an array of client names. You want to combine them into another array, with each name listed one after the other. The Join operator helps you reorganize these names to this new format. It also lets you separate them, so your list isn't one indecipherable line. The operator lets you use anything to separate your data. For instance, you can use a comma, colon, or semi-colon.

It's important to note that the Join operator only works with arrays. Data Tables are arrays of objects. If you try to input a column of names from a Data Table directly, [object Object] displays in the DevTools Console. For example, if you want to input a Data Table of names into the Join operator. If you do, your output looks something like this: [object Object],[object Object],[object Object],[object Object].

Be sure to convert your table data to an array before using the Join operator. You can do this easily using a Col2Array operator. But, before you dive into a use case, you'll look at some of the operator's settings.

You can find the Join 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 Join operator looks like, along with its Info window:

And here's a breakdown of each setting in the 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.

Separator

This is the character or symbol you can use to separate your data. Examples are a comma, colon, hyphen, or semi-colon, but you can choose anything you want. You can also choose to use _arg as your separator.

Adding a Join Operator

In this example, take a list of author names and combine them into a single line and separate them with a semi-colon.

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 DevTools Console:

What You'll Need

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

  • 1 Data Table component

  • 1 Hidden component

  • 1 Data Workflow component

To set up your Data Workflow, you’ll need:

  • 1 Input operator

  • 1 Col2Array operator

  • 1 Join operator

  • 1 Output operator

  • 3 Console operators

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

Configure the Data Table Component

First, set up a Data Table to hold your contributing authors and the institutions where they work.

1. In the Module Builder, drag and drop a Data Table component onto your canvas.
2. Enter dtAuthors in the Label and Property Name fields.
3. In the data table, enter the following:
fullName university

Whobrey, Yuki

University of Chicago

Perin, Lavera

Columbia University

Tollner, Mitsue

University of Georgia

Kusko, Willow

Arizona State University

4. Click Save.

Configure the Hidden Component

Next, configure a Hidden component to hold your Data Workflow's output.

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

Configure the Data Workflow Component

Now, it's time to set up your Data Workflow. Use a Col2Array first to turn your table data into an array. Then, use the Join operator to put all your author's names in one line. You can configure the operator to use a semi-colon to separate the names. To better help you watch the progress of your Data Workflow, also add 3 Console operators.

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

Configure the Input Operator

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

Category

Input

Component

dtAuthors

Required

No

Source

Default

Configure the Col2Array Operator

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

Category

Col2Array

Label

fullName Array

Drop Empty

No

Path

fullName

Default Value

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

Configure the Join Operator

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

Category

Join

Label

Join Authors

Separator

;

The Separator is the punctuation character you want to use to separate your data. In this case, you'll choose a semi-colon (;).

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

Configure the Output Operator

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

Category

Output

Component

joinOutput

Action

value
3. Connect the output port (right) of the Join operator to the input port (left) of the Output operator.

Configure the First Console Operator

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

Category

Console

Label

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

Configure the Second Console Operator

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

Category

Console

Label

fullName Array
3. Connect the output port (right) of the Col2Array operator to the input port (left) of the fullName Array Console operator.

Configure the Third Console Operator

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

Category

Console

Label

Join Authors
3. Connect the output port (right) of the Join operator to the input port (left) of the Join Authors Console operator.
4. Click Save.
5. Save your module.

Now you can test out your Data Workflow. Preview your module in Express View and open up the DevTools Console. When you expand your Consoles, you'll see the progression of your Data Workflow. First, your Col2Array operator puts your colleague's full names into an array. Then, your Join operator combines those names, separating each with a semi-colon.

Changing a Join 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 a Join 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.

Deleting a Join 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 view this complete use case here: https://training.unqork.io/#/form/605ce8e29c2881024aa7b383/edit.