Use Case: Removing the Action Button from a Dashboard

Overview

By default, dashboards made with the ViewGrid component include an action button. Without extra configuration, this button shows as a Submit button. Sometimes, you might want to use a dashboard simply to display data, without any buttons. Removing the action button from your dashboard is easy.

In this use case, you'll learn how to remove the action button. This use case also includes steps for building a simple dashboard. The dashboard pulls submissions from the following source module: https://trainingx.unqork.io/#/display/5eab6c12811bf80215fd6d86.

Here's how your use case looks in Express View, before removing the action button:

Here's how your completed use case looks, with the default Submit button removed:

Here's how your completed use case looks in the Module Builder:

What You’ll Learn

In this use case, you’ll learn how to:

  • Remove the action button from a dashboard.

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

1. Drag and drop an Initializer component onto your canvas. Place your Initializer inside the Panel.
2. Enter initPluginGetSubmissions 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 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://trainingx.unqork.io/#/display/5eab6c12811bf80215fd6d86.

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 5eab6c12811bf80215fd6d86 in the Default Value field. This is the source module's module ID.
4. Click Save.

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,lastName,dateOfBirth'

fields

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

This is the second Hidden component in this configuration. It houses the submission ID.

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

Lastly, let's bring in a ViewGrid component to display your dashboard. It's here that you'll set the Action field to null, removing the action button from 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. Entering null here removes the action button from your 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:

Property ID

Formula

Heading

firstName

 

First Name

lastName

 

Last Name

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.
9. Save your module.

Lab