Use Case: Adding a Key Performance Indicator (KPI) Widget to a Dashboard

Overview

Sometimes you'll want to measure performance of a particular activity. For example, seeing the number of submissions in your dashboard. To reveal this information, you'll add a KPI (Key Performance Indicator) widget to your dashboard. KPI widgets are a great way to measure and get an at-a-glance view of a key metric.

In this use case, you’ll learn how to add a KPI widget to your dashboard. Specifically, a KPI widget showing the number of accounts (submissions) in your dashboard. This use case also includes steps for building a dashboard with an action button. The dashboard pulls submissions from the following source module: https://training.unqork.io/#/form/5eb482f3c8368d0210c74cbf/edit.

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

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

 

What You’ll Learn

In this article, you’ll learn how to add a KPI widget to your dashboard.

What You’ll Need

To pre-configure your dashboard you'll need:

  • 1 Panel component

  • 1 Initializer component

  • 2 Hidden components

  • 1 Plug-In component

  • 1 Decisions component

  • 1 ViewGrid component

To add the KPI widget to your dashboard, you'll need:

  • 2 Hidden components

  • 2 Data Workflow components

  • 1 KPI component

Pre-configuration

Configure the Hidden Component

This Hidden component houses the value submissions. This Hidden component acts as a replica of pluginGetSubmissions. You'll reference the submissions Hidden component in the Data Workflows that you'll create next.

1. Drag and drop a Hidden component onto your canvas. Place it below panelDashboard.
2. Enter submissions in the Property ID and Label Text.
3. Click Save.

Configure the Data Workflow Component

This is your first Data Workflow. Here, you'll create a replica of pluginGetSubmissions, housed 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. Place it below your submissions Hidden component.
2. Enter dwfProcessSubmissions in the Label and Property Name fields.
3. Scroll down and select Manual from the Trigger Type drop-down. 

Configure the Input Data Operator

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

Setting

Value

Category

Input

Component

pluginGetSubmissions

Required

Yes

Source

Default

Configure the Output Data Operator

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

Setting

Value

Category

Output

Component

submissions

Action

value
3. Drag a connector from the output (right-hand side) port of the Input operator, to the input (left-hand side) port of the Output operator.
4. Click Save.

Update the Plug-In Component

Next, you'll update pluginGetSubmissions, adding a Post Trigger. This tells dwfProcessSubmissions to fire as soon as the Plug-In gets submissions.

1. Open your pluginGetSubmissions Plug-In component.
2. Enter dwfProcessSubmissions in the Post Trigger field. 

3. Click Save.

Configure the Hidden Component

This Hidden component houses the KPI count that you'll create in your dwfKPI Data Workflow. You'll use this value in your KPI widget.

1. Drag and drop a Hidden component onto your canvas. Place it below dwfProcessSubmissions.
2. Enter hiddenKpi in the Property ID and Label Text.
3. Click Save.

Configure the Data Workflow Component

Next, you’ll add your second Data Workflow component. This component counts your submissions using a Size 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. Enter dwfKpi in the Label and Property Name.
3. Scroll down and select Watch from the Trigger Type drop-down. 

Configure the Input Data Operator

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

Setting

Value

Category

Input

Component

submissions

Required

Yes

Source

Default

Configure the Size Data Operator

The Size operator counts the structure that it’s attached to. In this example, it'll count the number of arrays (values) in the Input submissions.

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

Configure the Output Data Operator

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

Setting

Value

Category

Output

Component

hiddenKpi

Action

value
3. Drag a connector from the output (right-hand side) port of the Size operator, to the input (left-hand side) port of the Output operator.
4. Click Save.

Configure the KPI Component

Lastly, you’ll add a KPI component to display the number of accounts on your dashboard.

1. Drag and drop a KPI component onto your canvas. Place the KPI component at the top of the canvas, above panelDashboard.
2. Enter kpiAccounts in the Label and Property Name.
3. Enter Number of Accounts in the KPI Title field. This title appears above the KPI value on the dashboard.
4. Enter hiddenKpi in the Inputs table.

5. Click Save.
6. Save your module.