---
title: "Split Field Operator"
slug: "split-field-operator"
description: "Learn how to use the Split Field operator to separate full names into first and last names in your data workflow with easy step-by-step instructions."
updated: 2025-11-11T17:48:16Z
published: 2025-11-12T14:27:26Z
canonical: "docs.unqork.io/split-field-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.

# Split Field Operator

UDesignerClassic Designer

![Split Field operator and it's Info window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SplitFieldOperator(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

The **Split Field operator** lets you separate values from one field into array values. This operator works by looking for a separator in your original data. A separator can be anything from a comma, semicolon, or underscore. You'll specify a separator in the operator's **Info** window. Then, the operator splits your original data wherever it locates that separator.

Let's say you have a list of end-user’s full names and you want to separate that data so you have first names and last names. As long as your original data contains a separator, the Split Field operator can separate the data.

You’ll find the Split Field operator under the [Table](/v1/docs/table-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

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. |
| Path/Field | This is the reference key leading to the data you want to split. For example, `[0]` references the first row in your data set. And the key `[0].name` references the column labeled name in that first row. |
| Separator | The point where you want the operator to split your data. Separators are typically a type of punctuation, but can also be numbers or a string. Common separators include: `;` (semicolon), `:` (colon), `_` (underscore), and `,` (comma). |
| New Name | A name for the new array that the Split Field operator creates. If you're working with a data table, you'll see this value as a new key in your table. |

## Adding a Split Field Operator

To see this operator in action, you'll set up a list of account details, including a column for account holder’s full names. Then, you'll use a Data Workflow with a Split Field operator to separate these names at a comma separator.

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

### Configure the Data Table Component

First, let's add your account data using a [Data Table](/v1/docs/data-table-component) component.

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

| # | A | B | C |
| --- | --- | --- | --- |
| 1 | fullName | accountValue | accountNumber |
| 2 | Fogarty, Blair | 543891 | 12345 |
| 3 | Kfoury, JJ | 1000000 | 12346 |
| 4 | Kingston, Jim | 1000000 | 12347 |
| 5 | Yates, Evan | 7432572 | 12348 |
| 6 | Miller, Charlotte | 5000000 | 12349 |
| 7 | Lipton, Amy | 5439294 | 12350 |

![Data table displaying account information including names, values, and account numbers.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dtAccounts.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
4. Click **Save Component**.

### Configure the Data Workflow Component

Now, let's add your Data Workflow component. You'll bring your data in using an Input operator and pass it to a Split Field operator to separate values in your `fullName` column at the comma.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your Data Table component.
2. In the **Property ID** field, enter `dwfSplitName`.
3. In the **Canvas Label Text** field, enter `dwfSplitName`.

#### Configure the Input Operator

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 | dtAccounts |
| Required | Yes |
| Source | Default |

#### Configure the First Console 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 |
3. Connect the output port (right) of the `dtAccounts` **Input** operator to the input port (left) of the `Before` **Console** operator.

#### Configure the Split Field Operator

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

| Setting | Value |
| --- | --- |
| Category | Split String |
| Label | Split fullName |
| Path/Field | fullName |
| Separator | , |
| New Name | separatedNames |
3. Connect the output port (right) of the `dtAccounts` **Input** operator to the input port (left) of the `Split fullName` **Split Field** operator.

#### Configure the Second Console Operator

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After |
3. Connect the output port (right) of the `Split fullName` **Split Field** operator to the input port (left) of the `After` **Console** operator.
4. Click **Save Component**.

Here's how the completed Data Workflow looks:

![Workflow canvas showing Input, Split Field, and Console operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfSplitName(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

### Configure the Button Component

Next, let's add a [Button](/v1/docs/button-component) component to trigger the entire operation.

1. Drag and drop a **Button** component onto your canvas, placing it between your Data Table and Data Workflow components.
2. In the **Property ID** field, enter `btnSplit`.
3. In the **Label Text**, enter `Split Full Names`.
4. From the **Action Type** drop-down, select **Event**.
5. In the **On Click** field, enter `dwfSplitName`.

![Button component configuration with Action Type set to Event and dwfSplitName selected from the On Click dropdown.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SplitFieldOperator btnSplit.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
6. Click **Save Component**.
7. **Save** your module.

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

![Module Builder displaying dtAccounts Table component, dwfSplitName Data Workflow component and btnSplit Button component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/split operator.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

Preview your module in Express View and open the DevTools Console. Click the **Split Full Names** button to run your Data Workflow. The **Before** Console displays your data as you entered it into your Data Table component. Your **After** Console displays each item in your original array, but if you expand those items, you'll see you have a new `separatedNames` array. The `separatedNames` array is the result of your Split Field operator after it separated the data at the comma.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Express.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Operator.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)The **Split Field operator** lets you separate values from one field into array values. This operator works by looking for a separator in your original data. A separator can be anything from a comma, semicolon, or underscore. You'll specify a separator in the operator's **Info** window. Then, the operator splits your original data wherever it locates that separator.

Let's say you have a list of end-user’s full names and you want to separate that data so you have first names and last names. As long as your original data contains a separator, the Split Field operator can separate the data.

You’ll find the Split Field operator under the [Table](/v1/docs/table-operators) group to the left of the [Data Workflow](/v1/docs/data-workflow-component) canvas.

## About the Info Window

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. |
| Path/Field | This is the reference key leading to the data you want to split. For example, `[0]` references the first row in your data set. And the key `[0].name` references the column labeled name in that first row. |
| Separator | The point where you want the operator to split your data. Separators are typically a type of punctuation, but can also be numbers or a string. Common separators include: `;` (semicolon), `:` (colon), `_` (underscore), and `,` (comma). |
| New Name | A name for the new array that the Split Field operator creates. If you're working with a data table, you'll see this value as a new key in your table. |

## Adding a Split Field Operator

To see this operator in action, you'll set up a list of account details, including a column for account holders’ full names. Then, you'll use a Data Workflow with a Split Field operator to separate these names at a comma separator.

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

### Configure the Data Table Component

First, let's add your account data using a [Data Table](/v1/docs/data-table-component) component.

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

| # | A | B | C |
| --- | --- | --- | --- |
| 1 | fullName | accountValue | accountNumber |
| 2 | Fogarty, Blair | 543891 | 12345 |
| 3 | Kfoury, JJ | 1000000 | 12346 |
| 4 | Kingston, Jim | 1000000 | 12347 |
| 5 | Yates, Evan | 7432572 | 12348 |
| 6 | Miller, Charlotte | 5000000 | 12349 |
| 7 | Lipton, Amy | 5439294 | 12350 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Dt.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
4. Click **Save**.

### Configure the Data Workflow Component

Now, let's add your Data Workflow component. You'll bring your data in using an Input operator and pass it to a Split Field operator to separate values in your `fullName` column at the comma.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your Data Table component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfSplitName`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Dwf.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

#### Configure the Input Operator

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 | dtAccounts |
| Required | Yes |
| Source | Default |

#### Configure the First Console 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 |
3. Connect the output port (right) of the `dtAccounts` **Input** operator to the input port (left) of the `Before` **Console** operator.

#### Configure the Split Field Operator

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

| Setting | Value |
| --- | --- |
| Category | Split String |
| Label | Split fullName |
| Path/Field | fullName |
| Separator | , |
| New Name | separatedNames |
3. Connect the output port (right) of the `dtAccounts` **Input** operator to the input port (left) of the `Split fullName` **Split Field** operator.

#### Configure the Second Console Operator

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After |
3. Connect the output port (right) of the `Split fullName` **Split Field** operator to the input port (left) of the `After` **Console** operator.
4. Click **Save**.

### Configure the Button Component

Next, let's add a [Button](/v1/docs/button-component) to trigger the whole operation.

1. Drag and drop a **Button** component onto your canvas, placing it between your Data Table and Data Workflow components.
2. In the **Property ID** field, enter `btnSplit`.
3. In the **Label Text** field, enter `Split Full Names`.
4. Set the **Trigger Type** as **Event**.
5. In the **Trigger on Click** field, enter `dwfSplitName`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Btn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)
6. Click **Save**.
7. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_ME.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

Preview your module in Express View and open the DevTools Console. Click the **Split Full Names** button to run your Data Workflow. The **Before** Console displays your data as you entered it into your Data Table component. Your **After** Console displays each item in your original array, but if you expand those items, you'll see you have a new `separatedNames` array. The `separatedNames` array is the result of your Split Field operator after it separated the data at the comma.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_SplitField_Express(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A07Z&se=2026-11-09T04%3A51%3A07Z&sr=c&sp=r&sig=%2BsGWVorK9zLUB%2FsZXBTJqJ5vK1UfqdQQYuuh6g6ZMGQ%3D)

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

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

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 .

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

The action performed by the button when selected.

Enter the Property ID of the component that you want to trigger on each button-click.

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.

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

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

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

Deteremines how the component triggers.

## Related

- [Introduction to Data Workflow](/introduction-to-data-workflow.md)
- [Data Workflow Component](/data-workflow-component.md)