Overview
So far, you've learned how to create a simple dashboard to display module submissions. You can also use a dashboard to display workflow submissions. The configuration is very similar, but you'll reference a workflow ID instead of a module ID. The dashboard in this use case pulls submissions from the following source workflow: https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/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 use case, you’ll learn how to:
Create a simple dashboard to display workflow submissions.
What You'll Need
To build this dashboard, you'll need:
1 Panel component
1 Initializer component
2 Hidden components
1 Plug-In component
1 ViewGrid component
Pre-configuration
You'll pre-configure the following components for this use case.
Configure the Panel Component
This Panel acts as a container for the components that follow.
In the Module Builder, drag and drop a Panel component onto your canvas.
Enter panelDashboard in the Property ID.
Click Save.
Configure the Initializer Component
Next, let's add an Initializer component. This Initializer triggers the Plug-In component that you'll set up next.
Drag and drop an Initializer component onto your canvas. Place your Initializer inside the Panel.
Enter initStart in the Property ID and Label Text.
Select New Submission from the Trigger Type.
In the Outputs table, enter the following:
Property ID: enter pluginGetSubmissions.
Type: enter trigger.
Value: enter GO.
Click Save.
Configure the Hidden Component
This is the first of 2 Hidden components used in this configuration. This component houses the submission ID.
Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Initializer.
Enter submissionId in the Property ID and Label Text.
Click Save.
Configure the Hidden Component
This is the second Hidden component in this configuration. This component houses 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.
Drag and drop a Hidden component onto your canvas. Place your Hidden component below the Initializer.
Enter workflowId in the Property ID and Label Text.
Enter 5eac55f8154605020f1e3fb5 in the Default Value field. This is the source workflow's workflow ID.
Unqork lets you connect workflows together using Handoffs. 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.
Click the Save button.
Configure the Plug-In Component
This Plug-In connects your module to the outside world. To make this connection, you'll use an application programming interface (API). You'll use this Plug-In to get submissions to display in your dashboard.
Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the workflowId Hidden component.
Enter pluginGetSubmissions in the Property ID and Label Text.
Select Manual from the Trigger Type drop-down.
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. Add these as shown.
Select List Submissions for Dashboard from the Internal Services drop-down. /fbu/uapi/system/GetSubmissions appears in the Data Source URL field.
Click Save.
Configure the ViewGrid Component
Lastly, let's bring in a ViewGrid component to display your dashboard.
Drag and drop a ViewGrid component onto the canvas. Place your ViewGrid below the submissionId Hidden component.
Enter View Grid in the Label.
Enter gridView in the Property Name.
Enter null in the Action field. This removes the default Submit button from the dashboard.
In the Inputs table, enter the following:
ID: enter pluginGetSubmissions.
Required: select Yes.
In the Outputs table, enter the following:
ID: enter submissionId.
Mapping: enter id.
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
The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.
Click Save.
Save your module.
Lab
You can find the completed use case for creating a dashboard that displays workflow submissions here: https://training.unqork.io/#/form/5eac6657154605020f1e3fd9/edit.
You'll find the source workflow for this use case here: https://training.unqork.io/#/workflow/5eac55f8154605020f1e3fb5/edit.