---
title: "How to: Add a Key Performance Indicator (KPI) Widget to a Dashboard"
slug: "use-case-adding-a-key-performance-indicator-kpi-widget-to-a-dashboard"
description: "Learn to add a widget to your dashboard that displays account metrics, enhancing performance tracking with step-by-step instructions and configurations."
updated: 2026-02-17T16:38:22Z
published: 2026-02-17T17:28:33Z
canonical: "docs.unqork.io/use-case-adding-a-key-performance-indicator-kpi-widget-to-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: Add a Key Performance Indicator (KPI) Widget to a Dashboard

Sometimes you'll want to measure the performance of a particular activity. For example, monitoring the number of submissions in your dashboard. To reveal this information, you'll **add a KPI widget** to view this metric.

**UDesigner**

## Preconfiguration

In this how-to guide, you’ll learn how to add a KPI widget to your dashboard that displays the number of accounts (submissions). This example also includes steps for building a dashboard with an action button, and retrieves submissions from the following source module: [https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit](https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit.).

> [!NOTE]
> These instructions assume you have a new Front-End module open, saved, and with a title.

### Configure the Panel Component

This [Panel](/v1/docs/panel-component) component 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

This [Initializer](/v1/docs/initializer-component) component triggers the Plug-In components that you'll set up later.

1. Drag and drop an **Initializer** component 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 |

![Initializer component settings with Trigger Type and the Outputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_initStart.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the Hidden Component

This is the first of two [Hidden](/v1/docs/hidden-component) components in this configuration. It stores the module ID of your source or submission module. You can retrieve the module ID from the source module’s URL as follows: https://training.unqork.io/#/form/**5eb482f3c8368d0210c74cbf**/edit.

1. Drag and drop a **Hidden** component inside your `panelDashboard` **Panel** component, below the Initializer component.
2. In the **Property ID** and **Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This value is the source module's module ID.
4. Click **Save Component**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component retrieves the submissions to display in your dashboard.

1. Drag and drop a **Plug-In** component inside your `panelDashboard` **Panel** component, below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The **Request Type** and **Data Source URL** autopopulate.
4. In the **Inputs** table, enter the following:

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

> [!NOTE]
> The first row references the module ID stored in the `moduleId` **Hidden** component. The second and third rows show which fields you'll display in the dashboard. Here, we'll retrieve the `firstName`, `middleName`, `lastName`, `email`, `dateOfBirth`, `investmentAmount`, and `transferringBank` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values recognized by the Unqork platform.

![Plug-in component settings with Internal services and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_pluginGetSubmissions.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.

### Configure the Hidden Component

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

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

### Configure the ViewGrid Component

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

1. Drag and drop a **ViewGrid** component inside your `panelDashboard` **Panel** component, below the `submissionId` **Hidden** component.
2. In the **Property ID** field, enter `gridView`.
3. In the **Canvas Label Text** field, enter `View Grid`.
4. In the **Inputs** table, enter the following:

| # | ID | Required |
| --- | --- | --- |
| 1 | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (checked) |
5. In the **Outputs** table, enter the following:

| # | ID | Mapping |
| --- | --- | --- |
| 1 | submissionId | id |
6. In the **Display** table, enter the following:

| # | ID | Formula | Heading |
| --- | --- | --- | --- |
| 1 | firstName |  | First Name |
| 2 | lastName |  | Last Name |
| 3 | email |  | Email |
| 4 | investmentAmount |  | Investment Amount |
| 5 | transferringBank |  | Transferring Bank |

![ViewGrid component settings with the Inputs, Outputs, and Display tables and the Action and Event fields highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_gridView.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
7. In the **Action** field, enter `View`.
8. In the **Event** field, enter `View`.
9. Click **Save** **Component**.

### Configure the Decisions Component

This [Decisions](/v1/docs/decisions-component) component provides the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component inside your `panelDashboard` **Panel** component, below the ViewGrid component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleButtons`.
3. From the **Trigger Type** drop-down, select **Watch**.
4. In the **Inputs** table, enter the following:

| # | Property ID | Type | Required | Silent |
| --- | --- | --- | --- | --- |
| 1 | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) |
| 2 | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) | ![](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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (checked) |
| 3 | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (unchecked) | ![](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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (checked) |

> [!NOTE]
> 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 use these inputs in the **panelDashboard_pageOpen** conditional. So, you can mark these values as silent, or let Unqork do it for you.
5. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| panelDashboard | pageOpen |
6. In the **Conditionals** table, enter the following:

| buttonClick | panelDashboard_pageOpen |
| --- | --- |
| view | `=concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId)` |

![Decisions component settings with the Inputs, Outputs and Conditionals tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_ruleButtons.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
7. Click **Save Component**.

## Configuration

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the value submissions, acting as a replica of the `pluginGetSubmissions` **Plug-In** component. You'll reference the `submissions` **Hidden** component in the Data Workflows you'll create next.

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

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) creates a replica of the `pluginGetSubmissions` **Plug-In** component, stored in the `submissions` **Hidden** component. You'll reference the `submissions` **Hidden** component in your second Data Workflow.

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

![Data workflow canvas with an Input and an Output operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_dwfProcessSubmissions.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

#### Configure the Input Operator

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

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

#### Configure the Output Operator

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

### Update the Plug-In Component

Next, you'll update the `pluginGetSubmissions` **Plug-In** component to add a Post Trigger. This trigger tells the `dwfProcessSubmissions` **Data Workflow** component to fire as soon as the Plug-In component retrieves submissions.

1. Open the `pluginGetSubmissions` **Plug-In** component’s configuration drawer.
2. In the **Post Trigger** field, enter `dwfProcessSubmissions`.
3. Click **Save Component**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the KPI count that you'll create in your `dwfKPI` **Data Workflow** component. You'll use this value in your KPI widget.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfProcessSubmissions` **Data Workflow** component.
2. In the **Property ID** and **Label Text** fields, enter `hiddenKpi`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Next, you’ll add your second [Data Workflow](/v1/docs/data-workflow-component) component. This component counts your submissions using a [Size](/v1/docs/size-operator) operator. The result of your calculation displays in your KPI dashboard widget.

1. Drag and drop a **Data Workflow** component onto your canvas. Place it below the `hiddenKpi` Hidden component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfKpi`.
3. Set the **Trigger Type** as **Watch**.

![Data Workflow canvas with Input, Size, and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1770311677990.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

#### Configure the Input Operator

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

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

#### Configure the Size Operator

The [Size](/v1/docs/size-operator) operator counts the structure you input into it. In this example, it counts the number of arrays (values) from the `submissions` **Input** operator.

1. Drag and drop a **Size** operator onto your Data Workflow canvas. You don't need any configuration for this operator.
2. Connect the output port (right) of the **Input** operator to the input port (left) of the **Size** operator.

#### Configure the Output Operator

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

### Configure the KPI Component

Lastly, you’ll add a [KPI](/v1/docs/kpi-component) component to display the number of accounts on your dashboard.

1. Drag and drop a **KPI** component onto your canvas, placing it above the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `kpiAccounts`.
3. In the **KPI Title** field, enter `Number of Accounts`. This title displays above the KPI value on the dashboard.
4. In the **Inputs** table, enter `hiddenKpi`.

![KPI component settings with Label Text, KPI Title, and Inputs highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_kpiAccounts.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save Component**.
6. **Save** your module.

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

![Completed Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_ModuleBuilder.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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_KPI_Expressminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

**Classic Designer**

## Preconfiguration

In this how-to guide, you’ll learn how to add a KPI widget to your dashboard that displays the number of accounts (submissions). This example also includes steps for building a dashboard with an action button, and retrieves submissions from the following source module: [https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit](https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit.).

> [!NOTE]
> These instructions assume you have a new Front-End module open, saved, and with a title.

### Configure the Panel Component

This [Panel](/v1/docs/panel-component) component 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

This [Initializer](/v1/docs/initializer-component) component triggers the Plug-In components that you'll set up later.

1. Drag and drop an **Initializer** component 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/sol_simpledashboard_04-2_init(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.

### Configure the Hidden Component

This is the first of two [Hidden](/v1/docs/hidden-component) components in this configuration. It stores the module ID of your source or submission module. You can retrieve the module ID from the source module’s URL as follows: https://training.unqork.io/#/form/**5eb482f3c8368d0210c74cbf**/edit.

1. Drag and drop a **Hidden** component inside your `panelDashboard` **Panel** component, below the Initializer component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `moduleId`.
3. In the **Default Value** field, enter `5eb482f3c8368d0210c74cbf`. This value is the source module's module ID.
4. Click **Save & Close**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component retrieves the submissions to display in your dashboard.

1. Drag and drop a **Plug-In** component inside your `panelDashboard` **Panel** component, below the `moduleId` **Hidden** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginGetSubmissions`.
3. From the **Internal Services** drop-down, select **List Submissions for Dashboard**. The **Request Type** and **Data Source URL** autopopulate.
4. Complete the **Inputs** table as follows:

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

> [!NOTE]
> The first row references the module ID stored in the `moduleId` **Hidden** component. The second and third rows show which fields you'll display in the dashboard. Here, we'll retrieve the `firstName`, `middleName`, `lastName`, `email`, `dateOfBirth`, `investmentAmount`, and `transferringBank` fields. The values entered in the Mapping column (`moduleId` and `fields`) are native values recognized by the Unqork platform.

![Plug-in Component settings with Internal Services and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKpiToDashboard_pluginGetSubmissionsClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save**.

### Configure the Hidden Component

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

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

### Configure the ViewGrid Component

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

1. Drag and drop a **ViewGrid** component inside your `panelDashboard` **Panel** component, 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** field, enter `View`.
5. In the **Event** field, enter `View`.
6. In the **Inputs** table, enter the following:

| ID | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (checked) |
7. In the **Outputs** table, enter the following:

| ID | Mapping |
| --- | --- |
| submissionId | id |
8. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| firstName |  | First Name |
| lastName |  | Last Name |
| email |  | Email |
| investmentAmount |  | Investment Amount |
| transferringBank |  | Transferring Bank |

![ViewGrid component settings with the Action, Event, and the Inputs, Outputs, and Display tables highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_gridViewClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
9. Click **Save**.

### Configure the Decisions Component

This [Decisions](/v1/docs/decisions-component) component provides the trigger for your dashboard's **View** button.

1. Drag and drop a **Decisions** component inside your `panelDashboard` **Panel** component, below the ViewGrid component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleButtons`.
3. Set the **Trigger Type** to **Watch**.
4. In the **Inputs** table, enter the following:

| Property ID | 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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D) (checked) |

> [!NOTE]
> Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input does not 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 use these inputs in the **panelDashboard_pageOpen** micro decision. So, you can mark these values as silent, or let Unqork do it for you.
5. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| panelDashboard | pageOpen |
6. 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/Bootcamp_KPIDashboard_Decisions_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
7. Click **Save**.

## Configuration

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the value submissions, acting as a replica of the `pluginGetSubmissions` **Plug-In** component. You'll reference the `submissions` **Hidden** component in the Data Workflows you'll create next.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `submissions`.
3. Click **Save & Close**.

### Configure the Data Workflow Component

This [Data Workflow](/v1/docs/data-workflow-component) creates a replica of the `pluginGetSubmissions` **Plug-In** component, stored in the `submissions` **Hidden** component. You'll reference the `submissions` **Hidden** component in your second Data Workflow.

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

![Data workflow canvas including an Input and an Output operator.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_dwfProcessCubmissionsClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

#### Configure the Input Operator

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

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

#### Configure the Output Operator

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

### Update the Plug-In Component

Next, you'll update the `pluginGetSubmissions` **Plug-In** component to add a Post Trigger. This trigger tells the `dwfProcessSubmissions` **Data Workflow** component to fire as soon as the Plug-In component retrieves submissions.

1. Open the `pluginGetSubmissions` **Plug-In** component’s configuration drawer.
2. In the **Post Trigger** field, enter `dwfProcessSubmissions`.
3. Click **Save**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the KPI count that you'll create in your `dwfKPI` **Data Workflow** component. You'll use this value in your KPI widget.

1. Drag and drop a **Hidden** component onto your canvas, placing it below the `dwfProcessSubmissions` **Data Workflow** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `hiddenKpi`.
3. Click **Save & Close**.

### Configure the Data Workflow Component

Next, you’ll add your second [Data Workflow](/v1/docs/data-workflow-component) component. This component counts your submissions using a [Size](/v1/docs/size-operator) operator. The result of your calculation displays in your KPI dashboard widget.

1. Drag and drop a **Data Workflow** component onto your canvas. Place it below the `hiddenKpi` Hidden component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfKpi`.
3. From the **Trigger Type** drop-down, select **Watch**.

![Data Workflow canvas with Input, Size, and Output operators.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashbaord_dwfKPIClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)

#### Configure the Input Operator

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

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

#### Configure the Size Operator

The [Size](/v1/docs/size-operator) operator counts the structure you input into it. In this example, it counts the number of arrays (values) from the `submissions` **Input** operator.

1. Drag and drop a **Size** operator onto your Data Workflow canvas. You don't need any configuration for this operator.
2. Connect the output port (right) of the **Input** operator to the input port (left) of the **Size** operator.

#### Configure the Output Operator

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

### Configure the KPI Component

Lastly, you’ll add a [KPI](/v1/docs/kpi-component) component to display the number of accounts on your dashboard.

1. Drag and drop a **KPI** component onto your canvas, placing it above the `panelDashboard` **Panel** component.
2. In the **Property ID** and **Label** fields, enter `kpiAccounts`.
3. In the **KPI Title** field, enter `Number of Accounts`. This title displays above the KPI value on the dashboard.
4. In the **Inputs** table, enter `hiddenKpi`.

![KPI component settings with Label, KPI Title, and Inputs highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_kpiAccountsClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%3D)
5. Click **Save & Close**.
6. Save your module.

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

![Completed module builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AddKPIToDashboard_ModuleBuilderClassic.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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_KPI_Expressminusdelete.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A07Z&se=2026-11-08T19%3A05%3A07Z&sr=c&sp=r&sig=SCQlaSrheLCjQALO5Zc6a3HJseMOKI8JT9VXxlOS1pE%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.

A quanitifiable measure of performance of a specific objective for a specified time.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

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.

Enter outputs components and actions you want the component to perform.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Enter inputs components and actions you want the component to perform..

To execute or perform a a task. In the Operations builder, Events fire (execute) one, or multiple Operations.

A UI (User Interface) Drawer is a layout panel that slides out from the side of the screen to display content. In UDesigner, components display their configuration panels in a drawer.

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

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.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A Property ID is the unique field ID used by Unqork to track and link components in your module.