Multi-Row Operator

Overview

The Multi-Row operator duplicates a table column and shifts it to another row in the same table. You can shift data up or down in your table depending on your needs. First, you set the number of rows you want your data shifted and a new key name for the data. Then, the operator takes care of the rest.

This operator is useful if you want to compare changes in your data over time. Let's say you're tracking your company's stock prices and want to compare the changes over a number of days. You can use the Multi-Row operator to generate that data.

You’ll find the Multi-Row operator under the Table group at the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Multi-Row operator looks like, along with its Info window:

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

Setting

Description

Category

Grayed out and non-adjustable setting indicating the operation type.

Label

The name applied to the operator. This label displays within the workflow. Labels should be user-friendly and well associated with the role of the operator.

Default

When shifting data, there is inevitably an empty key. This drop-down determines what to use in that empty key.

By default, this is set to 0.

Key Name

The key/value pair to duplicate and shift.

Steps

Sets the number of rows to shift the data. You can input a positive or negative number here. A positive number moves data up. A negative number moves data down.

New Key Name

Sets the name for the new key where your shifted data will be held. A new name is required so you don't have 2 keys with the same name.

Adding a Multi-Row Operator

To see this operator in action, let's look at the example from above. Say you want to compare your company's stock prices day over day. The first step is to create a set of sample data including:

  • Company Name

  • Stock Price

  • Date

Then, you use a Data Workflow with a Multi-Row operator to duplicate that data and shift it down one row. This places your current stock prices next to the stock price for the previous day. You can then take the average of those 2 prices. To go a step further, you can also display this data in a chart.

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

And here's how the completed use case looks in Express View:

What You Need

To set up this use case, you 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 need:

  • 1 Input operator

  • 1 Multi-Row operator

  • 1 Create Field operator

  • 1 Pick operator

  • 1 Output operator

  • 1 Console operator

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

Configure the Data Table Component

First, set up your sample data in a Data Table.

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:

stock

price

date

ABC

54

2021-07-01

ABC

65

2021-07-02

ABC

67

2021-07-03

ABC

78

2021-07-04

ABC

99

2021-07-05

ABC

87

2021-07-06

ABC

45

2021-07-07

ABC

32

2021-07-08

ABC

12

2021-07-09

ABC

12

2021-07-10

ABC

12

2021-07-11

ABC

87

2021-07-12

ABC

65

2021-07-13

ABC

54

2021-07-14

ABC

43

2021-07-15

ABC

55

2021-07-16

ABC

66

2021-07-17

ABC

77

2021-07-18

ABC

88

2021-07-19

4. Click Save.

Configure the Hidden Component

Before you can duplicate your stock prices using a Data Workflow, you need a place to store your final data. So, add a Hidden component next.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Data Table.
2. Enter multiOutput 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 use an Input operator to bring in your original data. Then, use a Multi-Row operator configured to duplicate your price data. Set this operator to shift your data up 1 step or row. Next, you use a Create Field operator to take the average between your 2 stock prices. A Pick operator in this Data Workflow also draws out 3 pieces of data:

  • Date

  • Stock price

  • 2-day average price

Finally, an Output operator places 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:

Setting

Value

Category

Input

Component

dtStocks

Required

Yes

Source

Default

Configure the 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:

Setting

Value

Category

Multi-Row

Label

Price

Default

0

Key Name

price

Steps

1

New Key Name

nextDayPrice

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

Configure the Console Operator

This operator lets you view your data after it's gone through the Multi-Row operator. 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:

Setting

Value

Category

Console

Label

Multi-Row Result

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

Configure the Create Field Operator

This operator finds the average of your 2 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:

Setting

Value

Category

Formula

Label

priceAvg

Do Not Sanitize Formula

Yes (checked)

Field 1

priceAvg=SUM(price,nextDayPrice)/2

Field 2

 

Field 3

 

Field 4

 

Field 5

 

3. Connect the output port (right) of the 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:

Setting

Value

Category

Pick

Label

date,price,priceAvg

Pick Keys

date,price,priceAvg

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:

Setting

Value

Category

Output

Component

multiOutput

Action

value

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. So, add a Chart component to display the data in your Hidden component. Remember, your Hidden component holds the date, the stock price for that date, and the 2-day average stock price for that date. So, 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 2 Day Moving Avg in the Label field.
3. Enter chartAverage in the Property Name field.
4. In the Inputs table, enter the following:
ID Label Chart Type Categories Values

multiOutput

Price

line

date

price

multiOutput

2 Day Avg

line

date

priceAvg

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 that you need is a way to start the whole operation. So, add a Button component to handle 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 dwfMultiRow in the Trigger on Click field.

6. Click Save.
7. Save your module.

Now let's check your work. Open your module in Express View and click your button. Your chart populates with the data in your Hidden component. So, you see how your average stock prices have changed over 2 days.

And if you open the DevTools Console, you see exactly what happened with your Multi-Row operator:

Here, you can see that each row of your data now contains nextDayPrice. This is the result of your Multi-Row operator taking your original price data and moving it up a row.

Changing a Multi-Row 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 a Multi-Row 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 a Multi-Row 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.

Lab

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