Output Operator

Estimated Reading Time:  5 minutes

Overview

You learned how to bring data into your Data Workflow with Input operators. But, to complete your workflow, you need something to happen at the other end. This is where Output operators come into play. Where the Input operator is first in line, your Output operator is last. Because the Output operator always serves as the end of a Data Workflow, it only has one port: an input.

At its most basic, the Output operator outputs data from the Data Workflow to a component of your choice. You'll see that there are only 2 settings in the Output operator: Component and Action. So, all you need to do is tell the operator which component to output to and how.

Importantly, the Output operator can do more than just transfer a piece of data to a new component. In the Actions drop-down, you'll see all that the Output operator can do. You'll probably recognize the list of actions from the Initializer and Decisions components. For instance, not only can you transfer a value to a new component, but you can also trigger an action.

You'll find the Output operator under the I/O group to the left of your canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Output operator looks like, along with its Info window:

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

Setting

Description

Component

Your output destination or the component where you want the output value pushed to. Here, you'll see a drop-down containing the Property ID of every component 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 in the Component field and it will filter the drop-down based on your input.

After selecting a Property ID, 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.

Your selection here displays as the operator's label.

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

Action

The action you want to output in your Data Workflow. The most common action is value, which outputs a value. To perform another type of action, select that specific action.

For actions such as clear, reset, visible, and disable you'll use a Create Value operator as the input. In the Create Value's expression/value field, add 'yes' or 'no' enclosed in single quotes. Then select the appropriate action in the Output operator. For a trigger output action, enter "GO" in the expression/value field.

Manually-Defined Outputs

In some cases, you might reference an output that doesn't display in the Info window's Component drop-down. For example, Property IDs of components in imported modules, or Field Tags.

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

1. Select your Output operator.
2. In the operator's Info window, select any Property ID from the Component drop-down. The Property ID displays below the Output operator as a label.
3. On the Data Workflow canvas, double-click the Output operator's label. The field becomes editable.
4. Enter the Property ID or Field Tag to use as an output.
5. Click outside the field to save your manually-defined output.

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

Adding an Output Operator

To demonstrate an Output operator, take a Data Table and transfer it to a Hidden component. You'll use the Hidden component to house your Data Workflow's output.

What You Need

To set up this use case, you need:

  • 1 Data Table component

  • 1 Hidden component

  • 1 Data Workflow component

To set up your Data Workflow, you need:

  • 1 Input operator

  • 1 Output operator

Configure the Data Table Component

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

1. Drag and drop a Data Table component onto your canvas.
2. In the Label and Property Name fields, enter dtStates.
3. In the data table, enter the following:

state

capital

California

Sacramento

New York

Albany

Texas

Austin

4. Click Save.

Configure the Hidden Component

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

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

Configure the Data Workflow Component

Next, 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. In the Canvas Label Text and Property Name fields, enter dwfStates.

Configure the Input Data 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

dtStates

Required

Yes

Source

Default

Configure the Output Data 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.

If you enter the angular command (angular.element('.unqorkio-form').scope().submission) in the DevTools Console, you'll see the data successfully transferred.

To open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software. tab:

1. 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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View.
2. Right-click anywhere on your Express View page.
3. Click Inspect. By default, the DevTools panel opens on the right side of your page.

TIP  To open the Console in Google Chrome, you can use the Ctrl + Shift + J (Windows/Linux) or Option + Command + J (Mac OS) shortcut.

4. At the top of the DevTools panel, click the Console tab.

The Console tab is a live preview of your submission data. A blue arrow to the left of a blank row at the bottom of the Console's feed indicates the Console's command line. It's here that you can enter commands to get more data details.

Changing an Output Operator's Settings

You can revisit and make changes to this operator.

1. Click the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator to open its Info Window.
4. Make changes to the operator's settings as needed.
5. Click Save.
6. Save your module.

Copying an Output Operator

You can make a copy of your operator using familiar keyboard settings. You can copy and paste an exact copy of your operator, matching all settings.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to duplicate.
4. On your keyboard, press Command + C (Mac OS) or Ctrl + C (Windows/Linux) to copy the operator.

TIP  You can copy more than one operator at a time. Hold Command or Ctrl on your keyboard and click all the operators you want to copy. Follow the rest of the steps as usual.

5. On your keyboard, press Command + V (Mac OS) or Ctrl + V (Windows/Linux) to paste the copied operator(s) to the Data Workflow canvas.
6. Click Save.
7. Save your module.

TIP  Did you know you can copy an operator and paste it into a different Data Workflow? You'll use the same steps outlined above.

Removing an Output Operator

Lastly, you can delete this operator from your Data Workflow canvas. You can also use these same steps to delete a connection between two operators.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to delete.
4. On your keyboard, press Delete.

NOTE  Once you delete this operator, make sure to connect your remaining operators. If your Data Workflow path doesn't end with an Output or Console operator, your Data Workflow won't work. So, once you delete an operator, make sure to update any remaining paths to end at an Output or Console operator.

5. Click Save.
6. Save your module.

Further Reading

To see how the Output operator performs other types of actions, visit this lab: https://training.unqork.io/#/form/5f52799ccd1b7302210a7564/edit.

This lab is simple. There is a hidden Text Field, a Button, and a Data Workflow. The Button triggers the Data Workflow. The Data Workflow outputs the Text Field to become visible. The Data Workflow's input operator is a Create Value. The Output operator has an action of visible.