Use Case: Displaying Workflow Submissions in a Dashboard

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.

This Panel acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto your canvas.
2. Enter panelDashboard in the Property ID.
3. Click Save.

This Initializer component triggers the Plug-In component that you'll set up later.

1. Drag and drop an Initializer component onto your canvas. Place your Initializer inside the Panel.
2. Enter initStart in the Property ID and Label Text.
3. Select New Submission from the Trigger Type.
4. In the Outputs table, enter the following:
a. Property ID: enter pluginGetSubmissions.
b. Type: enter trigger.
c. Value: enter GO.

5. Click Save.

This is the first of 2 Hidden components used in this configuration. This component houses the submission ID.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Initializer.
2. Enter submissionId in the Property ID and Label Text.
3. 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.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below the Initializer.
2. Enter workflowId in the Property ID and Label Text.
3. 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.

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

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the workflowId Hidden component.
2. Enter pluginGetSubmissions in the Property ID and Label Text.
3. Select Manual from the Trigger Type drop-down.
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. Add these as shown.

5. Select List Submissions for Dashboard from the Internal Services drop-down. /fbu/uapi/system/GetSubmissions appears in the Data Source URL field.

6. Click Save.

Configure the ViewGrid Component

Lastly, let's bring in a ViewGrid component to display your dashboard.

1. Drag and drop a ViewGrid component onto the canvas. Place your ViewGrid below the submissionId Hidden component.
2. Enter View Grid in the Label.
3. Enter gridView in the Property Name.
4. Enter null in the Action field. This removes the default Submit button from the dashboard.
5. In the Inputs table, enter the following:
a. ID: enter pluginGetSubmissions.
b. Required: select Yes.
6. In the Outputs table, enter the following:
a. ID: enter submissionId.
b. Mapping: enter 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

The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.

8. Click Save.
9. Save your module.

Lab