Gate Operator: Block Missing Data

Overview

There are times when you'll want to stop data from progressing in your application. The Gate operator is how you block data in a Data Workflow. This operator only lets data past if it meets your criteria. If the data doesn't match your criteria, the Gate operator will block the data from progressing.

Let's say you have a data set with company account names and values. You want to show the value for the name the end-user selects. You don't want to display any values that don't exist in the data set. You'll use the Gate operator to block data that doesn't exist. This prevents a circular reference error.

For more information on troubleshooting circular reference errors, refer to the Data Workflow Troubleshooting documentation here: https://academy.unqork.com/data-workflow-troubleshooting/620190.

In this use case, you'll create a Data Workflow to filter your data using the Filter and Gate operators. You'll block all values that don't exist or that are less than one. Then, you'll display the account value for the data that agrees with your criteria.

Here's how the completed use case will look in the Module Builder:

Here's how the completed use case will look in Express View, including a peek at the DevTools Console:

What You'll Learn

In this article, you'll learn how to block missing data using the Gate operator.

What You'll Need

To set up this use case, you’ll need:

• 1 Data Table component

• 1 Radio Buttons component

• 1 Button component

• 1 Number component

• 1 Data Workflow component

• 1 Initializer component

To set up your Data Workflow, you’ll need:

• 2 Input operators

• 1 Filter operator

• 1 Size operator

• 1 Gate operator

• 1 Get operator

• 4 Console operators

• 1 Output operator

Configure the Data Table Component

First, you'll set up a Data Table. You'll pass this data through your Data Workflow later on.

1.

In the Module Builder, drag and drop a Data Table component onto your canvas.

2.

Enter dtCompanies in the Label and Property Name fields.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Radio Buttons Component

Next, you'll add a Radio Buttons component. These buttons let the end-user select what they want to pass through the Data Workflow.

1.

Drag and drop the Radio Buttons component onto your canvas, placing it under your Data Table component.

2.

Enter filter in the Property ID field.

3.

Enter Filter by Company in the Label Text field.

4.

Set your Option Label and Value to Store in Submission Data as shown below:

5.

Click Save.

Configure the Button Component

You'll use a Button component to trigger your Initializer component. The Initializer will then trigger your Data Workflow. You'll set up your Initializer component later.

1.

Drag and drop a Button component onto your canvas, placing it below the Radio Buttons component.

2.

Enter btnGetAccountValue in the Property ID field.

3.

Enter Get Account Value in the Label Text field.

4.

Select Event as the Action Type.

5.

Enter initOnClick in the Trigger on Click field.

6.

Set the Disable on Invalid Forms toggle to ON.

7.

Click Save.

Configure the Number Component

Now, you'll display the account value associated with its account name. You'll add a Number component to show unblocked data.

1.

Drag and drop a Number component onto your canvas, placing it below your btnGetAccountValue Button component.

2.

Enter accountValue in the Property ID field.

3.

Enter Account Value in the Label Text field.

4.

Set the Show Thousands Separator toggle to ON.

5.

Click Save.

Configure the Initializer Component

Then you'll want to add an Initializer component. Your Initializer will run your application every time the end-user clicks the Button. That way, the application can return different results without refreshing the page.

1.

Drag and drop an Initializer component onto your canvas. Place your Initializer between the btnGetAccountValue Button and the dwfFilterWithGate Data Workflow component.

2.

Enter initOnClick in the Canvas Label Text and Property Name fields.

3.

In the Outputs table, enter the following:

4.

Click Save.

Configure the Data Workflow Component

Next you'll add your Data Workflow component. This component pulls data from your Data Table and filters it through your Filter and Gate operators. You'll see the results appear in the accountValue Number component.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow between the btnGetAccountValue Button and the accountValue Number component.

2.

Enter dwfFilterWithGate in the Canvas Label Text and Property Name fields.

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:

Configure the Second Input Operator

1.

Drag and drop another Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Filter Operator

Next, you'll add a Filter operator. When the input matches the Filter's expression, it'll go through the True output port. For this example, the input is the data from your Data Table. The expression is the end-user's Radio Button selection.

1.

Drag and drop a Filter operator onto your Data Workflow canvas.

2.

Configure the Filter operator's Info window as follows:

3.

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

4.

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

Configure the First Console Operator

You'll want to add a Console operator next. The Console shows your Data Workflow's progress after your data passes through the Filter operator. You can see this progress in the DevTools Console.

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the Console operator's Info window as follows:

3.

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

Configure the Second Console Operator

You'll want to add another Console to see if your data returns False through the Filter operator. Again, you can see this progress in the DevTools Console.

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the Console operator's Info window as follows:

3.

Connect the lower output port (right) of the Filter operator to the input port (left) of the Console operator.

Configure the Size Operator

You’ll use a Size operator to convert your data into a number value. When you enter your data into the Data Table component, it stores your data as an array. A Size operator measures the length of an array and assigns it a number value. For this module, the data holds one data set, so the size is 1. If the data doesn’t exist, the operator returns a 0. You’ll use the Size number value as the argument for your Gate operator.

1.

Drag and drop a Size operator onto your Data Workflow canvas.

2.

Configure the Size operator's Info window as follows:

3.

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

Configure the Gate Operator

Next, you'll add a Gate operator. You'll use this operator to block all values that are 0, or that don't exist. 

1.

Drag and drop a Gate operator onto your Data Workflow canvas.

2.

Configure the Gate operator's Info window as follows:

3.

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

4.

Connect the output port (right) of the Size operator to the argument port (top) of the Gate operator.

Configure the Third Console Operator

Then, you'll add another Console operator. You'll use this to see your data's progress after passing through the Gate operator.

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the Console operator's Info window as follows:

3.

Connect the output port (right) of the Gate operator to the input port (left) of the Console operator.

Configure the Get Operator

You'll add a Get operator next. At this point, your data consists of the account name and value. You only want to output the account value for the end-user to see. You'll use the Get operator to separate the account value from the data and then pass it to the output.

1.

Drag and drop a Get operator onto your Data Workflow canvas.

2.

Configure the Get operator's Info window as follows:

3.

Connect the output port (right) of the Gate operator to the input port (left) of the Get operator.

Configure the Fourth Console Operator

You'll add one more Console operator. You'll use this to see your data's progress after passing through the Get operator.

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the Console operator's Info window as follows:

3.

Connect the lower output port (right) of the Get operator to the input port (left) of the Console 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:

3.

Connect the output port (right) of the Get operator to the input port (left) of the Output operator.

4.

Click Save.

5.

Save the module.

Good work! Now that you're finished, you can preview the module in Express View. Start by opening the DevTools Console and selecting the Unqork Radio Button. When you click the Get Account Value Button you'll see the account value appear in the accountValue Number field.

In the Console, you'll see the account value passed through the Filter, Gate, and Get operators. You'll also see the Johnson & Johnson criteria filtered out.

Now, try previewing the module using the criteria that doesn't exist in the data set. Select the Other Radio Button and then click the Get Account Value Button. Now, you'll see that no value appears in the accountValue Number field.

In the Console, you'll see that while the Other Radio Button criteria passed through the Filter operator as True, it was blocked by the Gate operator.

Lab

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