Input Operator

Overview

A static image displaying the Input operator and its Info Window.

The Input operator always serves as the start of your Data Workflow with a single output port. The Input operator lets you retrieve data from a component into your Data Workflow.

You can use an Input operator to:

  • Bring in end-user data from another component in your module.

  • Set dynamic variables in a Data Table by using the binded table setting.

For example, an Input operator lets you easily reference an end-user's name in a Text Field component. Or, retrieve an email address from an Email component. After doing so, you can use other Data Workflow operators to process those pieces of data.

You'll find the Input operator under the I/O group to the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn what an Input operator is and how to configure it in a Data Workflow.

About the Info Window

And here's a breakdown of each setting in the Info window:

Setting

Description

Component

A component holding data you bring into your Data Workflow. Here, you'll see a drop-down containing every component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. in your module. Select the component you want to reference from the drop-down list. You can also type the name of the component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. in the Component field and it filters the drop-down based on your input.

After selecting a Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module., the Component field remains editable. You can type in the Component field to define a property path or target fields nested under the selected Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module..

Your selection here displays as the operator's label.

The Data Workflow component supports using grid referencing syntax to target the Dynamic Grid, Uniform Grid, and Freeform Grid components. Grid referencing syntax supports targeting at the component, column, row, and cell level. To learn more, see the following articles in our In-Product Help: Dynamic Grid: Targeted Logic and Referencing Syntax and Uniform Grid and Freeform Grid: Logic and Referencing Syntax.

Required

When set to Yes, your Data Workflow doesn't start until a value is present in the chosen component. So, if you selected a Text Field component, the Data Workflow doesn't run if the Text Field is empty.

When set to No, the Data Workflow runs with or without a value in the chosen component.

By default, the Required drop-down is set to Yes.

Source

Sets the type of data the source component contains. To draw the exact value of the component selected earlier, you'll choose Default.

If you work with dynamic values, you'll choose Binded Table. This is useful when using dynamic values in a Data Table component. If you have dynamic values in a Data Table, select the Data Table under the Component setting. Then, select Binded Table as your Source. To see an example of configuring a Binded Table, read our Binded Table Use Case article.

By default, the Source drop-down is set to Default.

Manually-Defined Inputs

In some cases, you might want to reference an input that doesn't display in the Info window's Component drop-down. For example, the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of components in imported modules.

To reference an input that doesn't display in the Component drop-down:

1. Select your  Input operator.
2. In the operator's Info window, select any Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. from the Component drop-down. The Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. displays below the  Input operator as a label.
3. On the Data Workflow canvas, double-click the  Input operator's label. The field becomes editable.
4. Enter the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. to use as an input.
5. Click outside the field to save your manually-defined input.

Reopening the Data Workflow component might not display your manually-defined input on the canvas, though the connection still exists. Consider using the Data Workflow component's Comment field to note the input.

Adding an Input Operator

To demonstrate an Input operator, you'll use it to retrieve data from a Data Table component.

What You Need

For this configuration, you need:

To set up your Data Workflow, you need:

  • 1 Input operator

  • 1 Output operator

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

Configure the Data Table Component

First, configure a Data Table to hold some sample data.

1. In the Module Builder, drag and drop a Dropdown Component Icon Data Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter dtDogs.
3. To the left of the component's configuration window, click Data Icon Data.
4. In the data table, enter the following:
  A B C

1

name

breed

color

2

Baxter

Beagle

Brown

3

Scar

Puggle

Brown

4

Pickles

Soft-Coated Wheaten Terrier

Yellow

5

Holly

Golden Retriever

Golden

A static image displaying the Data Table component's configuration.

5. Click Save & Close.

Configure the Hidden Component

Next, a Hidden component to store the Data Workflow's output data.

1. Drag and drop a iconHidden component onto your canvas, placing it below your Dropdown Component Icon Data Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter dwfOutput.
3. Click Save & Close.

Configure the Data Workflow Component

Now, add a Data Workflow to process the data.

1. Drag and drop a Data Workflow Icon Data Workflow component onto your canvas, placing it between your Dropdown Component Icon Data Table and iconHidden components.
2. In the Canvas Label Text and Property Name fields, enter dwfDogs.

A static image displaying the Input and Output operators on the Data Workflow canvas.

Configure the 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 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 output port (right) of the  Input operator to the input port (left) of the  Output operator.
4. Click Save.

Configure the Button Component

Lastly, add a Button component to trigger the Data Workflow.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it below your Data Workflow Icon Data Workflow component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnTrigger.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field., enter Trigger Data Workflow.
4. To the left of the component's configuration window, click Actions Icon Actions.
5. Select Event as the Action Type.
6. In the On Click field, enter dwfDogs.

A static image displaying the Button component's configuration with the Event Action Type and dwfDogs On Click trigger.

7. Click Save & Close.
8. Save your module.

Your completed module looks like the following:

A static image displaying the completed configuration in the Module Builder.

Preview your module in Express View Express View is how your end-user views you 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.. Open the DevTools Console and click the Trigger Data Workflow button. Run the Angular command and expand the data: tab. You can see the dog data in both the dtDogs (your Data Workflow input) array and the dwfOutput (your Data Workflow output) array.

A static image displaying the data in the DevTools Console after clicking the Trigger Data Workflow button.

Resources