Console Operator: Finding Issues in a Multi-Step Data Workflow

Overview

To illustrate debugging a Data Workflow, you'll start by creating a multi-operator workflow. To mimic a real-world issue, you'll incorrectly configure one of your operators. That way, your workflow fails, and you have the opportunity to explore the problem. To find the faulty operator, you'll use Console operators to locate the workflow break.

Below is an image of the DevTools Console before and after adding Console operators. The left side is a module that doesn't include Console operators, and the right side does. There appears to be an issue with the workflow on the image's left side. But, the issue isn't clear, and you can't tell where it lies. As you can see on the image's right side, adding Console operators makes it much clearer. You'll see that Create One, Create Two, and Create Three are functioning properly. After that, the workflow appears to fail. As you'll discover from this use case, the Aggregate operator is the next in line. This operator must be the one with the misconfiguration.

Here's how your completed use case will look like in the Module Builder.

In this particular use case, the module isn't visible in Express View. There are no dashboard or fields to populate.

What You'll Learn

In this lesson, you'll learn how to troubleshoot an issue in a multi-step Data Workflow using a Console operator.

What You Need

For this use case, you need:

  • 1 Data Table component

  • 1 Hidden component

  • 1 Data Workflow component

For your Data Workflow, you need:

  • 1 Data Input operator

  • 4 Create Field operators

  • 1 Aggregate operator

  • 1 Data Output operator

  • 5 Console operators

Configure the Data Table Component

The Data Table component will function as the input of your Data Workflow.

1. Drag and drop a Data Table component onto your canvas.
2. Enter dtExample in the Label and Property Name.
3. In the Data Table, enter the following:
index valuea valueb

1

A

D

2

B

E

3

C

F

4. Click Save.

Configure the Hidden Component

This Hidden component functions as the output of your Data Workflow.

1. Drag and drop a Hidden component onto your canvas, placing it under the dtExample Data Table.
2. Enter outPut as the Canvas Label Text and Property Name.
3. Click Save.

Configure the Data Workflow Component

After setting up your Data Workflow, you'll add all your operators correctly, except for the Aggregate operator. This misconfiguration will give you a broken Data Workflow.

1. Drag and drop a Data Workflow component onto your module, placing the component below your Data Table.
2. Enter dwfExample in the Property Name.

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

dtExample

Required

Yes

Source

Default

Configure the Create Field Data Operators

1. Drag and drop four Create Field operator's onto your Data Workflow canvas.
2. Enter the following Label and Field 1 information for each operator:
Label Field 1

Create One

createOne = "one"

Create Two

createTwo = "two"

Create Three

createThree = "three"

Create Four

createFour = "four"
3. Connect the output port (right) of the Create One Create Field operator to the input port (left) of the Create Two Create Field operator.
4. Connect the output port (right) of the Create Two Create Field operator to the input port (left) of the Create Three Create Field operator.

Don't connect any operators to the Create Four Create Field operator at this time.

Configure the Aggregate Data Operator

1. Drag and drop an Aggregate data operator onto your Data Workflow canvas. Remember, this is the operator we're setting up incorrectly.
2. Configure the Aggregate operator's Info window as follows:
Setting Value

Category

Aggregate By

Aggregation Type

Max By

Join Group key?

Yes
3. Leave the Label, Group Key, and Value Key fields empty.

The Max By setting looks at the Value Key and finds the maximum value based on the column indicated. If the Aggregate operator was set up correctly, the Value Key and Group Key would reference one of your Data Table headers: index, valuea, or valueb. Instead, you'll set up the operator to reference nothing.

4. Connect the output port (right) of the Create Three Create Field operator to the input port (left) of the Aggregate operator.
5. Connect the output port (right) of the Aggregate operator to the input port (left) of the Create Four Create Field operator.

Configure the Output Data Operator

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

Category

Output

Component

outPut

Action

value
3. Connect the output port (right) of the Create Four Create Field operator to the input port (left) of the Output operator.

If you view DevTools Console in Express View, it's unclear where the break lies in your workflow. Let's add some Console operators to find the issue.

Configure the Console Data Operators

To find the issue, add Console operators to your Data Workflow for every step. This will let you see what happens when data passes from one operator to the next.

1. Drag and drop 5 Console data operators onto the canvas.
2. Leave the default Category of Console for each operator.
3. Enter the following Label for each Console operator.
a. Create One
b. Create Two
c. Create Three
d. Aggregate
4. Connect the output port (right) of the Create One Create Field operator to the input port (left) of the Create One Console operator.
5. Connect the output port (right) of the Create Two Create Field operator to the input port (left) of the Create Two Console operator.
6. Connect the output port (right) of the Create Three Create Field operator to the input port (left) of the Create Three Console operator.
7. Connect the output port (right) of the Aggregate operator to the input port (left) of the Aggregate Console operator.
8. Connect the output port (right) of the Create Four Create Field operator to the input port (left) of the Create Four Console operator.
9. Click Save.
10. Save your module.

Now, let’s look at the Express View side of your application.

View the Console Panel

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

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.

Great job! Now you can see that Create One, Two, and Three each show 3 arrays. These arrays mean these Create Field operators are working correctly. After Create Three, you can see a circular reference error. This issue keepings information from passing through the Aggregate operator. Using Console operators, you've proved the issue lies with the Aggregate operator.

From time to time, the Console panel displays without populating correctly. If this occurs, enter angular.element('.unqorkio-form').scope().submission at the > prompt. Then, press Return or Enter. Refresh your browser and return to the Inspector panel.

Lab

The completed use case is located at: https://training.unqork.io/#/form/5d41ca11274c20002c142c8f/edit.