Use Case: Showing Module Submissions in a Dashboard

Overview

Here's how the completed dashboard will look in Express View:

Here's how your completed dashboard will look in the Module Builder:

Remember, for a dashboard to have any function, it needs submission data from a source module. In this example, we'll use this basic source module:

What You'll Learn

In this article, you'll learn how to build a simple dashboard.

What You'll Need

This lesson shows you that dashboards require multiple components to function. You must understand how different components and modules interact to configure a dashboard, and this might be more complex than you think. Don't worry, this lesson leads you through how to build a dashboard step by step.

To build this dashboard, you need:

  • 1 Panel component: Organizes all your dashboard components.

  • 1 Initializer component: Triggers the Plug-In every time you open your dashboard. This means your dashboard displays the latest submission data available.

  • 1 Hidden component: Stores the module ID of your source module. Your Plug-In references this Hidden component instead of the actual module ID.

  • 1 Plug-In component: Receives submission data from your source module. The Plug-in isn't visible to your end-user, so you need a ViewGrid to display the data.

  • 1 ViewGrid component: Provides the visual component and displays your submission data as a table. The ViewGrid organizes the Plug-in data into columns and rows. This component lets you select exactly which data to display.

Configuration

To start, you'll need a source module. A source module is a module that creates submission data. For example, let's say an end-user fills out an insurance application. The module where they submit their application would be the source module. It's the source of the data that'll be in the dashboard.

Below is an Express View image of the source module we'll use. You can find the module here: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.

This use case shows you how to build a dashboard. Use the source module from this example to simplify things (training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit). Or, create your own source module if you feel comfortable.

These instructions assume that you already created a new, titled module.

Configure the Panel Component

Use a Panel component as a container for the components that follow.

1. Drag and drop a Panel component onto your Module Builder canvas.
2. In the Property ID field, enter panelDashboard.
3. Click Save.

Configure the Initializer Component

Add an Initializer component. This Initializer component triggers the Plug-In component that follows.

1. Drag and drop an Initializer component onto your canvas. Place the Initializer inside the Panel.
2. In the Property ID and Canvas Label Text fields, enter initStart.
3. From the Trigger Type options, select New Submission.
4. In the Outputs table, enter:
Property ID Type Value

pluginGetSubmissions

trigger

GO

5. Click Save.

Configure the Hidden Component

Add a Hidden component. This component stores the module ID of the source module. Use the module ID of your own source module if you already created one. Copy the module ID from the URL of your source module as follows: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below the Initializer.
2. In the Property ID and Canvas Label Text fields, enter moduleId.
3. In the Default Value field, enter 5eb01aa6811bf80215fd706b.

NOTE  If you built a different source module, enter its module ID here.

4. Click Save.

Configure the Plug-In Component

Add a Plug-In component. This Plug-In connects your module to the outside world. An API (application programming interface) call makes this connection. The Plug-In pulls submissions from the source module to display in your dashboard.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the moduleId Hidden component.
2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.
3. In the Inputs table. enter:

Property ID

Mapping

moduleId

moduleId

'firstName,middleName,lastName,email,dateOfBirth'

fields

NOTE  The first row references the module ID stored in the moduleId Hidden component. The second row identifies which source module fields to pull into the dashboard. The firstName, middleName, lastName, email, and dateOfBirth fields display in the dashboard for this use case. The values entered in the Mapping column (moduleId and fields) are native values in Unqork.

4. From the Internal Services drop-down, select List Submissions for Dashboard. The /fbu/uapi/system/GetSubmissions URL automatically displays in the Data Source URL field.

5. Click Save.

Configure the ViewGrid Component

Next, add a ViewGrid component to display your dashboard.

1. Drag and drop a ViewGrid component onto the canvas.
2. In the Label field, enter View Grid.
3. In the Property Name field, enter gridView.
4. In the Action field, enter null.
5. In the Inputs table, enter:

Setting

Value

ID

pluginGetSubmissions

Required

Yes (checked)
6. In the Outputs table, enter:

Setting

Value

ID

submissionId

Mapping

id
7. In the Display table, enter:

ID

Formula

Heading

firstName

 

First Name

middleName

 

Middle Name

lastName

 

Last Name

email

 

Email

dateOfBirth

=MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY')

Date of Birth

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

8. Click Save.

Lab

Summary

Now, you can test your dashboard. Enter submissions in the source module, and watch as they populate in the dashboard!

When previewed, your dashboard should look something like this: