Multi-Row Operator: Using Multiple Operators

Overview

Sometimes, you'll want to use more than one Multi-Row operator at once. This can give you a little more context when analyzing your data. Let's say you want to compare stock prices over 5 days. To do that, you'll use a Data Table to hold your stock prices on a given day. Then, you'll use a Data Workflow with 4 Multi-Row operators to create the additional data.

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

Here's how your module will look in Express View:

What You'll Learn

In this article, you'll learn how to use multiple Multi-Row operators in one Data Workflow.

What You'll Need

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

• 1 Data Table component

• 1 Hidden component

• 1 Chart component

• 1 Button component

• 1 Data Workflow component

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

• 1 Input operator

• 4 Multi-Row operators

• 1 Create Field operator

• 1 Pick operator

• 1 Output operator

• 1 Console operator

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

Configuration

Configure the Data Table Component

First, let's set up your sample data. You'll use a Data Table for that.

1.

Drag and drop a Data Table component onto your canvas.

2.

Enter dtStocks in the Label and Property Name fields.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Hidden Component

You'll use a Data Workflow to duplicate your stock prices. But first, you'll need a place to store your final data. You'll use a Hidden component for that.

1.

Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Data Table.

2.

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

3.

Click Save.

Configure the Data Workflow Component

Now it's time to add your Data Workflow. Here, you'll use an Input operator to bring in your original data. Then, you'll use 4 Multi-Row operators configured to duplicate your price data. Your first Multi-Row operator shifts your data up 1 step. The second shifts your data up 2 steps, and so on. This gives you 5 stock prices in each row of your table, each from a different date. Then, you'll add a Create Field operator to take the average between those 5 stock prices. You'll also use a Pick operator to draw out 3 pieces of data:

• Date

• Stock price

• 5-day average price

Finally, you'll use an Output operator to place that data in your Hidden component.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow below your Data Table.

2.

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

Configure the Input Operator

This operator references your original data.

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 Multi-Row Operator

This operator duplicates your price data and moves it up 1 row.

1.

Drag and drop a Multi-Row operator onto your Data Workflow canvas.

2.

Configure the Multi-Row operator's Info window as follows:

3.

Connect the output port (right) of the Input operator to the input port (left) of the Multi-Row operator.

Configure the Second Multi-Row Operator

This operator duplicates your price data and moves it up 2 rows.

1.

Drag and drop another Multi-Row operator onto your Data Workflow canvas.

2.

Configure the Multi-Row operator's Info window as follows:

3.

Connect the output port (right) of the Price 1 Multi-Row operator to the input port (left) of the Price 2 Multi-Row operator.

Configure the Third Multi-Row Operator

This operator duplicates your price data and moves it up 3 rows.

1.

Drag and drop another Multi-Row operator onto your Data Workflow canvas.

2.

Configure the Multi-Row operator's Info window as follows:

3.

Connect the output port (right) of the Price 2 Multi-Row operator to the input port (left) of the Price 3 Multi-Row operator.

Configure the Fourth Multi-Row Operator

This operator duplicates your price data and moves it up 4 rows.

1.

Drag and drop another Multi-Row operator onto your Data Workflow canvas.

2.

Configure the Multi-Row operator's Info window as follows:

3.

Connect the output port (right) of the Price 3 Multi-Row operator to the input port (left) of the Price 4 Multi-Row operator.

Configure the Console Operator

This operator lets you view your data after it's gone through the Multi-Row operators. This is optional, though it's useful for troubleshooting purposes.

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 Price 4 Multi-Row operator to the input port (left) of the Console operator.

Configure the Create Field Operator

This operator finds the average of your 5 stock prices. It then places that average in a new key of your table called priceAvg.

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 Price 4 Multi-Row operator to the input port (left) of the Create Field operator.

Configure the Pick Operator

This operator draws out your date, price, and priceAvg data.

1.

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

2.

Configure the Pick operator's Info window as follows:

3.

Connect the output port (right) of the Create Field operator to the input port (left) of the Pick operator.

Configure the Output Operator

This operator places the data from your Pick operator into your Hidden component.

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 Pick operator to the input port (left) of the Output operator.

4.

Click Save.

Configure the Chart Component

With your new data created, you're ready to display it. Your Chart component handles that. You'll configure this component to draw from the data in your Hidden component. Remember, your Hidden component holds the date, the stock price for that date, and the 5-day average stock price for that date. And you'll set the date can serve as the X-axis for both of the other data points.

1.

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

2.

Enter 5 Day Moving Avg in the Label field.

3.

Enter chartFive in the Property Name field.

4.

In the Inputs table, enter the following:

5.

Click the Formatting tab at the top of the configuration window.

6.

Enter Date in the X Axis Label field.

7.

Enter Price in the Y Axis Label (Primary) field.

8.

Set the Show Legend setting to Yes (checked).

9.

Click Save.

Configure the Button Component

Now all you need is a way to start the whole operation. You can use a Button for that.

1.

Drag and drop a Button component onto your canvas. Place your Button below your Data Table.

2.

Enter btnMultiRow in the Property ID field.

3.

Enter Start Multi-Row in the Label Text field.

4.

Select Event as the Action Type.

5.

Enter dwfMultiRowFive in the Trigger on Click field.

6.

Click Save.

7.

Save your module.

Now it's time to preview your work. Open your module in Express View and click your button. Your chart populates with the new data from your Hidden component. Now, you'll see how your average stock prices have changed over 5 days.

And here's exactly what happened with your Multi-Row operators, as seen in the DevTools Console:

You'll see that each of your rows now contains price, priceB, priceC, and priceD. This is the result of your Multi-Row operators taking your original price data and moving it up the set number of rows.

Lab

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