---
title: "Join Operator"
slug: "join-operator"
updated: 2025-09-26T02:22:40Z
published: 2025-09-26T02:22:40Z
canonical: "docs.unqork.io/join-operator"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Join Operator

UDesignerClassic Designer

## Overview

Use the **Join operator** to combine strings of a data array into a new array. For example, let's 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 into 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, like a comma, colon, or semi-colon.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/joinopudes_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

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](/v1/docs/data-table-component) component directly, `[object Object]` displays in the DevTools Console.

You'll find the Join operator under the [Array](/v1/docs/array-operators) group to the left of your [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

Here's a breakdown of the operator's 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. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Separator | This is the character or symbol you 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

For this example, you'll configure a [Data Table](/v1/docs/data-table-component) component with a list of contributing authors and the institutions where they work. Before you pass the data to a Join operator, you'll convert the table data to an array using a [Col2Array](/v1/docs/col2array-operator) operator. Then, you'll pass this data to the Join operator, separating the combined data using semi-colons.

> [!NOTE]
> These instructions assume you have a module open, saved, and with a title.

### Configure the Data Table Component

First, set up a [Data Table](/v1/docs/data-table-component) component to store a list of contributing authors and the institutions where they work.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID and Canvas Label Text fields, enter `dtAuthors`.
3. In the data table, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | fullName | university |
| 2 | Whobrey, Yuki | University of Chicago |
| 3 | Perin, Lavera | Columbia University |
| 4 | Tollner, Mitsue | University of Georgia |
| 5 | Kusko, Willow | Arizona State University |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/joindtudes_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Next, configure a [Hidden](/v1/docs/hidden-component) component to store your Data Workflow's output.

1. Drag and drop a **H****idden** component onto your canvas, placing it below your **dtAuthors Data Table** component.
2. In the Property ID and Canvas Label Text fields, enter `joinOutput`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Next, set up a [Data Workflow](/v1/docs/data-workflow-component) component with a [Col2Array](/v1/docs/col2array-operator) operator to turn your table data into an array. Then, use the Join operator to combine all your author's names in one line, separated by semi-colons. To better help you watch the progress of your Data Workflow, add three Console operators to view the process.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it between the **dtAuthors Data Table** and **joinOutput** **H****idden** components.
2. In the Property ID field, enter **dwfJoinAuthors**.
3. In theCanvas Label Text, enter `dwfJoinAuthors`.

#### Configure the Input Operator

1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Input |
| **Component** | dtAuthors |
| **Required** | No |
| **Source** | Default |

#### Configure the Col2Array Operator

1. Drag and drop a **C****ol2Array** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Col2Array |
| **Label** | fullName Array |
| **Drop Empty** | No |
| **Path** | fullName |
| **Default Value** |  |
3. Connect the output port (right) of the **dtAuthors****I****nput** operator to the input port (left) of the **fullName Array****C****ol2Array** operator.

#### Configure the Join Operator

1. Drag and drop a **J****oin** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Join |
| **Label** | Join Authors |
| **Separator** | ; |

> [!NOTE]
> 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 **fullName Array****C****ol2Array** operator to the input port (left) of the **Join Authors****J****oin** operator.

#### Configure the Output Operator

1. Drag and drop an **O****utput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Output |
| **Component** | joinOutput |
| **Action** | value |
3. Connect the output port (right) of the **Join Authors****J****oin** operator to the input port (left) of the **joinOutput** **O****utput** operator.

#### Configure the First Console Operator

1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Console |
| **Label** | Before Array |
3. Connect the output port (right) of the **dtAuthors** **I****nput** operator to the input port (left) of the **Before Array** **C****onsole** operator.

#### Configure the Second Console Operator

1. Drag and drop another **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Console |
| **Label** | fullName Array |
3. Connect the output port (right) of the **fullName Array** **C****ol2Array** operator to the input port (left) of the **fullName Array** **C****onsole** operator.

#### Configure the Third Console Operator

1. Drag and drop the final **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| **Category** | Console |
| **Label** | Join Authors |
3. Connect the output port (right) of the **Join Authors****J****oin** operator to the input port (left) of the **Join Authors** **C****onsole** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/joinopdwfudes_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
4. Click **Save Component**.
5. Save your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/udesjoinopfinal_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

**Preview** your module in Express View and open up the DevTools Console. When you expand the Console, you'll see the progression of your Data Workflow. First, your **C****ol2Array** operator puts your colleague's full names into an array. Then, your **J****oin** operator combines those names, separating each with a semi-colon.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Join_07_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

## Overview

Use the **Join operator** to combine strings of a data array into a new array. For example, let's 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 into 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, like a comma, colon, or semi-colon.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Join_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

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](/v1/docs/data-table-component) component directly, `[object Object]` displays in the DevTools Console.

You'll find the Join operator under the [Array](/v1/docs/array-operators) group to the left of your [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

Learn more about each setting in the Join operator's 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. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Separator | This is the character or symbol you 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

For this example, you'll configure a [Data Table](/v1/docs/data-table-component) component with a list of contributing authors and the institutions where they work. Before you pass the data to a Join operator, you'll convert the table data to an array using a [Col2Array](/v1/docs/col2array-operator) operator. Then, you'll pass this data to the Join operator, separating the combined data using semi-colons.

> [!NOTE]
> These instructions assume you have a module open, saved, and with a title.

### Configure the Data Table Component

First, set up a [Data Table](/v1/docs/data-table-component) component 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. In the Property ID and Canvas Label Text fields, enter `dtAuthors` .
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 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/joinoperatordatatable_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
4. Click **Save & Close**.

### Configure the Hidden Component

Next, configure a [Hidden](/v1/docs/hidden-component) component to hold your Data Workflow's output.

1. Drag and drop a **H****idden** component onto your canvas, placing it below your **dtAuthors Data Table** component.
2. In the Property ID and Canvas Label Text fields, enter `joinOutput`.
3. Click **Save & Close**.

### Configure the Data Workflow Component

Now, it's time to set up your [Data Workflow](/v1/docs/data-workflow-component) component. Use a [Col2Array](/v1/docs/col2array-operator) operator 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 component, also add three Console operators.

1. Drag and drop a **D****ata Workflow** component onto your canvas, placing it between the **dtAuthors Data Table** component and **joinOutput** **H****idden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfJoinAuthors`.

#### Configure the Input Operator

1. Drag and drop an **I****nput** operator onto your Data Workflow canvas.
2. Configure the **I****nput** 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 **C****ol2Array** operator onto your Data Workflow canvas.
2. Configure the **C****ol2Array** 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 **dtAuthors****I****nput** operator to the input port (left) of the **fullName Array****C****ol2Array** operator.

#### Configure the Join Operator

1. Drag and drop a **J****oin** operator onto your Data Workflow canvas.
2. Configure the **J****oin** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Join |
| Label | Join Authors |
| Separator | ; |

> [!NOTE]
> 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 **fullName Array****C****ol2Array** operator to the input port (left) of the **Join Authors****J****oin** operator.

#### Configure the Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | joinOutput |
| Action | value |
3. Connect the output port (right) of the **Join Authors****J****oin** operator to the input port (left) of the **joinOutput****O****utput** operator.

#### Configure the First Console Operator

1. Drag and drop a **C****onsole** operator onto your Data Workflow canvas.
2. Configure the **C****onsole** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Before Array |
3. Connect the output port (right) of the **dtAuthors** **I****nput** operator to the input port (left) of the **Before Array** **C****onsole** operator.

#### Configure the Second Console Operator

1. Drag and drop another **C****onsole** operator onto your Data Workflow canvas.
2. Configure the **C****onsole** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | fullName Array |
3. Connect the output port (right) of the **fullName Array****C****ol2Array** operator to the input port (left) of the **fullName Array****C****onsole** operator.

#### Configure the Third Console Operator

1. Drag and drop the final **C****onsole** operator onto your Data Workflow canvas.
2. Configure the **C****onsole** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Join Authors |
3. Connect the output port (right) of the **Join Authors****J****oin** operator to the input port (left) of the **Join Authors** **C****onsole** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Join_06_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)
4. Click Save.
5. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/joinoperatorfinal_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

**Preview** your module in Express View and open up the DevTools Console. When you expand the Console, you'll see the progression of your Data Workflow. First, your **C****ol2Array** operator puts your colleague's full names into an array. Then, your **J****oin** operator combines those names, separating each with a semi-colon.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Join_07_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A30Z&se=2026-11-06T23%3A54%3A30Z&sr=c&sp=r&sig=Kay2%2BVccbCAlROklnIMumFWiFBjhZxdFBVNiXyKuEvo%3D)

## Lab

You can view this complete use case here: [https://training.unqork.io/#/form/605ce8e29c2881024aa7b383/edit](https://training.unqork.io/#/form/605ce8e29c2881024aa7b383/edit).

## Resources

- [Output operator](/v1/docs/modifying-data-workflow-operators).
- [Introduction to Data Workflow](/v1/docs/introduction-to-data-workflow)
- [Introduction to Data Workflow Operators](/v1/docs/data-workflow-operators)
- [Data Workflow component](/v1/docs/data-workflow-component)
- [Input operator](/v1/docs/input-operator)

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

The DevTools Console helps you securely store, build, test, and deploy your software.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

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 .

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.