---
title: "How to: Create Binded Tables Using the Input Operator"
slug: "input-operator-binded-tables"
description: "Learn to configure binded tables and dynamic data workflows in UDesigner for managing dog information efficiently with Text Field and Data Table components."
updated: 2025-12-08T20:11:37Z
published: 2025-12-09T16:46:27Z
canonical: "docs.unqork.io/input-operator-binded-tables"
---

> ## 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: Create Binded Tables Using the Input Operator

UDesignerClassic Designer

Certain configurations use an **Input operator** to create a **binded table**. A binded table enables the use of dynamic values in a data table. For example, if you have [Text Field](/v1/docs/text-field-component) components in your module that you wish to use for updating a data table, a binded table can facilitate this process.

## Configuration

In this example, configure a [Data Table](https://docs.unqork.io/docs/data-table-component) component to store the name, breed, and color of various canines. Instead of directly populating the table, you’ll configure [Text Field](https://docs.unqork.io/docs/text-field-component) components and a [Data Workflow](https://docs.unqork.io/docs/unqorks-data-workflow-operators) to populate it.

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

### Configure the Text Field Components

Begin by adding three [Text Field](/v1/docs/text-field-component) components to capture information about each dog. Later, you’ll configure a [Data Table](/v1/docs/data-table-component) component to retrieve the information from these fields.

1. In the Module Builder, drag and drop three **Text Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | name | Name |
| 2 | breed | Breed |
| 3 | color | Color |
3. Click **Save Component** for each component as you add it.

### Configure the Data Table Component

Next, configure a [Data Table](/v1/docs/data-table-component) component to store the data for each dog entered in the Text Field components.

1. Drag and drop a **Data Table** component onto your canvas, placing it below your Text Field components.
2. In the **Property ID** field, enter `dtDogs`.
3. In the data table, enter the following:

| # | A | B | C |
| --- | --- | --- | --- |
| 1 | Name | Breed | Color |
| 2 | =name | =breed | =color |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(446).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)
4. Click **Save Component**.

### Configure the Hidden Component

Before you can add your Data Workflow, you’ll configure a [Hidden](https://docs.unqork.io/docs/hidden-component) component to store its output.

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

### Configure the Data Workflow Component

Now configure your [Data Workflow](/v1/docs/data-workflow-component) to assign values from the Text Field components to the Data Table component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it above your Hidden component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfDogs`.

#### 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 | dtDogs |
| Required | Yes |
| Source | Binded Table |

#### Configure the Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | bindedTableOutput |
| Action | Value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(448).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)
4. Click **Save Component**.

### Configure the Button Component

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

1. Drag and drop a **Button** component onto your canvas, placing it above your Data Workflow component.
2. In the **Property ID** field, enter `btnTrigger`.
3. In the **Label Text** field, enter `Trigger Data Workflow`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfDogs**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(465).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%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(450).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)

Preview your module in Express View and complete your end-user input fields. Then, click your button to trigger the Data Workflow. The Data Workflow assigns the values from your Text Field components to your Data Table component. Then, the Data Workflow outputs the result to your Hidden component.

Here's how the completed example works in Express View, including a peek at the DevTools Console:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_InputOperator_Express_02.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)

Certain configurations use an **Input operator** to create a **binded table**. A binded table enables the use of dynamic values in a data table. For example, if you have [Text Field](/v1/docs/text-field-component) components in your module that you wish to use for updating a data table, a binded table can facilitate this process.

## Configuration

In this example, configure a [Data Table](https://docs.unqork.io/docs/data-table-component) component to store the name, breed, and color of various canines. Instead of directly populating the table, you’ll configure [Text Field](https://docs.unqork.io/docs/text-field-component) components and a [Data Workflow](https://docs.unqork.io/docs/unqorks-data-workflow-operators) to populate it.

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

### Configure the Text Field Components

Begin by adding three [Text Field](/v1/docs/text-field-component) components to capture information about each dog. Later, you’ll configure a [Data Table](/v1/docs/data-table-component) component to retrieve the information from these fields.

1. In the Module Builder, drag and drop three **Text Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | name | Name |
| 2 | breed | Breed |
| 3 | color | Color |
3. Click **Save & Close** for each component as you add it.

### Configure the Data Table Component

Next, configure a [Data Table](/v1/docs/data-table-component) component to store the data for each dog entered in the Text Field components.

1. Drag and drop a **Data Table** component onto your canvas, placing it below your Text Field components.
2. In the **Label** and **Property Name** fields, enter `dtDogs`.
3. In the data table, enter the following:

| # | A | B | C |
| --- | --- | --- | --- |
| 1 | Name | Breed | Color |
| 2 | =name | =breed | =color |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(459).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)
4. Click **Save**.

### Configure the Hidden Component

Before you can add your Data Workflow, you’ll configure a [Hidden](https://docs.unqork.io/docs/hidden-component) component to store its output.

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

### Configure the Data Workflow Component

Now configure your [Data Workflow](/v1/docs/data-workflow-component) to assign values from the Text Field components to the Data Table component.

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

#### 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 | dtDogs |
| Required | Yes |
| Source | Binded Table |

#### Configure the Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | bindedTableOutput |
| Action | Value |
3. Connect the output port (right) of the **Input** operator to the input port (left) of the **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(455).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)
4. Click **Save**.

### Configure the Button Component

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

1. Drag and drop a **Button** component onto your canvas, placing it above your Data Workflow component.
2. In the **Property ID** field, enter `btnTrigger`.
3. In the **Label Text** field, enter `Trigger Data Workflow`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfDogs**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(456).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%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(457).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)

Preview your module in Express View and complete your end-user input fields. Then, click your button to trigger the Data Workflow. The Data Workflow assigns the values from your Text Field components to your Data Table component. Then, the Data Workflow outputs the result to your Hidden component.

Here's how the completed example works in Express View, including a peek at the DevTools Console:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_InputOperator_Express_02.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A09Z&se=2026-11-09T17%3A59%3A09Z&sr=c&sp=r&sig=6kk9PuuFWfQluh%2FrW0fJwhV1NwFC2CupRi%2FjEK%2Fv5Z0%3D)

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

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

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 .

Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others.

The action performed by the button when selected.

DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.

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.

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.

The Unqork front-end application framework that delivers Creator-built applications to end-users. Express is the layer end-users interact with—the published forms, screens, and navigation built in the Module Builder. Express is distinct from Express View, which is a Creator-facing preview tool in the IDE.

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.