---
title: "How to: Build a Dashboard With a View Action"
slug: "use-case-building-a-dashboard-with-a-view-action"
description: "Learn to customize your dashboard with a View button, allowing users to access full submission data easily. Follow our step-by-step guide!"
updated: 2025-11-24T14:58:09Z
published: 2025-11-25T16:08:31Z
canonical: "docs.unqork.io/use-case-building-a-dashboard-with-a-view-action"
---

> ## 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 a Dashboard With a View Action

UDesignerClassic Designer

A dashboard, by nature, only displays selected data points from a submission. But some end-user's might need more information. One of the easiest ways to customize your dashboard is with buttons. For example, a **View** button can let your end-users see an entire submission in its source module. When configured, each submission in the dashboard will have a **View** button to the right of it. If your end-user clicks on the button, they'll see the submission data in the source module.

## Configuration

In this article, you'll learn how to build a simple dashboard that includes a **View** button. Remember, for a dashboard to have any function, it needs submission data from a source module.

To build this dashboard, you'll need:

- 1 [Panel](/v1/docs/panel-component) component
- 1 [Initializer](/v1/docs/initializer-component) component
- 2 [Hidden](/v1/docs/hidden-component) components
- 1 [Plug-In](/v1/docs/plug-in-component) component
- 1 [ViewGrid](/v1/docs/viewgrid-component) component
- 1 [Decisions](/v1/docs/decisions-component) component

> These instructions assume that you have an open module saved with a title.

### Configure the Panel Component

First, let's add a [Panel](https://docs.unqork.io/docs/panel-component?highlight=panel%20component) component that acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelDashboard`.
3. Click **Save Component**.

### Configure the Initializer Component

Next, let's add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component that triggers the Plug-In component that you'll set up later.

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

| # | Property ID | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(263).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
5. Click **Save Component**.

### Configure the First Hidden Component

Now, let's add the first [Hidden](https://docs.unqork.io/docs/hidden-component?highlight=hidden%20component) component to store the module ID of your source or submission module. You can retrieve the module ID from the source module’s hyperlink as follows: [https://training.unqork.io/#/form/**5eb01aa6811bf80215fd706b**/edit](https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit).

1. Drag and drop a **Hidden** component inside the Panel component, placing it below the Initializer component.
2. In the **Property ID** and **Label Text** fields, enter **moduleId**.
3. In the **Default Value** field, enter `5eb01aa6811bf80215fd706b`. This is the source’s ID. If you’re using a different source module, please enter the module ID of your source module here.
4. Click **Save Component**.

### Configure the Plug-In Component

Next, let's add a [Plug-In](https://docs.unqork.io/docs/plug-in-component?highlight=plug) component and configure an API to retrieve submission data to display on the dashboard.

1. Drag and drop a **Plug-In** component inside the Panel compoent, placing it below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Label Text** fields, enter `pluginGetSubmissions`.
3. For the **Trigger Type** field, select **Manual**.
4. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,middleName,lastName,email,dateOfBirth' | fields |

> The first row references the module ID stored in the `moduleId` **Hidden** component. The second row shows which source module fields you're retrieving for the dashboard. Here, you'll retrieve the `firstName`, `middleName`, `lastName`, `email`, and `dateOfBirth` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values in Unqork.
5. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The **Data Source URL** field autopopulates with `/fbu/uapi/system/GetSubmissions`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(282).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
6. Click **Save Component**.

### Configure the Second Hidden Component

This Hidden component stores the submission IDs from the source module.

1. Drag and drop a **Hidden** component inside the Panel component, placing it below your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `submissionId`.
3. Click **Save Component**.

### Configure the ViewGrid Component

Next, let's configure a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard. Notice how the **Action** and **Event** settings create the View button.

1. Drag and drop a **ViewGrid** component inside the Panel component, placing it below the `submissionId` **Hidden** component.
2. In the **Property ID** field, enter `gridView`.
3. In the **Label Text** field, enter `View Grid`.
4. In the **Action** and **Event** fields, enter `View`.
5. In the **Inputs** table, enter the following:

| Source | Required |
| --- | --- |
| pluginGetSubmissions | Yes |
6. In the **Outputs** table, enter the following:

| Source | Mapping |
| --- | --- |
| submissionId | id |
7. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| firstName |  | First Name |
| middleName |  | Middle Name |
| lastName |  | Last Name |
| email |  | Email |
| dateOfBirth | =MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY') | Date of Birth |

> [!NOTE]
> The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(289).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
8. Click **Save Component**.

### Configure the Decisions Component

Next, let's add a [Decisions](/v1/docs/decisions-component) component to create the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component inside the Panel component, placing it below your ViewGrid component.
2. In the **Property ID** and **Label Text** fields, enter `ruleButtons`.
3. In the **Inputs** table, enter the following:

| Source | Type | Required | Silent |
| --- | --- | --- | --- |
| buttonClick | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) |
| moduleId | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |
| submissionId | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |

> Every row in the Inputs table gets an associated column in the Conditionals table. If an input does not have a value in its Conditionals column, Unqork sets it to silent. In the next steps, you won't add values to the `moduleId` and `submissionId` columns. You'll only be using these inputs in the `panelDashboard_pageOpen` decision. So, you can mark these values as silent, or let Unqork do it for you.
4. In the **Outputs** table, enter the following:

| Source | Type |
| --- | --- |
| panelDashboard | pageOpen |
5. In the **Conditionals** table, enter the following:

| buttonClick | panelDashboard_pageOpen |
| --- | --- |
| View | concatenate(‘/#/display/’,moduleId,’/’,submissionId,’/’,moduleId) |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(290).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
6. Click **Save Component**.
7. **Save** your module.

Here's how your completed dashboard looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(291).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)

Here's how your completed dashboard looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboards_action_button_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)

A dashboard, by nature, only displays selected data points from a submission. But some end-user's might need more information. One of the easiest ways to customize your dashboard is with buttons. For example, a **View** button can let your end-users see an entire submission in its source module. When configured, each submission in the dashboard will have a **View** button to the right of it. If your end-user clicks on the button, they'll see the submission data in the source module.

## Configuration

In this article, you'll learn how to build a simple dashboard that includes a **View** button. Remember, for a dashboard to have any function, it needs submission data from a source module.

To build this dashboard, you'll need:

- 1 [Panel](/v1/docs/panel-component) component
- 1 [Initializer](/v1/docs/initializer-component) component
- 2 [Hidden](/v1/docs/hidden-component) components
- 1 [Plug-In](/v1/docs/plug-in-component) component
- 1 [ViewGrid](/v1/docs/viewgrid-component) component
- 1 [Decisions](/v1/docs/decisions-component) component

> These instructions assume that you have an open module saved with a title.

### Configure the Panel Component

First, let's add a [Panel](https://docs.unqork.io/docs/panel-component?highlight=panel%20component) component that acts as a container for the components that follow.

1. In the Module Builder, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelDashboard`.
3. Click **Save & Close**.

### Configure the Initializer Component

Next, let's add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component that triggers the Plug-In component that you'll set up later.

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

| Property ID | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(309).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
5. Click **Save & Close**.

### Configure the First Hidden Component

Now, let's add the first [Hidden](https://docs.unqork.io/docs/hidden-component?highlight=hidden%20component) component to store the module ID of your source or submission module. You can retrieve the module ID from the source module’s hyperlink as follows: [https://training.unqork.io/#/form/**5eb01aa6811bf80215fd706b**/edit](https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.).

1. Drag and drop a **Hidden** component inside the Panel component, placing it below your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb01aa6811bf80215fd706b`. This is the source module’s module ID. If you're using your own source module, please enter the module ID of your source module here.
4. Click **Save & Close**.

### Configure the Plug-In Component

Next, let's add a [Plug-In](https://docs.unqork.io/docs/plug-in-component?highlight=plug) component and configure an API to retrieve submission data to display on the dashboard.

1. Drag and drop a **Plug-In** component onto your canvas. Place your Plug-In below the moduleId Hidden component.
2. In the **Property ID** and **Label Text** fields, enter `pluginGetSubmissions`.
3. For the **Trigger Type** field, select **Manual**.
4. Complete the **Inputs** table as follows:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,middleName,lastName,email,dateOfBirth' | fields |

> The first row references the module ID stored in the `moduleId` **Hidden** component. The second row shows which source module fields you're retrieving for the dashboard. Here, you'll retrieve the `firstName`, `middleName`, `lastName`, `email`, and `dateOfBirth` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values in Unqork.
5. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The **Data Source URL** field autopopulates with `/fbu/uapi/system/GetSubmissions`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(310).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
6. Click **Save**.

### Configure the Second Hidden Component

This Hidden component stores the submission IDs from the source module.

1. Drag and drop a **Hidden** component inside the Panel component, placing it below your Plug-In component.
2. In the **Property ID** and **Label Text** fields, enter `submissionId`.
3. Click **Save & Close**.

### Configure the ViewGrid Component

Next, let's configure a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard. Notice how the **Action** and **Event** settings create the View button.

1. Drag and drop a **ViewGrid** component inside the Panel component, placing it below the `submissionId` **Hidden** component.
2. In the **Label** field, enter `View Grid`.
3. In the **Property Name** field, enter `gridView`.
4. In the **Action** and **Event** fields, enter `View`.
5. In the **Inputs** table, enter the following:

| Id | Required |
| --- | --- |
| pluginGetSubmissions | Yes |
6. In the **Outputs** table, enter the following:

| Id | Mapping |
| --- | --- |
| submissionId | id |
7. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| firstName |  | First Name |
| middleName |  | Middle Name |
| lastName |  | Last Name |
| email |  | Email |
| dateOfBirth | =MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY') | Date of Birth |

> [!NOTE]
> The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(311).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
8. Click **Save**.

### Configure the Decisions Component

Next, let's add a [Decisions](/v1/docs/decisions-component) component to create the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component inside the Panel component, placing it below your ViewGrid component.
2. In the **Property ID** and **Label Text** fields, enter `ruleButtons`.
3. In the **Inputs** table, enter the following:

| Source | Type | Required | Silent |
| --- | --- | --- | --- |
| buttonClick | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) |
| moduleId | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |
| submissionId | exact | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (unchecked) | ![](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%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |

> Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input does n'o have a value in its Micro Decisions column, Unqork sets it to silent. In the next steps, you won't add values to the `moduleId` and `submissionId` columns. You'll only be using these inputs in the `panelDashboard_pageOpen` micro decision. So, you can mark these values as silent, or let Unqork do it for you.
4. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| panelDashboard | pageOpen |
5. In the **Micro Decisions** table, enter the following:

| buttonClick | panelDashboard_pageOpen |
| --- | --- |
| View | concatenate(‘/#/display/’,moduleId,’/’,submissionId,’/’,moduleId) |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(312).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)
6. Click **Save**.
7. **Save** your module.

Here's how your completed dashboard looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(313).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)

Here's how your completed dashboard looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboards_action_button_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D)

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.

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.

Deteremines how the component triggers.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

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.