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