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:

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

NOTE  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)

NOTE  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