---
title: "How to: Display Workflow Submissions in a Dashboard"
slug: "use-case-displaying-workflow-submissions-in-a-dashboard"
description: "Learn to create a simple dashboard for displaying workflow submissions with Unqork, using components like Panel, Initializer, and ViewGrid."
updated: 2025-11-24T14:42:10Z
published: 2025-11-25T16:08:31Z
canonical: "docs.unqork.io/use-case-displaying-workflow-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 Workflow Submissions in a Dashboard

UDesignerClassic Designer

So far, you've learned how to create a simple dashboard to display module submissions. Dashboards can also be used to display workflow submissions. In this how-to guide, you’ll learn how to create a simple dashboard that will display **workflow submissions**. The configuration is very similar, but you'll reference a workflow ID instead of a module ID.

## Configuration

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

The dashboard in this example retrieves submissions from the following source workflow: [https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit](https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit).

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

### Configure the Panel Component

Add a [Panel](/v1/docs/panel-component) 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, add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component to trigger the Plug-In component that you'll set up later.

1. Drag and drop an **Initializer** component onto your canvas, placing it inside your 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(263).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
5. Click **Save Component**.

### Configure the Hidden Components

Configure the first [Hidden](/v1/docs/hidden-component) component that stores the submission ID.

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

Configure the second Hidden component that stores the workflow ID of your source or submission workflow. You can pull the workflow ID from the source workflow’s hyperlink as follows: [https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit](https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit).

1. Drag and drop a **Hidden** component inside your Panel component, placing it below the first Hidden component.
2. In the **Property ID** and **Label Text** fields, enter `workflowId`.
3. In the **Default Value** field, enter `5eac55f8154605020f1e3fb5`. This is the source workflow's workflow ID.
4. Click **Save** **Component**.

> [!NOTE]
> Unqork lets you connect workflows together using Handoff nodes. When doing so, you can choose to continue a submission across workflows. In that case, in this field you’ll use the workflow ID from the final workflow.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component connects your module to the outside world. To make this connection, you'll use an API. You'll use this Plug-In to get submissions to display in your dashboard.

1. Drag and drop a **Plug-In** component inside your Panel component, placing it below the `workflowId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Trigger Type** drop-down, select **Manual**.
4. Complete the **Inputs** table as follows:

| Property ID | Mapping |
| --- | --- |
| workflowId | workflowId |
| 'firstName,lastName,dateOfBirth' | fields |

> The first row references the workflow ID stored in the `workflowId` **Hidden** component. The second row shows which fields you're pulling into the dashboard. Here, we'll pull the `firstName`, `lastName`, and `dateOfBirth` fields. You can pull fields from several modules in your workflow into the same dashboard. The values entered in the Mapping column (`workflowId` and `fields`) are native values recognized by the Unqork Designer Platform.
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(341).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
6. Click **Save Component**.

### Configure the ViewGrid Component

Lastly, add a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard.

1. Drag and drop a **ViewGrid** component inside your Panel component, placing it below the `submissionId` **Hidden** component.
2. In the **Label** fields, enter `ViewGrid`.
3. In the **Property ID** field, enter `gridView`.
4. In the **Action** field, enter `null`. This removes the default **Submit** button from the dashboard.
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 |
| lastName |  | Last Name |
| 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(336).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
8. Click **Save Component**.
9. **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(337).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboard_Workflow_01_Express.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

So far, you've learned how to create a simple dashboard to display module submissions. Dashboards can also be used to display workflow submissions. In this how-to guide, you’ll learn how to create a simple dashboard that will display **workflow submissions**. The configuration is very similar, but you'll reference a workflow ID instead of a module ID.

## Configuration

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

The dashboard in this example retrieves submissions from the following source workflow: [https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit.](https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit.)

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

### Configure the Panel Component

Add a [Panel component](https://docs.unqork.io/docs/panel-component?highlight=panel%20component) 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, add an [Initializer](https://docs.unqork.io/docs/initializer-component?highlight=initializer) component to trigger the Plug-In component that you'll set up later.

1. Drag and drop an **Initializer** component onto your canvas, placing it inside your 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 |
| --- | --- | --- |
| pluginGetSubmissions | trigger | GO |

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

### Configure the Hidden Components

Configure the first [Hidden](/v1/docs/hidden-component) component that stores the submission ID.

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

Configure the second Hidden component that stores the workflow ID of your source or submission workflow. You can pull the workflow ID from the source workflow’s hyperlink as follows: [https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit](https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit).

1. Drag and drop a **Hidden** component inside your Panel component, placing it below the first Hidden component.
2. In the **Property ID** and **Label Text** fields, enter `workflowId`.
3. In the **Default Value** field, enter `5eac55f8154605020f1e3fb5`. This is the source workflow's workflow ID.
4. Click **Save** **& Close**.

> [!NOTE]
> Unqork lets you connect workflows together using Handoff nodes. When doing so, you can choose to continue a submission across workflows. In that case, in this field you’ll use the workflow ID from the final workflow.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component connects your module to the outside world. To make this connection, you'll use an API. You'll use this Plug-In to get submissions to display in your dashboard.

1. Drag and drop a **Plug-In** component inside your Panel component, placing it below the `workflowId` **Hidden** component.
2. In the **Property ID** and **Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Trigger Type** drop-down, select **Manual**.
4. Complete the **Inputs** table as follows:

| Property ID | Mapping |
| --- | --- |
| workflowId | workflowId |
| 'firstName,lastName,dateOfBirth' | fields |

> The first row references the workflow ID stored in the `workflowId` **Hidden** component. The second row shows which fields you're pulling into the dashboard. Here, we'll pull the `firstName`, `lastName`, and `dateOfBirth` fields. You can pull fields from several s in your workflow into the same dashboard. The values entered in the Mapping column (`workflowId` and `fields`) are native values recognized by the Unqork Designer Platform.
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(343).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
6. Click **Save**.

### Configure the ViewGrid Component

Lastly, add a [ViewGrid](/v1/docs/viewgrid-component) component to display your dashboard.

1. Drag and drop a **ViewGrid** component inside your Panel component, placing it below the `submissionId` **Hidden** component.
2. In the **Label** fields, enter `ViewGrid`.
3. In the **Property ID** field, enter `gridView`.
4. In the **Action** field, enter `null`. This removes the default **Submit** button from the dashboard.
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 |
| lastName |  | Last Name |
| 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(344).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)
8. Click **Save**.
9. **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(345).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%3D)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboard_Workflow_01_Express.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A57Z&se=2026-11-07T18%3A57%3A57Z&sr=c&sp=r&sig=oV4yl9PrK%2FsPQn%2BRKcVEEhYDWlyCsn%2FP2gneqtOigQI%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.

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.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

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.