---
title: "How to: Dynamically Add and Reference Values Using the Create Field Operator"
slug: "create-field-operator-dynamically-adding-referencing-values"
updated: 2025-12-23T15:53:56Z
published: 2025-12-23T15:53:56Z
canonical: "docs.unqork.io/create-field-operator-dynamically-adding-referencing-values"
---

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

# How to: Dynamically Add and Reference Values Using the Create Field Operator

UDesignerClassic Designer

In this how-to guide, you’ll explore a couple of expressions you can use in the **Create Field operator**. The first expression adds key/value pairs with a dynamically-populated value using the component’s argument port. You'll set up a [Number](/v1/docs/number-component) component where you can enter a sample annual income. Then, the [Create Field](/v1/docs/create-field-operator) operator adds that value to a table.

With the second expression, you'll learn to reference and add values based on other fields. The Create Field operator accepts calculations as part of the key/value expression. So, you can add a monthly income value by dividing the annual income value by **12**.

## Configuration

In this how-to guide, you'll learn to use the Create Field operator to dynamically add key/value pairs based on your end-user's input. And, add key/value pairs using calculations that reference other fields.

### Configure the Data Table Component

First, configure a [Data Table](/v1/docs/data-table-component) component to add your key/value pairs.

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

| name | age |
| --- | --- |
| Veronika | 37 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(578).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
4. Click **Save Component**.

### Configure the Number Component

Next, add a [Number](/v1/docs/number-component) component so an end-user can enter a sample annual income.

1. Drag and drop a **Number** component onto your canvas, placing it below the `dtTable` **Data Table** component.
2. In the **Property ID** field, enter `income`.
3. In the **Label Text** field, enter `Annual Pre-Tax Income (USD)`.
4. Click **Save Component**.

### Configure the Data Workflow Component

Next, you’ll set up your [Data Workflow](/v1/docs/data-workflow-component) and configure the [Create Field](/v1/docs/create-field-operator) operator. You'll add two key/value pairs to the single row (object) in your table (array).

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `income` **Number** component.
2. In the **Property ID** and **Label Text** fields, enter `dwfCreateField`.

#### Configure the Input Operators

Begin by connecting your [Data Table](/v1/docs/data-table-component) and [Number](/v1/docs/number-component) component to your Data Workflow. You'll make this connection using two [Input](/v1/docs/input-operator) operators.

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtTable |
| Required | Yes |
| Source | Default |
3. Configure the second **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | income |
| Required | Yes |
| Source | Default |

#### Configure the Create Field Operator

Next, set up the [Create Field](/v1/docs/create-field-operator) operator to add two key/value pairs to the row (object) in your table (array). Notice that the **Field 1** expression includes the term `_arg`. This value is an alias for the value passing through the operator's argument port. Using `_arg` lets you dynamically add value, instead of directly defining it.

The **Field 2** expression adds the `incomeMonthly` key. The expression you'll use is `incomeMonthly=incomeAnnual/12`.

These are two useful expressions for adding values without explicitly defining them.

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

| Setting | Value |
| --- | --- |
| Category | Create Field |
| Label | _arg |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (checked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (unchecked) |
| Field 1 | incomeAnnual=_arg |
| Field 2 | incomeMonthly=incomeAnnual/12 |
3. Connect the output port (right) of the `dtTable` **Input** operator to the input port (left) of the **Create Field** operator.
4. Connect the output port (right) of the `income` **Input** operator to the argument port (top) of the **Create Field** operator.

#### Configure the Console Operators

Now, to configure two [Console](/v1/docs/console-operator) operators so you can view the data before and after your Create Field operator.

> Notice that the Create Field operator only outputs to a Console operator. When creating applications, you might also want to use a dedicated [Output](/v1/docs/output-operator) operator. Then, you can connect that Output operator to a [Hidden](/v1/docs/hidden-component) component. That way, you can store the final table and reference it elsewhere in your application.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Before Create Field |
3. Configure the second **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After Create Field |
4. Connect the output port (right) of the `dtTable` **Input** operator to the input port (left) of this first **Console** operator.
5. Connect the output port (right) of the **Create Field** operator to the input port (left) of this second **Console** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(579).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
6. Click **Save Component**.

### Configure the Button Component

Lastly, add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below your Data Workflow.
2. In the **Property ID** field, enter `btnRunDWF`.
3. In the **Label Text** field, enter `Run Create Field`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfCreateField**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(580).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
6. Click **Save Component**.
7. **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/image(581).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)

Preview your module in Express View and open the DevTools Console. Enter a value in the **Annual Pre-Tax Income (USD)** field, then click the **Run Create Field** button to see the results.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp_dwfCreateUpdate_29_CFBexpress_01.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)

In this how-to guide, you’ll explore a couple of expressions you can use in the **Create Field operator**. The first expression adds key/value pairs with a dynamically-populated value using the component’s argument port. You'll set up a [Number](/v1/docs/number-component) component where you can enter a sample annual income. Then, the [Create Field](/v1/docs/create-field-operator) operator adds that value to a table.

With the second expression, you'll learn to reference and add values based on other fields. The Create Field operator accepts calculations as part of the key/value expression. So, you can add a monthly income value by dividing the annual income value by **12**.

## Configuration

In this how-to guide, you'll learn to use the Create Field operator to dynamically add key/value pairs based on your end-user's input. And, add key/value pairs using calculations that reference other fields.

### Configure the Data Table Component

First, configure a [Data Table](/v1/docs/data-table-component) component to add your key/value pairs.

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

| name | age |
| --- | --- |
| Veronika | 37 |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(584).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
4. Click **Save & Close**.

### Configure the Number Component

Next, add a [Number](/v1/docs/number-component) component so an end-user can enter a sample annual income.

1. Drag and drop a **Number** component onto your canvas, placing it below the `dtTable` **Data Table** component.
2. In the **Property ID** field, enter `income`.
3. In the **Label Text** field, enter `Annual Pre-Tax Income (USD)`.
4. Click **Save & Close**.

### Configure the Data Workflow Component

Next, you’ll set up your [Data Workflow](/v1/docs/data-workflow-component) and configure the [Create Field](/v1/docs/create-field-operator) operator. You'll add two key/value pairs to the single row (object) in your table (array).

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

#### Configure the Input Operators

Begin by connecting your [Data Table](/v1/docs/data-table-component) and [Number](/v1/docs/number-component) component to your Data Workflow. You'll make this connection using two [Input](/v1/docs/input-operator) operators.

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtTable |
| Required | Yes |
| Source | Default |
3. Configure the second **Input** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | income |
| Required | Yes |
| Source | Default |

#### Configure the Create Field Operator

Next, set up the [Create Field](/v1/docs/create-field-operator) operator to add two key/value pairs to the row (object) in your table (array). Notice that the **Field 1** expression includes the term `_arg`. This value is an alias for the value passing through the operator's argument port. Using `_arg` lets you dynamically add value, instead of directly defining it.

The **Field 2** expression adds the `incomeMonthly` key. The expression you'll use is `incomeMonthly=incomeAnnual/12`.

These are two useful expressions for adding values without explicitly defining them.

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

| Setting | Value |
| --- | --- |
| Category | Create Field |
| Label | _arg |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (checked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D) (unchecked) |
| Field 1 | incomeAnnual=_arg |
| Field 2 | incomeMonthly=incomeAnnual/12 |
3. Connect the output port (right) of the `dtTable` **Input** operator to the input port (left) of the **Create Field** operator.
4. Connect the output port (right) of the `income` **Input** operator to the argument port (top) of the **Create Field** operator.

#### Configure the Console Operators

Now, to configure two [Console](/v1/docs/console-operator) operators so you can view the data before and after your Create Field operator.

> Notice that the Create Field operator only outputs to a Console operator. When creating applications, you might also want to use a dedicated [Output](/v1/docs/output-operator) operator. Then, you can connect that Output operator to a [Hidden](/v1/docs/hidden-component) component. That way, you can store the final table and reference it elsewhere in your application.

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Before Create Field |
3. Configure the second **Console** operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | After Create Field |
4. Connect the output port (right) of the `dtTable` **Input** operator to the input port (left) of this first **Console** operator.
5. Connect the output port (right) of the **Create Field** operator to the input port (left) of this second **Console** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(585).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
6. Click **Save**.

### Configure the Button Component

Lastly, add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below your Data Workflow.
2. In the **Property ID** field, enter `btnRunDWF`.
3. In the **Label Text** field, enter `Run Create Field`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfCreateField**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(586).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)
6. Click **Save & Close**.
7. **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/image(587).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)

Preview your module in Express View and open the DevTools Console. Enter a value in the **Annual Pre-Tax Income (USD)** field, then click the **Run Create Field** button to see the results.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/assoclp_dwfCreateUpdate_29_CFBexpress_01.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A41Z&se=2026-11-07T18%3A57%3A41Z&sr=c&sp=r&sig=zTskOG4QAEEK7nAylWezYQ8xYt9Tf6q4X2%2B4EmPegWw%3D)

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.

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.

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.

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

In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module.

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.