--- title: "How to: Using Multiple Multi-Row Operators" slug: "multi-row-operator-using-multiple-operators" description: "Learn to analyze stock prices over five days using Multi-Row operators in a Data Workflow, creating averages for better insights." updated: 2025-11-24T16:23:10Z published: 2025-11-25T16:08:31Z canonical: "docs.unqork.io/multi-row-operator-using-multiple-operators" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # How to: Using Multiple Multi-Row Operators UDesignerClassic Designer In this how-to guide, you'll learn how to **use multiple Multi-Row operators** to provide more context when analyzing data. Let's say you want to compare stock prices over five days. You’ll store your stock prices for a given day in a data table. Then, you'll use a Data Workflow with four Multi-Row operators to create the additional data. ## Configuration You’ll begin by configuring your data in a [Data Table](/v1/docs/data-table-component) component. Then, you’ll configure a [Data Workflow](/v1/docs/data-workflow-component) and four [Multi-Row](/v1/docs/multi-row-operator) operators to duplicate your price data. Your first Multi-Row operator shifts your data up one row. The second shifts your data up two rows, and so on. Doing so gives you five stock prices in each row of your table, each from a different date. Then, you'll take the average of those five stock prices. > [!NOTE] > These instructions assume you have a new module open, saved with a title. ### Configure the Data Table Component First, let's set up your sample data in a [Data Table](/v1/docs/data-table-component) component. 1. In the Module Builder, drag and drop a **Data Table** component onto your canvas. 2. In the **Property ID** and **Label Text** fields, enter `dtStocks`. 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(421).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 4. Click **Save Component**. ### Configure the Hidden Component Next, you'll add a [Hidden](/v1/docs/hidden-component) component to store the results of your Data Workflow. 1. Drag and drop a **Hidden** component onto your canvas, placing it below your Data Table component. 2. In the **Property ID** and **Label Text** fields, enter `multiFiveDay`. 3. Click **Save Component**. ### Configure the Data Workflow Component Now it's time to add your [Data Workflow](/v1/docs/data-workflow-component). You'll use an Input operator to bring your data into the Data Workflow and use four [Multi-Row](/v1/docs/multi-row-operator) operators configured to duplicate your price data. Then, you'll add a [Create Field](/v1/docs/create-field-operator) operator to take the average of the duplicated stock prices and use a [Pick](/v1/docs/pick-operator) operator to select the following pieces of data: - Date - Stock price - 5-day average price Lastly, you'll use an [Output](/v1/docs/output-operator) operator to output the final data into your Hidden component. 1. Drag and drop a **Data Workflow** component onto your canvas. Place your Data Workflow below your Data Table. 2. In the **Property ID** and **Label Text** fields, enter `dwfMultiRowFive`. #### Configure the Input Operator 1. Drag and drop an **Input** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Input | | Component | dtStocks | | Required | Yes | | Source | Default | #### Configure the First Multi-Row Operator This [Multi-Row](/v1/docs/multi-row-operator) operator duplicates your price data and moves it up one row. 1. Drag and drop a **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 1 | | Default | 0 | | Key Name | price | | Steps | 1 | | New Key Name | priceB | 3. Connect the output port (right) of the `dtStocks` **Input** operator to the input port (left) of the `Price 1` **Multi-Row** operator. #### Configure the Second Multi-Row Operator This Multi-Row operator duplicates your price data and moves it up two rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 2 | | Default | 0 | | Key Name | price | | Steps | 2 | | New Key Name | priceC | 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 Multi-Row operator duplicates your price data and moves it up three rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 3 | | Default | 0 | | Key Name | price | | Steps | 3 | | New Key Name | priceD | 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 Multi-Row operator duplicates your price data and moves it up four rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 4 | | Default | 0 | | Key Name | price | | Steps | 4 | | New Key Name | priceE | 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 [Console](/v1/docs/console-operator) operator lets you view your data after it passes through the Multi-Row operators. 1. Drag and drop a **Console** operator onto your Data Workflow canvas. 2. Configure the operator's Info window as follows: | Setting | Value | | --- | --- | | Category | Console | | Label | Multi-Row Result | 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 The [Create Field](/v1/docs/create-field-operator) operator calculates the average of your five stock prices. Then, it outputs that average into a new key in your table called `priceAvg`. 1. Drag and drop a **Create Field** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Formula | | Label | priceAvg | | Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) (checked) | | Field 1 | priceAvg=SUM(price,priceB,priceC,priceD,priceE)/5 | | Field 2 | | | Field 3 | | | Field 4 | | | Field 5 | | 3. Connect the output port (right) of the `Price 4` **Multi-Row** operator to the input port (left) of the `priceAvg` **Create Field** operator. #### Configure the Pick Operator This [Pick](/v1/docs/pick-operator) operator selects your `date`, `price`, and `priceAvg` data. 1. Drag and drop a **Pick** operator onto your Data Workflow canvas. 2. Configure the 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 `priceAvg` **Create Field** operator to the input port (left) of the `date,price,priceAvg` **Pick** operator. #### Configure the Output Operator The [Output](/v1/docs/output-operator) operator outputs the final result to your Hidden component. 1. Drag and drop an **Output** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Output | | Component | multiFiveDay | | Action | value | 3. Connect the output port (right) of the `date,price,priceAvg` **Pick** operator to the input port (left) of the `multiFiveDay` **Output** operator. 4. Click **Save Component**. The fully configured Data Workflow component looks like the following: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(432).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) ### Configure the Chart Component With your new data created, you'll display it in a [Chart](/v1/docs/chart-component) component. You'll configure this component to display the date, the stock price for that date, and the five-day average stock price for that date. And you'll set the date as the X-axis for both of the other data points. 1. Drag and drop a **Chart** component onto your canvas, placing it below your `multiFiveDay` **Hidden** component. 2. In the **Label Text** field, enter `5 Day Moving Avg`. 3. In the **Property ID** field, enter `chartFive`. 4. In the **Inputs** table, enter the following: | ID | Label | Chart Type | Categories | Values | | --- | --- | --- | --- | --- | | multiFiveDay | Price | line | date | price | | multiFiveDay | 5 Day Avg | line | date | priceAvg | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(433).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 5. Click the **Advanced** drop-down to configure the **Axes Configuration** section. 6. In the **Series Axes Label Text** field, enter `Date`. 7. In the **Value Axes Label Text** field, enter `Price`. 8. From the **Label Configuration** section, enable the **Show Legend** setting. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(434).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 9. Click **Save Component**. ### Configure the Button Component Lastly, add a [Button](/v1/docs/button-component) component to trigger the Data Workflow. 1. Drag and drop a **Button** component onto your canvas. Place your Button below your Data Table. 2. In the **Property ID** field, enter `btnMultiRow`. 3. In the **Label Text** field, enter `Start Multi-Row`. 4. From the **Action Type** drop-down, select **Event**. 5. From the **On Click** drop-down, select **dwfMultiRowFive**. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(435).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 6. Click **Save Component**. 7. **Save** your module. Here's how your completed module looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(436).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) Preview your module in Express View and click the **Start Multi-Row** button. Your chart populates with the results from your Data Workflow. Now, you'll see how your average stock prices have changed over five days. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(437).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) From the DevTools Console, you'll see that each of your rows now contains `price`, `priceB`, `priceC`, and `priceD`. This result occurred from your Multi-Row operators taking your original price data and moving it up the set number of rows. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_MultiRow_FiveDay_Console.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) In this how-to guide, you'll learn how to **use multiple Multi-Row operators** to provide more context when analyzing data. Let's say you want to compare stock prices over five days. You’ll store your stock prices for a given day in a data table. Then, you'll use a Data Workflow with four Multi-Row operators to create the additional data. ## Configuration You’ll begin by configuring your data in a [Data Table](/v1/docs/data-table-component) component. Then, you’ll configure a [Data Workflow](/v1/docs/data-workflow-component) and four [Multi-Row](/v1/docs/multi-row-operator) operators to duplicate your price data. Your first Multi-Row operator shifts your data up one row. The second shifts your data up two rows, and so on. Doing so gives you five stock prices in each row of your table, each from a different date. Then, you'll take the average of those five stock prices. > [!NOTE] > These instructions assume you have a new module open, saved with a title. ### Configure the Data Table Component First, let's set up your sample data in a [Data Table](/v1/docs/data-table-component) component. 1. In the Module Builder, drag and drop a **Data Table** component onto your canvas. 2. In the **Property ID** and **Label Text** fields, enter `dtStocks`. 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(438).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 4. Click **Save & Close**. ### Configure the Hidden Component Next, you'll add a [Hidden](/v1/docs/hidden-component) component to store the results of your Data Workflow. 1. Drag and drop a **Hidden** component onto your canvas, placing it below your Data Table component. 2. In the **Property ID** and **Label Text** fields, enter `multiFiveDay`. 3. Click **Save & Close**. ### Configure the Data Workflow Component Now it's time to add your [Data Workflow](/v1/docs/data-workflow-component). You'll use an Input operator to bring your data into the Data Workflow and use four [Multi-Row](/v1/docs/multi-row-operator) operators configured to duplicate your price data. Then, you'll add a [Create Field](/v1/docs/create-field-operator) operator to take the average of the duplicated stock prices and use a [Pick](/v1/docs/pick-operator) operator to select the following pieces of data: - Date - Stock price - 5-day average price Lastly, you'll use an [Output](/v1/docs/output-operator) operator to output the final data into your Hidden component. 1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your Data Table component. 2. In the **Property ID** and **Label Text** fields, enter `dwfMultiRowFive`. #### Configure the Input Operator 1. Drag and drop an **Input** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Input | | Component | dtStocks | | Required | Yes | | Source | Default | #### Configure the First Multi-Row Operator This [Multi-Row](/v1/docs/multi-row-operator) operator duplicates your price data and moves it up one row. 1. Drag and drop a **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 1 | | Default | 0 | | Key Name | price | | Steps | 1 | | New Key Name | priceB | 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 Multi-Row operator duplicates your price data and moves it up two rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 2 | | Default | 0 | | Key Name | price | | Steps | 2 | | New Key Name | priceC | 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 Multi-Row operator duplicates your price data and moves it up three rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 3 | | Default | 0 | | Key Name | price | | Steps | 3 | | New Key Name | priceD | 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 Multi-Row operator duplicates your price data and moves it up four rows. 1. Drag and drop another **Multi-Row** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Multi-Row | | Label | Price 4 | | Default | 0 | | Key Name | price | | Steps | 4 | | New Key Name | priceE | 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 [Console](/v1/docs/console-operator) operator lets you view your data after it passes through the Multi-Row operators. 1. Drag and drop a **Console** operator onto your Data Workflow canvas. 2. Configure the operator's Info window as follows: | Setting | Value | | --- | --- | | Category | Console | | Label | Multi-Row Result | 3. Connect the output port (right) of the `Price 4` **Multi-Row** operator to the input port (left) of the `Multi-Row Result` **Console** operator. #### Configure the Create Field Operator The [Create Field](/v1/docs/create-field-operator) operator calculates the average of your five stock prices. Then, it outputs that average into a new key in your table called `priceAvg`. 1. Drag and drop a **Create Field** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Formula | | Label | priceAvg | | Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) (checked) | | Field 1 | priceAvg=SUM(price,priceB,priceC,priceD,priceE)/5 | | Field 2 | | | Field 3 | | | Field 4 | | | Field 5 | | 3. Connect the output port (right) of the `Price 4` **Multi-Row** operator to the input port (left) of the `priceAvg` **Create Field** operator. #### Configure the Pick Operator This [Pick](/v1/docs/pick-operator) operator selects your `date`, `price`, and `priceAvg` data. 1. Drag and drop a **Pick** operator onto your Data Workflow canvas. 2. Configure the 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 `priceAvg` **Create Field** operator to the input port (left) of the `date,price,priceAvg` **Pick** operator. #### Configure the Output Operator The [Output](/v1/docs/output-operator) operator outputs the final result to your Hidden component. 1. Drag and drop an **Output** operator onto your Data Workflow canvas. 2. Configure the operator's **Info** window as follows: | Setting | Value | | --- | --- | | Category | Output | | Component | multiFiveDay | | Action | value | 3. Connect the output port (right) of the `date,price,priceAvg` **Pick** operator to the input port (left) of the `multiFiveDay` **Output** operator. 4. Click **Save**. The fully configured Data Workflow component looks like the following: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(439).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) ### Configure the Chart Component With your new data created, you'll display it in a [Chart](/v1/docs/chart-component) component. You'll configure this component to display the date, the stock price for that date, and the five-day average stock price for that date. And you'll set the date as the X-axis for both of the other data points. 1. Drag and drop a **Chart** component onto your canvas, placing it below your Hidden component. 2. In the **Label Text** field, enter `5 Day Moving Avg`. 3. In the **Property ID** field, enter `chartFive`. 4. In the **Inputs** table, enter the following: | ID | Label | Chart Type | Categories | Values | | --- | --- | --- | --- | --- | | multiFiveDay | Price | line | date | price | | multiFiveDay | 5 Day Avg | line | date | priceAvg | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(440).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 5. At the top right of the configuration window, click the **Formatting** tab to configure the **Axes Configuration** section. 6. In the **Series Axes Label Text** field, enter `Date`. 7. In the **Value Axes Label Text** field, enter `Price`. 8. From the **Label Configuration** section, enable the **Show Legend** setting. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(441).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 9. Click **Save**. ### Configure the Button Component Lastly, add a [Button](/v1/docs/button-component) component to trigger the Data Workflow. 1. Drag and drop a **Button** component onto your canvas, placing it below your Data Table component. 2. In the **Property ID** field, enter `btnMultiRow`. 3. In the **Label Text** field, enter `Start Multi-Row`. 4. Set the **Action Type** as **Event**. 5. From the **On Click** drop-down, enter or select `dwfMultiRowFive`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(442).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) 6. Click **Save & Close**. 7. **Save** your module. Here's how your completed module looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(443).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) Preview your module in Express View and click the **Start Multi-Row** button. Your chart populates with the results from your Data Workflow. Now, you'll see how your average stock prices have changed over five days. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(437).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) From the DevTools Console, you'll see that each of your rows now contains `price`, `priceB`, `priceC`, and `priceD`. This result occurred from your Multi-Row operators taking your original price data and moving it up the set number of rows. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dwf_MultiRow_FiveDay_Console.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A06Z&se=2026-11-08T19%3A01%3A06Z&sr=c&sp=r&sig=mKK7JE%2BCVToMNA4HL0m3nMseVq0dljwX9eA2KbDASPs%3D) Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. The DevTools Console helps you securely store, build, test, and deploy your software.