Input Switch Operator: Creating a Comment Array

Overview

The Input Switch operator lets you configure a single Data Workflow path with 2 inputs. The operator then decides which input to use based on a condition of your choosing. A common use for this operator is to create an array of comments inside your application. To do this, you'll need a Create Table operator when you receive your first comment. Then, you'll use a standard Input operator to add new comments to those you already have. To switch between these inputs, you'll add an Input Switch operator.

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

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

What You'll Learn

In this article, you'll learn how to use an Input Switch operator to create an array of comments.

What You'll Need

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

• 1 Text Area component

• 1 Hidden component

• 1 Initializer component

• 1 Button component

• 1 Data Workflow component

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

• 3 Input operators

• 2 Create Table operators

• 2 Create Field operators

• 1 Get operator

• 1 Size operator

• 1 Input Switch operator

• 1 Append operator

• 1 Console operator

• 2 Output operators

Configuration

Configure the Text Area Component

First, you'll need a place to enter comments. You'll use a Text Area for that.

1.

In the Module Builder, drag and drop a Text Area component onto your canvas.

2.

Enter comment in the Property ID field.

3.

Enter Comment in the Label Text field.

4.

Click Save.

Configure the Initializer Component

You'll use an Initializer component to clear your Text Area after each comment. You'll reference this later, setting your Data Workflow to trigger the Initializer every time it runs.

1.

Drag and drop an Initializer component onto your canvas. Place your Initializer above your Text Area.

2.

Enter initClear in the Property ID and Canvas Label Text fields.

3.

In the Outputs table, enter the following:

4.

Click Save.

Configure the Hidden Component

Next, let's add a place to hold all the comments you receive. You'll use a Hidden component for that. Later, you'll set this as an output in your Data Workflow.

1.

Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Text Area.

2.

Enter commentsTable in the Property ID and Canvas Label Text fields.

3.

Click Save.

Configure the Data Workflow Component

Now let's set up your Data Workflow. You'll use many operators to collect your end-user's information and append it. Pay attention to the Input Switch operator in this configuration, though. Here, you'll connect a Create Table operator to fire when you receive your first comment. But you'll also connect an Input operator to reference your final commentsTable Hidden component. Then, you'll use a Size operator to determine if your Hidden component holds any comments or if it's empty. This Size operator serves as the argument for your Input Switch operator. So, if your Hidden component has a size greater than 0, the Input Switch chooses that as the input. This lets you keep all your comments in one place. And if your Hidden component is empty, the Input Switch chooses your Create Table operator instead.

In short, your Input Switch uses your Create Table operator only for the first comment. For every comment that follows, the Input Switch chooses your Hidden component.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow between your Text Area and Hidden components.

2.

Enter dwfAddComment in the Canvas Label Text and Property ID 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 First Create Table Operator

1.

Drag and drop a Create Table operator onto your Data Workflow canvas.

2.

Configure the Create Table operator's Info window as follows:

Configure the First Create Field Operator

1.

Drag and drop a Create Field operator onto your Data Workflow canvas.

2.

Configure the Create Field operator's Info window as follows:

3.

Connect the output port (right) of the comment Input operator to the argument port (top) of the Create Field operator.

4.

Connect the output port (right) of the New Comment Create Table operator to the input port (left) of the Create Field operator.

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:

Configure the Get Operator

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 currentUser Input operator to the input port (left) of the Get operator.

Configure the Second Create Field Operator

1.

Drag and drop a second Create Field operator onto your Data Workflow canvas.

2.

Configure the Create Field operator's Info window as follows:

3.

Connect the output port (right) of the Add Comment Create Field operator to the input port (left) of the Add Name Create Field operator.

4.

Connect the output port (right) of the Get operator to the argument port (top) of the Add Name Create Field operator.

Configure the Third Input Operator

This Input operator serves as the first input for your Input Switch. This operator brings in any existing comments in your array. If you don't have any comments yet, the Input Switch you'll add later chooses a different input.

1.

Drag and drop a third Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

Configure the Size Operator

This Size operator determines whether your commentsTable Hidden component holds any data. This serves as the argument for the Input Switch you'll add in a few steps.

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 output port (right) of the commentsTable Input operator to the input port (left) of the Size operator.

Configure the Second Create Table Operator

This Create Table operator serves as the second input for your Input Switch. If you don't have any existing comments in your array, the Input Switch chooses this input.

1.

Drag and drop a second Create Table operator onto your Data Workflow canvas.

2.

Configure the Create Table operator's Info window as follows:

Configure the Input Switch Operator

The Input Switch operator determines whether you have an exiting array of comments or if you're starting with your very first comment. It uses the Size operator above as an argument when choosing between your commentsTable Input or your First Comment Create Table operators.

1.

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

2.

Configure the Input Switch operator's Info window as follows:

3.

Connect the output port (right) of the commentsTable Input operator to the upper input port (left) of the Input Switch operator.

4.

Connect the output port (right) of the First Comment Create Table operator to the lower input port (left) of the Input Switch operator.

5.

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

Configure the Append Operator

1.

Drag and drop an Append operator onto your Data Workflow canvas.

2.

Configure the Append operator's Info window as follows:

3.

Connect the output port (right) of the Input Switch operator to the upper input port (left) of the Append operator.

4.

Connect the output port (right) of the Add Name Create Field operator to the lower input port (left) of the Append operator.

Configure the First 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 Append operator to the input port (left) of the commentsTable Output operator.

Configure the Second Output Operator

1.

Drag and drop a second 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 Append operator to the input port (left) of the initClear Output operator.

Configure the Console 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 Append operator to the input port (left) of the Console operator.

4.

Click Save.

Configure the Button Component

Finally, let's add a button to trigger your whole operation.

1.

Drag and drop a Button component onto your canvas. Place your button between your Text Area and Data Workflow components.

2.

Enter btnAddComment in the Property ID field.

3.

Enter Add Comment in the Label Text field.

4.

Select Event as the Action Type.

5.

Enter dwfAddComment in the Trigger on Click field.

6.

Click Save.

7.

Save your module.

Now you can test it out! Open your module in Express View and enter a comment. You'll see your comment in the DevTools Console. Now, type another comment and click Add Comment. You'll see your new comment added to the same array as your first comment. This gives you all your comments in one place that you can reference later.

Lab

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