How to: Add a Key Performance Indicator (KPI) Widget to a Dashboard

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.

These instructions assume you have a new Front-End module open, saved, and with a title.

Configure the Panel Component

This Panel 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 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

   

5. Click Save Component.

Configure the Hidden Component

This is the first of two Hidden 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 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

   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.

   

5. Click Save Component.

Configure the Hidden Component

This Hidden 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 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	(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

   

7. In the Action field, enter View.

8. In the Event field, enter View.

9. Click Save Component.

Configure the Decisions Component

This Decisions 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	(unchecked)	(unchecked)
   2	moduleId	exact	(unchecked)	(checked)
   3	submissionId	exact	(unchecked)	(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 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)

   

7. Click Save Component.

Configuration

Configure the Hidden Component

This Hidden 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 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.

   

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 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 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. In the Property ID and Canvas Label Text fields, enter dwfKpi.

3. Set the Trigger Type as Watch.

   

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 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 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.

   

5. Click Save Component.

6. Save your module.

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

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