---
title: "How to: Build an Inline ViewGrid Using Data Workflows"
slug: "use-case-inline-viewgrid-using-data-workflows"
description: "Learn to create an inline ViewGrid in Unqork, displaying submission data alongside input fields, with custom Edit and Remove buttons for easy management."
updated: 2026-03-02T16:30:01Z
published: 2026-03-03T16:54:09Z
canonical: "docs.unqork.io/use-case-inline-viewgrid-using-data-workflows"
---

> ## 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: Build an Inline ViewGrid Using Data Workflows

A dashboard is one of the most common ways to display and review submission data in Unqork. Dashboards typically retrieve submission data from a source module using a [Plug-In](/v1/docs/plug-in-component) component. Sometimes, you might want to display and review submission data in the same module as your input fields. You can achieve this task by creating an inline ViewGrid.

The term **inline** refers to setting up your [ViewGrid](/v1/docs/viewgrid-component) component on the same page as your input fields. In this how-to guide, you'll create an inline ViewGrid using [Data Workflow](/v1/docs/data-workflow-component) components instead of Plug-In components. You'll also learn how to add custom **Edit** and **Remove** buttons to your dashboard to make changes to your data.

Click on the tab below that matches your Unqork designer:

**UDesigner**

## Configuration

First, let's set up the fields where end-users can enter values to display in the dashboard. You'll use two [Text Field](/v1/docs/text-field-component) components and one [Number](/v1/docs/number-component) component to collect the end-user's first name, last name, and age.

### Configure the Text Field Components

These two [Text Field](/v1/docs/text-field-component) components are the inputs for the end-user's first and last names.

1. In the Module Builder, drag and drop two **Text Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | lastName | Last Name |
3. Click **Save Component** for each component after adding it.

### Configure the Number Component

1. Drag and drop a **Number** component onto your canvas, placing it below the `lastName` **Text Field** component.
2. In the **Property ID** field, enter `age`.
3. In the **Label Text** field, enter `Age`.
4. Click **Save Component**.

## Configure the Hidden Components

Now, let’s create the dashboard to display the data and Data Workflows to populate it. Add two [Hidden](/v1/docs/hidden-component) components to store values you'll reference in other components. The `data` **Hidden** component stores the data displayed in the ViewGrid component. The `selectedRow` **Hidden** component stores the index of the selected row in the dashboard.

1. Drag and drop two **Hidden** components onto your canvas, placing them below the `age` **Number** component.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | **Label Text** |
| --- | --- | --- |
| 1 | data | data |
| 2 | selectedRow | selectedRow |
3. Click **Save Component** for each component after adding it.

## Configure the First Data Workflow Component

Next, configure a [Data Workflow](/v1/docs/data-workflow-component) component that creates an empty data table and stores it in your `data` **Hidden** component. You’ll populate this empty data table using a second Data Workflow.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `selectedRow` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text**, enter `dwfInit`.

### Configure the Create Table Operator

This [Create Table](/v1/docs/create-table-operator) operator creates an empty data table as an array with no rows. The **Data Workflow** component you’ll set up later appends one row to the table each time an end-user submits information.

1. Drag and drop a **Create Table** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label |  |
| Create Index | No |
| Number of Rows | 0 |

### Configure the Output Operator

Here, you'll set up an [Output](/v1/docs/output-operator) operator to store the table you just created in the `data` **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 | data |
| Action | value |
3. Connect the output port (right) of the **Create Table** operator to the input port (left) of the **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(881).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save Component**.

## Configure the Initializer Component

Next, you'll set up an [Initializer](/v1/docs/initializer-component) component to trigger the `dwfInit` **Data Workflow** component on page load. Doing so ensures there's always an empty table ready to store values for the First Name, Last Name, and Age fields.

1. Drag and drop an **Initializer** component onto your canvas, placing it above the `firstName` **Text Field** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initOnLoad`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| ID | Type | Value |
| --- | --- | --- |
| dwfInit | trigger | GO |

![Configuration settings for a trigger type labeled 'New Submission' in an application.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(902).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
5. Click **Save Component**.

## Configure the Second Data Workflow Component

Next, you’ll set up a second **Data Workflow** component to achieve the following tasks:

- Create a single-row data table.
- Retrieve values entered in the First Name, Last Name, and Age fields. These values add to a single row in the data table.
- Append the single row with `firstName`, `lastName`, and `age` values to the empty data table created in the `dwfInit` **Data Workflow**.
- Set the index of the newly appended row in your table to `0`. Any subsequent rows appended to the array will have index numbers that increase by **1**.
- Send the updated table to the `data` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `data` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text**, enter `dwfAdd`.

### Configure the Create Table Operator

Add a [Create Table](/v1/docs/create-tableoperator) operator to create a data table with a single row. Doing so creates a space for the Data Workflow to add your input values. Later, you'll append this row to the existing empty table created by the `dwfInit` **Data Workflow** component.

1. Drag and drop a **Create Table** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label |  |
| Create Index | No |
| Number of Rows | 1 |

### Configure the Input Operators

These [Input](/v1/docs/input-operator) operators retrieve the values from your First Name, Last Name, and Age fields into the Data Workflow component.

1. Drag and drop three **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | firstName |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | lastName |
| Required | Yes |
| Source | Default |
4. Configure the third Input operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | age |
| Required | Yes |
| Source | Default |

### Configure the Create Field Operators

Next, you'll add three [Create Field](/v1/docs/create-field-operator) operators, one for each of your inputs. These Create Field operators add each input to the single row you created.

1. Drag and drop three **Create Field** operators onto your Data Workflow canvas.
2. Configure the first Create Field operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | firstName |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | firstName = _arg |
3. Connect the output port (right) of the **Create Table** operator to the input port (left) of the `firstName` **Create Field** operator.
4. Connect the output port (right) of the `firstName` **Input operator** to the argument port (top) of the `firstName` **Create Field** operator.
5. Configure the second Create Field operator's Info window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | lastName |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | lastName = _arg |
6. Connect the output port (right) of the `firstName` **Create Field** operator to the input port (left) of the `lastName` **Create Field** operator.
7. Connect the output port (right) of the `lastName` **Input operator** to the argument port (top) of the `lastName` **Create Field** operator.
8. Configure the third Create Field operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | age |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | age = _arg |
9. Connect the output port (right) of the `lastName` **Create Field** operator to the input port (left) of the `age` **Create Field** operator.
10. Connect the output port (right) of the `age` **Input operator** to the argument port (top) of the `age` **Create Field** operator.

### Configure the Fourth Input Operator

This [Input](/v1/docs/input-operator) operator connects the data table stored in the `data` **Hidden** component and your `dwfAdd` **Data Workflow** component.

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 | data |
| Required | Yes |
| Source | Default |

### Configure the Append Operator

Now you'll use an [Append](/v1/docs/append-operator) operator to add rows from your single-row table to the table stored in the `data` **Hidden** component.

1. Drag and drop an **Append** operator onto your Data Workflow canvas. No additional configuration of the operator is necessary.
2. Connect the output port (right) of the `data` **Input** operator to the upper input port (left) of the **Append** operator.
3. Connect the output port (right) of the `age` **Create Field** operator to the lower input port (left) of the **Append** operator.

### Configure the Create Index Operator

The [Create Index](/v1/docs/create-index-operator) operator assigns an index number to each row of your table, starting at **0**. Adding a unique identifier to each table row lets you edit or remove a specific row.

1. Drag and drop a **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label |  |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the **Append** operator to the input port (left) of the **Create Index** operator.

### Configure the Output Operator

Lastly, you’ll create an [Output](/v1/docs/output-operator) operator to send the newly appended table to the `data` **Hidden** component. Doing so overwrites the earlier version of the table stored in the Hidden component. That way, the `data` **Hidden** component always stores the latest version, with any newly appended and indexed rows.

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 | data |
| Action | value |
3. Connect the output port (right) of the **Create Index** operator to the input port (left) of the `data` **Output** operator.

![Data workflow diagram showing input, processing, and output stages for data management.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(903).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save Component**.

## Configure the Button Component

This [Button](/v1/docs/button-component) component triggers the `dwfAdd` **Data Workflow** component. After end-users enter their name and age, the `dwfAdd` **Data Workflow** component adds these rows to the table stored in the `data` **Hidden** component.

1. Drag and drop a **Button** component onto your canvas, placing it below the `age` **Number** component.
2. In the **Property ID**, enter `btnSubmit`.
3. In the **Label Text**, enter `Submit`.
4. From the **Action Type** drop-down, select **Event.**
5. From the **On Click** drop-down, select **dwfAdd**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(904).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
6. Click **Save Component**.

## Configure the ViewGrid Component

Next, set up your [ViewGrid](/v1/docs/viewgrid-component) component to display the details stored in the `data` **Hidden** component. You'll also add custom **Edit** and **Remove** buttons to edit and remove submissions from the dashboard.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below the `btnSubmit` **Button** component.
2. In the **Property ID** and **Label Text** fields, enter `gridInline`.
3. Set **Sort by Columns** to ![files](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_ON(15).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) **(ON)**.
4. In the **Inputs** table, in the **ID** column, enter `data`.
5. In the **Outputs** table, enter the following:

| ID | Mapping |
| --- | --- |
| selectedRow | firstName |
6. In the **Display** table, enter the following:

| ID | Heading | Button |
| --- | --- | --- |
| firstName | First Name | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| lastName | Last Name | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| age | Age | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| edit | Edit | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box_Blue(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (checked) |
| remove | Remove | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box_Blue(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (checked) |
7. In the **Action** field, enter `null`. Doing so removes the default Submit button from your ViewGrid component.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(905).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
8. Click **Save Component**.

## Configure the Third Data Workflow Component

Next, you’ll set up your third [Data Workflow](/v1/docs/data-workflow-component) component so you can edit a specific row in your dashboard. Later, you'll set up a [Decisions](/v1/docs/decisions-component) component to connect this Data Workflow to the **Edit** button on your dashboard.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfAdd` **Data Workflow** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfEdit`.

### Configure the Input Operators

Here, you'll set up a connection between the `dwfEdit` **Data Workflow** Component and your data and `selectedRow` **Hidden** components.

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | data |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | selectedRow |
| Required | Yes |
| Source | Default |

### Configure the Filter Operator

The [Filter](/v1/docs/filter-operator) operator lets you retrieve a specific row of data from the table stored in the `data` **Hidden** component. Connecting the `selectedRow` **Input** operator to the Filter component's argument port sets which row to retrieve.

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Expression | firstName = _arg |
3. Connect the output port (right) of the `data` **Input** operator to the input port (left) of the **Filter** operator.
4. Connect the output port (right) of the `selectedRow` **Input** operator to the argument port (top) of the **Filter** operator.

### Configure the Get Operators

These [Get](/v1/docs/get-operator) operators retrieve each value (`firstName`, `lastName`, and `age`) from the selected row of the table. In the next step, you'll output these three values to the corresponding input fields in your module.

1. Drag and drop three **Get** operators onto your Data Workflow canvas.
2. Configure the first Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | firstName |
| Path | [0].firstName |
3. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `firstName` **Get** operator.
4. Configure the second Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | lastName |
| Path | [0].lastName |
5. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `lastName` **Get** operator.
6. Configure the third Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | age |
| Path | [0].age |
7. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `age` **Get** operator.

### Configure the First Three Output Operators

These [Output](/v1/docs/output-operator) operators send the `firstName`, `lastName`, and `age` values to the module's input fields. Your end-user can then edit these fields before clicking the **Submit** button.

1. Drag and drop three **Output** operators onto your Data Workflow canvas.
2. Configure the first Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | firstName |
| Action | value |
3. Connect the output port (right) of the `firstName` **Get** operator to the input port (left) of the `firstName` **Output** operator.
4. Configure the second Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | lastName |
| Action | value |
5. Connect the output port (right) of the `lastName` **Get** operator to the input port (left) of the `lastName` **Output** operator.
6. Configure the third Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | age |
| Action | value |
7. Connect the output port (right) of the `age` **Get** operator to the input port (left) of the `age` **Output** operator.

### Configure the Fourth Output Operator

Lastly, you’ll create a final [Output](/v1/docs/output-operator) operator to send the data table back to the `data` **Hidden** component without the filtered row, overwriting the previous table. Because your end-user must click the **Submit** button again to save their edits, the `dwfAdd` **Data Workflow** adds the edited row to the data table.

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 |
| Label | data |
| Action | value |
3. Connect the lower output port (right) of the **Filter** operator to the input port (left) of the `data` **Output** operator.![Data workflow diagram showing input, filter, and output processes for user data.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(906).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save Component**.

## Configure the Fourth Data Workflow Component

Next, you’ll set up a final [Data Workflow](/v1/docs/data-workflow-component) component that lets you remove a specific row from your dashboard. You'll later set up a [Decisions](/v1/docs/decisions-component) component to connect this Data Workflow to the **Remove** button on your dashboard.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfEdit` **Data Workflow** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfRemove`.

### Configure the Input Operators

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | data |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | selectedRow |
| Required | Yes |
| Source | Default |

### Configure the Filter Operator

This [Filter](/v1/docs/filter-operator) operator lets you retrieve a specific row from the data table stored in the `data` **Hidden** component. Connecting the `selectedRow` **Input** operator to the Filter operator's argument port specifies which row to retrieve.

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Expression | firstName = _arg |
3. Connect the output port (right) of the `data` **Input** operator to the input port (left) of the **Filter** operator.
4. Connect the output port (right) of the `selectedRow` **Input** operator to the argument port (top) of the **Filter** operator.

### Configure the Output Operator

This [Output](/v1/docs/output-operator) operator sends the data table back to the `data` **Hidden** component without the filtered row, overwriting the previous table.

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 |
| Label | data |
| Action | value |
3. Connect the lower output port (right) of the **Filter** operator to the input port (left) of the `data` **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(907).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save Component**.

## Configure the Decisions Component

Lastly, you'll add a [Decisions](/v1/docs/how-to-guide-decisions-component) component that establishes the following rules:

- Clicking the dashboard’s **Edit** button triggers the `dwfEdit` **Data Workflow** component.
- Clicking the dashboard’s **Remove** button triggers the `dwfRemove` **Data Workflow** component.

1. Drag and drop a **Decisions** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleButtonHandler`.
3. Set the **Trigger Type** as **Watch**. That way, the Decisions component watches for a button-click event before executing.
4. In the **Inputs** table, enter the following:

| Source | Alias | Type | Required | Silent |
| --- | --- | --- | --- | --- |
| buttonClick |  | contains | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
5. Complete the **Outputs** table as follows:

| Source | Type |
| --- | --- |
| dwfEdit | trigger |
| dwfRemove | trigger |
6. Complete the **Micro Decisions** table as follows:

| buttonClick | dwfEdit_trigger | dwfRemove_trigger |
| --- | --- | --- |
| Edit | GO |  |
| Remove |  | GO |

![Decision-making interface showing inputs, outputs, and conditional actions for button clicks.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(908).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
7. Click **Save Component**.
8. **Save** your module.

Here’s how the completed example looks in the Module Builder:

![Form fields for user input including first name, last name, and age with submit button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(909).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

Here’s how the completed example works in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_InlineVG_01-2_Express.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

**Classic Designer**

## Configuration

First, let's set up the fields where end-users can enter values to display in the dashboard. You'll use two [Text Field](/v1/docs/text-field-component) components and one [Number](/v1/docs/number-component) component to collect the end-user's first name, last name, and age.

### Configure the Text Field Components

These two [Text Field](/v1/docs/text-field-component) components are the inputs for the end-user's first and last names.

1. In the Module Builder, drag and drop two **Text Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | lastName | Last Name |
3. Click **Save & Close** each component as you add it.

### Configure the Number Component

1. Drag and drop a [Number](https://docs.unqork.io/docs/number-component) component onto your canvas, placing it under the `lastName` **Text Field** component.
2. In the **Property ID** field, enter `age`.
3. In the **Label Text** field, enter `Age`.
4. Click **Save & Close**.

### Configure the Hidden Components

Now, let’s create the dashboard to display the data and Data Workflows to populate it. Add two [Hidden](/v1/docs/hidden-component) components to store values you'll reference in other components. The `data` **Hidden** component stores the data displayed in the ViewGrid component. The `selectedRow` **Hidden** component stores the index of the selected row in the dashboard.

1. Drag and drop two **Hidden** components onto your canvas.
2. In the **Property ID** and **Label Text**, enter the following for each component:

| # | Property ID | **Label Text** |
| --- | --- | --- |
| 1 | data | data |
| 2 | selectedRow | selectedRow |
3. Click **Save & Close** each component as you add it.

### Configure the First Data Workflow Component

Next, configure a [Data Workflow](/v1/docs/data-workflow-component) component that creates an empty data table and stores it in your `data` **Hidden** component. You’ll populate this empty data table using a second Data Workflow.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `selectedRow` **Hidden** component.
2. In the **Property ID** and **Label Text**, enter `dwfInit`.

#### Configure the Create Table Operator

This [Create Table](/v1/docs/create-table-operator) operator creates an empty data table as an array with no rows. The **Data Workflow** component you’ll set up later appends one row to the table each time an end-user submits information.

1. Drag and drop a **Create Table** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label | Create Table |
| Create Index | No |
| Number of Rows | 0 |

#### Configure the Output Operator

Here, you'll set up an [Output](/v1/docs/output-operator) operator to store the table you just created in the `data` **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 | data |
| Action | value |
3. Connect the output port (right) of the `Create Table` **Create Table** operator, to the input port (left) of the `data` **Output** operator.

![Workflow interface showing options to create a table and configure properties.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(852).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save**.

## Configure the Initializer Component

Next, you'll set up an [Initializer](/v1/docs/initializer-component) component to trigger the `dwfInit` **Data Workflow** component on page load. This ensures there's always an empty table ready to store values for the First Name, Last Name, and Age fields.

1. Drag and drop an **Initializer** component onto your canvas, placing it above the `firstName` **Text Field** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initOnLoad`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| ID | Type | Value |
| --- | --- | --- |
| dwfInit | trigger | GO |

![Interface displaying trigger types and input fields for property ID configuration.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(853).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
5. Click **Save & Close**.

## Configure the Second Data Workflow Component

Next, you’ll set up a second **Data Workflow** component to achieve the following tasks:

- Create a single-row data table.
- Retrieve values entered in the First Name, Last Name, and Age fields. These values add to a single row in the data table.
- Append the single row with `firstName`, `lastName`, and `age` values to the empty data table created in the `dwfInit` **Data Workflow**.
- Set the index of the newly appended row in your table to `0`. Any subsequent rows appended to the array will have index numbers that increase by **1**.
- Send the updated table to the `data` **Hidden** component.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `data` **Hidden** component.
2. In the **Canvas Label Text** and **Property Name**, enter `dwfAdd`.

![Data workflow diagram showing input, processing, and output steps for data management.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(873).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

### Configure the Create Table Operator

Add a [Create Table](/v1/docs/create-tableoperator) operator to create a data table with a single row. Doing so creates a space for the Data Workflow to add your input values. Later, you'll append this row to the existing empty table created by the `dwfInit` **Data Workflow** component.

1. Drag and drop a **Create Table** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Table |
| Label |  |
| Create Index | No |
| Number of Rows | 1 |

### Configure the Input Operators

These [Input](/v1/docs/input-operator) operators retrieve the values from your First Name, Last Name, and Age fields into the Data Workflow component.

1. Drag and drop three **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | firstName |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | lastName |
| Required | Yes |
| Source | Default |
4. Configure the third Input operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | age |
| Required | Yes |
| Source | Default |

### Configure the Create Field Operators

Next, you'll add three [Create Field](/v1/docs/create-field-operator) operators, one for each of your inputs. These Create Field operators add each input to the single row you created.

1. Drag and drop three **Create Field** operators onto your Data Workflow canvas.
2. Configure the first Create Field operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | firstName |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | firstName = _arg |
3. Connect the output port (right) of the **Create Table** operator to the input port (left) of the `firstName` **Create Field** operator.
4. Connect the output port (right) of the `firstName` **Input operator** to the argument port (top) of the `firstName` **Create Field** operator.
5. Configure the second Create Field operator's Info window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | lastName |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | lastName = _arg |
6. Connect the output port (right) of the `firstName` **Create Field** operator to the input port (left) of the `lastName` **Create Field** operator.
7. Connect the output port (right) of the `lastName` **Input operator** to the argument port (top) of the `lastName` **Create Field** operator.
8. Configure the third Create Field operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Formula |
| Label | age |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Field 1 | age = _arg |
9. Connect the output port (right) of the `lastName` **Create Field** operator to the input port (left) of the `age` **Create Field** operator.
10. Connect the output port (right) of the `age` **Input operator** to the argument port (top) of the `age` **Create Field** operator.

### Configure the Fourth Input Operator

This [Input](/v1/docs/input-operator) operator connects the data table stored in the `data` **Hidden** component and your `dwfAdd` **Data Workflow** component.

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 | data |
| Required | Yes |
| Source | Default |

### Configure the Append Operator

Now you'll use an [Append](/v1/docs/append-operator) operator to add rows from your single-row table to the table stored in the `data` **Hidden** component.

1. Drag and drop an **Append** operator onto your Data Workflow canvas. No additional configuration of the operator is necessary.
2. Connect the output port (right) of the `data` **Input** operator to the upper input port (left) of the **Append** operator.
3. Connect the output port (right) of the `age` **Create Field** operator to the lower input port (left) of the **Append** operator.

### Configure the Create Index Operator

The [Create Index](/v1/docs/create-index-operator) operator assigns an index number to each row of your table, starting at **0**. Adding a unique identifier to each table row lets you edit or remove a specific row.

1. Drag and drop a **Create Index** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Create Index |
| Label |  |
| Index Name | index |
| Starting Index | 0 |
| Keys |  |
3. Connect the output port (right) of the **Append** operator to the input port (left) of the **Create Index** operator.

### Configure the Output Operator

Lastly, you’ll create an [Output](/v1/docs/output-operator) operator to send the newly appended table to the `data` **Hidden** component. Doing so overwrites the earlier version of the table stored in the Hidden component. That way, the `data` **Hidden** component always stores the latest version, with any newly appended and indexed rows.

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 | data |
| Action | value |
3. Connect the output port (right) of the **Create Index** operator to the input port (left) of the `data` **Output** operator.
4. Click **Save**.

## Configure the Button Component

This [Button](/v1/docs/button-component) component triggers the `dwfAdd` **Data Workflow** component. After end-users enter their name and age, the `dwfAdd` **Data Workflow** component adds these rows to the table stored in the `data` **Hidden** component.

1. Drag and drop a **Button** component onto your canvas, placing it below the `age` **Number** component.
2. In the **Property ID**, enter `btnSubmit`.
3. In the **Label Text**, enter `Submit`.
4. Set the **Action Type** as **Event.**
5. From the **On Click** drop-down, select **dwfAdd**.

![Button configuration options including label text, actions, and user feedback settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(863).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
6. Click **Save & Close**.

## Configure the ViewGrid Component

Next, set up your [ViewGrid](/v1/docs/viewgrid-component) component to display the details stored in the `data` **Hidden** component. You'll also add custom **Edit** and **Remove** buttons to edit and remove submissions from the dashboard.

1. Drag and drop a **ViewGrid** component onto your canvas, placing it below the `btnSubmit` **Button** component.
2. In the **Label** and **Property Name**, enter `gridInline`.
3. In the **Action** field, enter `null`. Doing so removes the default Submit button from your ViewGrid component.
4. In the **Inputs** table, in the **ID** column, enter `data`.
5. In the **Outputs** table, enter the following:

| ID | Mapping |
| --- | --- |
| selectedRow | firstName |
6. In the **Display** table, enter the following:

| ID | Heading | Button |
| --- | --- | --- |
| firstName | First Name | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| lastName | Last Name | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| age | Age | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| edit | Edit | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box_Blue(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (checked) |
| remove | Remove | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box_Blue(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (checked) |
7. Set **Sort by Columns** to ![files](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_ON(15).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (**checked**).

![Configuration settings for a grid view with inputs and outputs displayed clearly.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(874).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
8. Click **Save**.

## Configure the Third Data Workflow Component

Next, you’ll set up your third [Data Workflow](/v1/docs/data-workflow-component) component so you can edit a specific row in your dashboard. Later, you'll set up a [Decisions](/v1/docs/decisions-component) component to connect this Data Workflow to the **Edit** button on your dashboard.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfAdd` **Data Workflow** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfEdit`.

![Data workflow diagram showing input, filter, and output processes for data management.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(875).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

### Configure the Input Operators

Here, you'll set up a connection between the `dwfEdit` **Data Workflow** Component and your data and `selectedRow` **Hidden** components.

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | data |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | selectedRow |
| Required | Yes |
| Source | Default |

### Configure the Filter Operator

The [Filter](/v1/docs/filter-operator) operator lets you retrieve a specific row of data from the table stored in the `data` **Hidden** component. Connecting the `selectedRow` **Input** operator to the Filter component's argument port sets which row to retrieve.

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Expression | firstName = _arg |
3. Connect the output port (right) of the `data` **Input** operator to the input port (left) of the **Filter** operator.
4. Connect the output port (right) of the `selectedRow` **Input** operator to the argument port (top) of the **Filter** operator.

### Configure the Get Operators

These [Get](/v1/docs/get-operator) operators retrieve each value (`firstName`, `lastName`, and `age`) from the selected row of the table. In the next step, you'll output these three values to the corresponding input fields in your module.

1. Drag and drop three **Get** operators onto your Data Workflow canvas.
2. Configure the first Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | firstName |
| Path | [0].firstName |
3. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `firstName` **Get** operator.
4. Configure the second Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | lastName |
| Path | [0].lastName |
5. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `lastName` **Get** operator.
6. Configure the third Get operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Get |
| Label | age |
| Path | [0].age |
7. Connect the upper output port (right) of the **Filter** operator to the input port (left) of the `age` **Get** operator.

### Configure the First Three Output Operators

These [Output](/v1/docs/output-operator) operators send the `firstName`, `lastName`, and `age` values to the module's input fields. Your end-user can then edit these fields before clicking the **Submit** button.

1. Drag and drop three **Output** operators onto your Data Workflow canvas.
2. Configure the first Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | firstName |
| Action | value |
3. Connect the output port (right) of the `firstName` **Get** operator to the input port (left) of the `firstName` **Output** operator.
4. Configure the second Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | lastName |
| Action | value |
5. Connect the output port (right) of the `lastName` **Get** operator to the input port (left) of the `lastName` **Output** operator.
6. Configure the third Output operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Label | age |
| Action | value |
7. Connect the output port (right) of the `age` **Get** operator to the input port (left) of the `age` **Output** operator.

### Configure the Fourth Output Operator

Lastly, you’ll create a final [Output](/v1/docs/output-operator) operator to send the data table back to the `data` **Hidden** component without the filtered row, overwriting the previous table. Because your end-user must click the **Submit** button again to save their edits, the `dwfAdd` **Data Workflow** adds the edited row to the data table.

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 |
| Label | data |
| Action | value |
3. Connect the lower output port (right) of the **Filter** operator to the input port (left) of the `data` **Output** operator.
4. Click **Save**.

## Configure the Fourth Data Workflow Component

Next, you’ll set up a final [Data Workflow](/v1/docs/data-workflow-component) component that lets you remove a specific row from your dashboard. You'll later set up a [Decisions](/v1/docs/decisions-component) component to connect this Data Workflow to the **Remove** button on your dashboard.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your `dwfEdit` **Data Workflow** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfRemove`.

### Configure the Input Operators

1. Drag and drop two **Input** operators onto your Data Workflow canvas.
2. Configure the first Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | data |
| Required | Yes |
| Source | Default |
3. Configure the second Input operator’s **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | selectedRow |
| Required | Yes |
| Source | Default |

### Configure the Filter Operator

This [Filter](/v1/docs/filter-operator) operator lets you retrieve a specific row from the data table stored in the `data` **Hidden** component. Connecting the `selectedRow` **Input** operator to the Filter operator's argument port specifies which row to retrieve.

1. Drag and drop a **Filter** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Filter |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D) (unchecked) |
| Expression | firstName = _arg |
3. Connect the output port (right) of the `data` **Input** operator to the input port (left) of the **Filter** operator.
4. Connect the output port (right) of the `selectedRow` **Input** operator to the argument port (top) of the **Filter** operator.

### Configure the Output Operator

This [Output](/v1/docs/output-operator) operator sends the data table back to the `data` **Hidden** component without the filtered row, overwriting the previous table.

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 |
| Label | data |
| Action | value |
3. Connect the lower output port (right) of the **Filter** operator to the input port (left) of the `data` **Output** operator.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(878).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
4. Click **Save**.

## Configure the Decisions Component

Lastly, you'll add a [Decisions](/v1/docs/how-to-guide-decisions-component) component that establishes the following rules:

- Clicking the dashboard’s **Edit** button triggers the `dwfEdit` **Data Workflow** component.
- Clicking the dashboard’s **Remove** button triggers the `dwfRemove` **Data Workflow** component.

1. Drag and drop a **Decisions** component onto your canvas, placing it below the `dwfRemove` **Data Workflow** component.
2. In the **Canvas Label Text** and **Property Name**, enter `ruleButtonHandler`.
3. From the **Trigger Type** drop-down, select **Watch**.
4. In the **Inputs** table, enter the following:

| ID | Type |
| --- | --- |
| buttonClick | contains |
5. In the **Outputs** table, enter the following:

| ID | Type |
| --- | --- |
| dwfEdit | trigger |
| dwfRemove | trigger |
6. In the **Micro Decisions** table, enter the following:

| buttonClick | dwfEdit_trigger | dwfRemove_trigger |
| --- | --- | --- |
| Edit | GO |  |
| Remove |  | GO |

![Settings interface showing inputs and outputs for ruleButtonHandler configuration.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(879).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)
7. Click **Save**.
8. **Save** your module.

Here’s how the completed example looks in the Module Builder:

![Form fields for user input including first name, last name, and age submission.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(880).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

Here’s how the completed example works in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_InlineVG_01-2_Express.gif?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A40Z&se=2026-11-07T18%3A57%3A40Z&sr=c&sp=r&sig=VR0Cx%2BnpV0NrdBMZohUFkz5LR54fCBxF1SpAkZz7SWU%3D)

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

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.