---
title: "How to: Display Module Submissions in a Dashboard"
slug: "use-case-showing-module-submissions-in-a-dashboard"
updated: 2025-11-12T10:01:42Z
published: 2025-11-12T14:26:20Z
canonical: "docs.unqork.io/use-case-showing-module-submissions-in-a-dashboard"
---

> ## 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: Display Module Submissions in a Dashboard

UDesignerClassic Designer

In this how-to guide, you’ll create a simple dashboard to organize and display application submission data. It’s important to understand how different components and modules interact to configure a dashboard to display your data.

To build this dashboard, you need:

- **Panel component**: Organizes all your dashboard components.
- **Plug-In component**: Retrieves submission data from the source module. Plug-In components are not visible to your end-user, so you’ll need a dedicated component to display the data.
- **Initializer component**: Triggers the Plug-In component every time you open your dashboard to ensure the latest submission data is available.
- **Hidden component**: Stores the module ID of your source module. Your Plug-In component references this Hidden component instead of the actual module ID.
- **ViewGrid component**: The visual component that displays your submission data in a table. The ViewGrid component organizes the Plug-In component data into columns and rows, letting you select which data to display.

## Configuration

To begin, you'll need a source module. A source module is a module that creates submission data. For example, let's say an end-user completes an insurance application. The module where they submit their application is the source module and stores the data to be displayed in the dashboard. Use the source module from this example to simplify the process. Or, create your own source module if you feel comfortable.

Below is an Express View image of the source module we'll use.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(233).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)

These instructions assume that you have already created a new module with a title.

### Configure the Panel Component

Use a [Panel](https://docs.unqork.io/docs/panel-component?highlight=panel%20component) component 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

Add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component to trigger the Plug-In component you’ll configure 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:

| Source | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(227).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 Hidden Component

Add a [Hidden](https://docs.unqork.io/docs/hidden-component?highlight=hidden) component to store the module ID of the source module. Use the module ID of your own source module if you have already created one. Copy the module ID from the URL of your source module as follows: https://training.unqork.io/#/form/**5eb01aa6811bf80215fd706b**/edit.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your Initializer component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb01aa6811bf80215fd706b`.

> [!NOTE]
> If you built a different source module, enter its module ID here.
4. Click **Save Component**.

### Configure the Plug-In Component

Add a [Plug-In](/v1/docs/plug-in-component) component that uses an API call that retrieves the submissions from the source module to display in your dashboard.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below your Hidden component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. In the **Inputs** table, enter the following:

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

> [!NOTE]
> The first row references the module ID stored in the `moduleId` **Hidden** component. The second row identifies which source module fields to retrieve for the dashboard. The `firstName`, `middleName`, `lastName`, `email`, and `dateOfBirth` fields display in the dashboard. The values entered in the Mapping column (`moduleId` and `fields`) are native values in Unqork.
4. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The `/fbu/uapi/system/GetSubmissions` URL automatically displays in the **Data Source URL** field.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(229).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 ViewGrid Component

Lastly, configure a [ViewGrid](https://docs.unqork.io/docs/viewgrid-component?highlight=ViewGrid) component to display the submission data in your dashboard.

1. Drag and drop a **ViewGrid** component onto the canvas, placing it below your Plug-In component.
2. In the **Property ID** field, enter `gridView`.
3. In the **Canvas Label Text** field, enter `ViewGrid`.
4. In the **Action** field, enter `null`.
5. In the **Inputs** table, enter the following:

| Source | Required |
| --- | --- |
| pluginGetSubmissions | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |
6. In the **Outputs** table, enter the following:

| Source | Mapping |
| --- | --- |
| submissionId | id |

1. 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(231).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)

1. Click **Save**.
2. **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(232).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 the completed dashboard looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboard_building_dashboard_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)

Now, you can test your dashboard. Enter submissions in the source module and watch as they populate in the dashboard. Remember, for a dashboard to have any function, it needs submission data from a source module. In this example, we'll use this basic source module:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(234).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)

In this how-to guide, you’ll create a simple dashboard to organize and display application submission data. It’s important to understand how different components and modules interact to configure a dashboard to display your data.

To build this dashboard, you need:

- **Panel component**: Organizes all your dashboard components.
- **Plug-In component**: Retrieves submission data from the source module. Plug-In components are not visible to your end-user, so you’ll need a dedicated component to display the data.
- **Initializer component**: Triggers the Plug-In component every time you open your dashboard to ensure the latest submission data is available.
- **Hidden component**: Stores the module ID of your source module. Your Plug-In component references this Hidden component instead of the actual module ID.
- **ViewGrid component**: The visual component that displays your submission data in a table. The ViewGrid component organizes the Plug-In component data into columns and rows, letting you select which data to display.

## Configuration

To begin, you'll need a source module. A source module is a module that creates submission data. For example, let's say an end-user completes an insurance application. The module where they submit their application is the source module and stores the data to be displayed in the dashboard. Use the source module from this example to simplify the process. Or, create your own source module if you feel comfortable.

Below is an Express View image of the source module we'll use.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(233).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)

These instructions assume that you have already created a new module with a title.

### Configure the Panel Component

Use a [Panel](https://docs.unqork.io/docs/panel-component?highlight=panel%20component) component as a container for the components that follow.

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

### Configure the Initializer Component

Add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component to trigger the Plug-In component you’ll configure 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:

| Source | Type | Value |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(236).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 Hidden Component

Add a [Hidden](https://docs.unqork.io/docs/hidden-component?highlight=hidden) component to store the module ID of the source module. Use the module ID of your own source module if you have already created one. Copy the module ID from the URL of your source module as follows: https://training.unqork.io/#/form/**5eb01aa6811bf80215fd706b**/edit.

1. Drag and drop a **Hidden** component onto your canvas, placing it below your Initializer component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb01aa6811bf80215fd706b`.

> [!NOTE]
> If you built a different source module, enter its module ID here.
4. Click **Save & Close**.

### Configure the Plug-In Component

Add a [Plug-In](/v1/docs/plug-in-component) component that uses an API call that retrieves the submissions from the source module to display in your dashboard.

1. Drag and drop a **Plug-In** component onto your canvas, placing it below your Hidden component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. 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 identifies which source module fields to retrieve for the dashboard. The `firstName`, `middleName`, `lastName`, `email`, and `dateOfBirth` fields display in the dashboard. The values entered in the Mapping column (`moduleId` and `fields`) are native values in Unqork.
4. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The `/fbu/uapi/system/GetSubmissions` URL automatically displays in the **Data Source URL** field.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(237).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**.

### Configure the ViewGrid Component

Lastly, configure a [ViewGrid](https://docs.unqork.io/docs/viewgrid-component?highlight=ViewGrid) component to display the submission data in your dashboard.

1. Drag and drop a **ViewGrid** component onto the canvas, placing it below your Plug-In component.
2. In the **Label Text** field, enter `ViewGrid`.
3. In the **Property ID** field, enter `gridView`.
4. In the **Action** field, enter `null`.
5. In the **Inputs** table, enter the following:

| Source | Required |
| --- | --- |
| pluginGetSubmissions | ![](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-08T18%3A05%3A09Z&se=2026-11-08T19%3A05%3A09Z&sr=c&sp=r&sig=a24FthqT2tLQYbxbDe3IvNWT2QINSzbXh3jbniwiEoQ%3D) (checked) |
6. In the **Outputs** table, enter the following:

| Source | Mapping |
| --- | --- |
| submissionId | id |

1. 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(238).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)

1. Click **Save**.
2. **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(235).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 the completed dashboard will look in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/sol_dashboard_building_dashboard_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)

Now, you can test your dashboard. Enter submissions in the source module and watch as they populate in the dashboard. Remember, for a dashboard to have any function, it needs submission data from a source module. In this example, we'll use this basic source module:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(234).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)

In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module.

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.

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.

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.

The Unqork front-end application framework that delivers Creator-built applications to end-users. Express is the layer end-users interact with—the published forms, screens, and navigation built in the Module Builder. Express is distinct from Express View, which is a Creator-facing preview tool in the IDE.

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.

## Related

- [Submission Data](/submission-data.md)
- [Populating Dashboards with Submission Data](/populating-dashboards-with-submission-data.md)