Use Case: Building a Dashboard with a View Action

Overview

One of the easiest ways you can customize your dashboard is with buttons. With them, you can let your end-users view, edit, or delete submissions from a dashboard. This article will show you how to add a View button to your dashboard.

A dashboard, by nature, only displays select data points from a submission. But, some end-users might need more information. A View button lets your end-users see an entire submission in its source module.

When configured, each submission in the dashboard will have a View button to its right. If your end-user clicks on the button, they'll see the submission data in the source module.

Here's how your 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 that includes a View button.

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

  • 1 Decisions component

Pre-Configuration

These instructions assume that you have an open module saved with a title. To build this simple dashboard, continue as follows:

First, let's add a Panel component. 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.

Next, let's add an Initializer component. This Initializer triggers the Plug-In component that you'll set up next.

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.

Now, let's add a Hidden component. This is the first of 2 Hidden components in this configuration. This component houses the module ID of your source or submission module. You can pull the module ID from the source module’s hyperlink 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. Enter moduleId in the Property ID and Label Text.
3. Enter 5eb01aa6811bf80215fd706b in the Default Value field. This is the source module's module ID. If you're using your own source module, please enter the module ID of your source module here.
4. Click Save.

Next, let's add a 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 moduleId Hidden component.
2. Enter pluginGetSubmissions in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. Complete the Inputs table as follows:

Property ID

Mapping

moduleId

moduleId

'firstName,middleName,lastName,email,dateOfBirth'

fields

The first row references the module ID stored in the moduleId Hidden component. The second row shows which source module fields you're pulling into the dashboard. Here, you'll pull the firstName, middleName, lastName, email, and dateOfBirth fields. The values entered in the Mapping column (moduleId and fields) are native values in Unqork. 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 Hidden Component

This Hidden component houses the Submission IDs from the source module.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Plug-In.
2. Enter submissionId in the Property ID and Label Text.
3. Click Save.

Configure the ViewGrid Component

Next, let's bring in a ViewGrid component to display your dashboard. Notice how the Action and Event settings create the View button.

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 View in the Action field.
5. Enter View in the Event field.
6. In the Inputs table, enter the following:
a. ID: enter pluginGetSubmissions.
b. Required: select Yes.
7. In the Outputs table, enter the following:
a. ID: enter submissionId.
b. Mapping: enter id.
8. In the Display table, enter the following:

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

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

9. Click Save.

Configure the Decisions Component

Now, let's add a Decisions component. This Decision provides the trigger for your dashboard's View button.

1. Drag and drop a Decisions component onto the canvas. Place it below your ViewGrid component.
2. Enter ruleButtons in the Property ID and Label Text.
3. In the Inputs table, enter the following:

Property ID

Type

Required

Silent

buttonClick

exact

No (not checked)

No (not checked)

moduleId

exact

No (not checked)

Yes (checked)

submissionId

exact

No (not checked)

Yes (checked)

Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input doesn't have a value in its Micro Decisions column, Unqork sets it to silent. In the next steps, you won't add values to the moduleId and submissionId columns. You'll only be using these inputs in the panelDashboard_pageOpen micro decision. So, you can mark these values as silent, or let Unqork do it for you.

4. In the Outputs table, enter the following:
a. Property ID: enter panelDashboard.
b. Type: enter pageOpen.
5. In the Micro Decisions table, enter the following:
a. buttonClick: enter View.
b. panelDashboard_pageOpen: enter =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId).

6. Click Save.
7. Now, Save your module.

Lab