Input Operator: Dual Inputs

Overview

Some Data Workflow configurations call for more than one Input operator. Let's say you want to filter data based on your end-user's entry in another field of your module. To do that, you'd use an Input operator to pull the data from a Data Table and a second Input operator as your "argument." You can set this second Input operator to draw data from another component, like the Dropdown component.

As an example, let's set up a Data Table to hold a sample set of data about some of Unqork's favorite dogs. We'll include each dog's name, breed, and size. But instead of showing all dogs at once, you'll let your end-user choose which size dogs they'd like to see. Behind the scenes, a Data Workflow takes care of the rest, only showing select dogs to your end-user.

Here's how your module will look in the Module Builder:

And here's how your module will look in Express View:

What You'll Learn

In this article, you'll learn how to set up a Data Workflow with dual inputs.

What You Need

To set up this use case, you need:

• 1 Data Table component

• 1 Multi-Select Dropdown component

• 1 Hidden component

• 1 ViewGrid component

• 1 Data Workflow component

To set up your Data Workflow, you need:

• 2 Input operators

• 1 Filter operators

• 1 Output operator

These instructions assume you have a new module open, saved, and with a title.

Configuration

Configure the Data Table Component

First, you'll add a Data Table to hold some sample data.

1. Drag and drop a Data Table component onto your canvas.

2. Enter dtCountries in the Label and Property Name.

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

   

4. Click Save.

Configure the Multi-Select Dropdown Component

Next, you'll add a way for your end-users to choose which size dogs they see. You'll use a Multi-Select Dropdown component for that.

1. Drag and drop a Multi-Select Dropdown component onto your canvas. Place your Multi-Select Dropdown below your Data Table.

2. Enter dogSize in the Property ID.

3. Enter Select a dog size: in the Label Text.

4. Set your Option Label and Data Source Values as shown below:

   Option Label	Data Source Values
   Small	small
   Medium	medium
   Large	large

   

5. Click Save.

Configure the Hidden Component

Before you can add your Data Workflow, you'll need a place to store its output. For that, you'll use a Hidden component.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Multi-Select Dropdown component.

2. Enter dwfOutput in the Property ID and Canvas Label Text.

3. Click Save.

Configure the Data Workflow Component

Next, you'll set up the Data Workflow itself.

1. Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow component above your Hidden component.

2. Enter dwfDogs in the Canvas Label Text and Property Name.

3. Select Watch from the Trigger Type drop-down.

   

Configure the First Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.

2. Configure the Input 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 Input 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 Filter operator's Info window as follows:

   Setting	Value
   Category	Filter
   Label	Filter by Size
   Do Not Sanitize Formula
   Expression	size=_arg

3. Connect the output port (right) of the dtDogs Input operator to the input port (left) of the Filter operator.

4. Connect the output port (right) of the dogSize Input operator to the argument port (top) of the Filter operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.

2. Configure the Output operator's Info window as follows:

   Setting	Value
   Category	Output
   Component	dwfOutput
   Action	value

3. Connect the upper output port (right) of the Filter operator to the input port (left) of the Output operator.

4. Click Save.

Configure the ViewGrid Component

1. Drag and drop a ViewGrid component onto your canvas. Place your ViewGrid below your Hidden component.

2. Enter gridDogs in the Label and Property Name.

3. In the Inputs table, enter the following:

   1. ID: enter dwfOutput.

   2. Required: Yes (checked).

4. In the Display table, enter the following:

   ID	Formula	Heading
   name		Name
   breed		Breed

5. Click Save.

6. Save your module.

Now you can test out your Data Workflow. Open your module in Express View and make a selection from your Dropdown. You'll see your ViewGrid automatically update to show dogs matching your selection.

Lab

You can view this complete use case here: https://training.unqork.io/#/form/6012ee002b56d8025c32fd27/edit.