---
title: "How to: Use Dual Inputs With Input Operators"
slug: "input-operator-dual-inputs"
description: "Learn to configure a data table and filter dog breeds by size using multiple operators in UDesignerClassic for an interactive user experience."
updated: 2025-12-08T20:14:04Z
published: 2025-12-09T16:46:27Z
canonical: "docs.unqork.io/input-operator-dual-inputs"
---

> ## 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: Use Dual Inputs With Input Operators

UDesignerClassic Designer

Certain [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) configurations use multiple **operators**. For example, when filtering data based on an end-user's input in another field of your module, use one Input operator to retrieve data from a data table and a second Input operator to function as your argument. This second Input operator can be configured to extract data from an alternative component, like a [Dropdown](https://docs.unqork.io/docs/dropdown-component) component.

## Configuration

In this example, you’ll create a [Data Table](/v1/docs/data-table-component) component to store a sample dataset about some preferred dog breeds. This table will include the dog's name, breed, and size. Instead of displaying all dogs simultaneously, you’ll let your end-user select the dogs they wish to view, based on their size.

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

### Configure the Data Table Component

Begin by adding a [Data Table](/v1/docs/data-table-component) component to store your sample data.

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

| A | B | C |
| --- | --- | --- |
| name | breed | size |
| Buddy | Saint Bernard | large |
| Zoey | Chocolate Lab | medium |
| Ellie | Lhasa Apso | small |
| Millie | Corgi | small |
| Silas | Golden Retriever | medium |
| Sadie | Newfoundland | large |
| Daley | Saint Bernard | large |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(476).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
4. Click **Save Component**.

### Configure the Multi-Select Dropdown Component

Next, configure a [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) component that lets your end-user's to select an option to navigate the large list of dog data.

1. Drag and drop a **Multi-Select Dropdown** component onto your canvas, placing it below your `dtDogs` **Data Table** component.
2. In the **Property ID** field, enter `dogSize`.
3. In the **Label Text** field, enter `Select a dog size:`.
4. In the **Label** and **Values** fields, enter the following:

| # | Label | Values |
| --- | --- | --- |
| 1 | Small | small |
| 2 | Medium | medium |
| 3 | Large | large |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(477).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
5. Click **Save Component**.

### Configure the Hidden Component

Before you 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 `Select a dog size:` **Multi-Select Dropdown** component.
2. In the **Property ID** and **Label Text** fields, enter `dwfOutput`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Now configure your [Data Workflow](/v1/docs/data-workflow-component) to filter the `dogs` data by size and output the result to your Hidden component.

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

#### Configure the First 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 | Default |

#### Configure the Second Input Operator

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

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

#### Configure the Filter Operator

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

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label | Filter by Size |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D) (unchecked) |
| Expression | size=_arg |
3. Connect the output port (right) of the `dtDogs` **Input** operator to the input port (left) of the `Filter by Size` **Filter** operator.
4. Connect the output port (right) of the `dogSize` **Input** operator to the argument port (top) of the `Filter by Size` **Filter** operator.

#### 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 | dwfOutput |
| Action | value |
3. Connect the upper output port (right) of the `Filter by Size` **Filter** operator to the input port (left) of the `dwfOutput` **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(479).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
4. Click **Save Component**.

### Configure the ViewGrid Component

Next, configure a [ViewGrid](https://docs.unqork.io/docs/viewgrid-component) component to display the dogs that match your selection.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below your `dwfOutput` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `gridDogs`.
3. In the **Inputs** table, enter the following:

| Source | Required |
| --- | --- |
| dwfOutput | Yes |
4. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| name |  | Name |
| breed |  | Breed |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(481).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
5. Click **Save Component**.
6. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(482).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)

Now, preview your module in Express View and make a selection from the drop-down menu. You'll see the ViewGrid automatically update to display the list of dogs matching your selection.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UseCase_DualInputs_Express.gif?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)

Certain [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) configurations use multiple **operators**. For example, when filtering data based on an end-user's input in another field of your module, use one Input operator to retrieve data from a data table and a second Input operator to function as your argument. This second Input operator can be configured to extract data from an alternative component, like a [Dropdown](https://docs.unqork.io/docs/dropdown-component) component.

## Configuration

In this example, you’ll create a [Data Table](/v1/docs/data-table-component) component to store a sample dataset about some preferred dog breeds. This table will include the dog's name, breed, and size. Instead of displaying all dogs simultaneously, you’ll let your end-user select the dogs they wish to view, based on their size.

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

### Configure the Data Table Component

Begin by adding a [Data Table](/v1/docs/data-table-component) component to store your sample data.

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

| A | B | C |
| --- | --- | --- |
| name | breed | size |
| Buddy | Saint Bernard | large |
| Zoey | Chocolate Lab | medium |
| Ellie | Lhasa Apso | small |
| Millie | Corgi | small |
| Silas | Golden Retriever | medium |
| Sadie | Newfoundland | large |
| Daley | Saint Bernard | large |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(485).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
4. Click **Save**.

### Configure the Multi-Select Dropdown Component

Next, configure a [Multi-Select Dropdown](/v1/docs/multi-select-dropdown-component) component that lets your end-user's to select an option to navigate the large list of dog data.

1. Drag and drop a **Multi-Select Dropdown** component onto your canvas, placing it below your `dtDogs` **Data Table** component.
2. In the **Property ID** field, enter `dogSize`.
3. In the **Label Text** field, enter `Select a dog size:`.
4. In the **Option Label** and **Data Source Values** fields, enter the following:

| Option Label | Data Source Values |
| --- | --- |
| Small | small |
| Medium | medium |
| Large | large |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(487).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
5. Click **Save & Close**.

### Configure the Hidden Component

Before you 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 `Select a dog size:` **Multi-Select Dropdown** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfOutput`.
3. Click **Save**.

### Configure the Data Workflow Component

Now configure your [Data Workflow](/v1/docs/data-workflow-component) to filter the `dogs` data by size and output the result to your Hidden component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it above your `dwfOutput` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfDogs`.
3. From the **Trigger Type** drop-down, select **Watch**.

#### Configure the First 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 | Default |

#### Configure the Second Input Operator

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

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

#### Configure the Filter Operator

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

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label | Filter by Size |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D) (unchecked) |
| Expression | size=_arg |
3. Connect the output port (right) of the `dtDogs` **Input** operator to the input port (left) of the `Filter by Size` **Filter** operator.
4. Connect the output port (right) of the `dogSize` **Input** operator to the argument port (top) of the `Filter by Size` **Filter** operator.

#### 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 | dwfOutput |
| Action | value |
3. Connect the upper output port (right) of the `Filter by Size` **Filter** operator to the input port (left) of the `dwfOutput` **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(489).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
4. Click **Save**.

### Configure the ViewGrid Component

Next, configure a [ViewGrid](https://docs.unqork.io/docs/viewgrid-component) component to display the dogs that match your selection.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below your `dwfOutput` **Hidden** component.
2. In the **Label** and **Property Name** fields, enter `gridDogs`.
3. In the **Inputs** table, enter the following:

| id | Required |
| --- | --- |
| dwfOutput | Yes |
4. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| name |  | Name |
| breed |  | Breed |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(491).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)
5. Click **Save**.
6. **Save** your module.

Here's how your module looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(492).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)

Now, preview your module in Express View and make a selection from the drop-down menu. You'll see the ViewGrid automatically update to display the list of dogs matching your selection.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UseCase_DualInputs_Express.gif?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A07Z&se=2026-11-08T11%3A18%3A07Z&sr=c&sp=r&sig=S8EcN1%2BOSfLcpnD7M%2Bbg8VUlUXtad6gpoVN9kBv0Z1k%3D)

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.

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.

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 .

Deteremines how the component triggers.

Enter inputs components and actions you want the component to perform..

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.

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.