Use Case: Showing a Delete Button in a Simple Dashboard

Overview

Sometimes you’ll need more than one action button on your dashboard. For example, one to view a submission and one to delete a submission. You learned how to show a single button in the Simple Dashboard lesson. Let's look at how to add more buttons to your existing dashboard.

In this use case, you'll learn how to create and configure a Delete button. On button-click, the associated Plug-In deletes the submission and removes it from your dashboard.

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/5eb01aa6811bf80215fd706b. If you're following along from the Simple Dashboard article, you can skip pre-configuration.

Here's how the completed use case looks in Express View:

Here'show the completed use case looks in the Module Builder:

What You'll Learn

In this article, you'll learn how to:

  • Add a second action button to a simple dashboard.

  • Add and configure a Delete button.

What You'll Need

To build this dashboard, you'll need:

  • 1 Panel component

  • 1 Initializer component

  • 2 Hidden components

  • 2 Plug-In components

  • 1 Decisions 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 the Save button.

This Initializer component triggers the Plug-In components 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 component 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.
4. Click Save.

This Plug-In connects your module to the outside world. To make this connection, you 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 fields.
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

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, middleName, lastName, email, 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.

Next, 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 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.

This Decisions component 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.

Update the ViewGrid Component

To add your second action button, you'll need to go back into your ViewGrid component.

1. Hover over the gridView ViewGrid component.

A 5-button toolbar appears above the component on hover-over.

2. Using the toolbar, click the (Settings) button.
3. Scroll to the bottom of the Display table, and enter the following:

ID

Formula

Heading

Type

CSS

Button

Delete

 

Delete

 

 

Yes (selected)

NOTE  The ID value here isn't acting as a Property ID, so it doesn't need to be in camel case. The field simply needs a value for the button to work.

4. Click Save.

Configure the Plug-In Component

This is the second Plug-In in this use case. This Plug-In deletes the submission and removes it from your dashboard.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below the submissionId Hidden component.
2. Enter pluginDelete in the Property ID and Label Text fields.
3. Select Manual from the Trigger Type.
4. Enter pluginGetSubmissions in the Post Trigger field.

NOTE  This triggers pluginGetSubmissions to refresh your dashboard after every deletion.

5. Select Deletes Multiple Module Submissions from the Internal Services drop-down.
6. Enter /fbu/uapi/forms/{{data.moduleId}}/submissions?ids={{data.submissionId}} in the Data Source URL field.

NOTE  Here, you're adjusting the Data Source URL that populates when you select the Deletes Multiple Module Submissions service. The default value requires that you enter a module ID. The new Data Source URL references the module ID stored in the moduleID Hidden component. It also references single submission IDs, stored in the submissionId Hidden component. Now, clicking your Delete button deletes one specific submission at a time.

7. Select Delete from the Request Type.

8. Click Save.

Update the Decisions Component

Next, you'll update your Decisions component to link your Delete button to the pluginDelete Plug-In component.

1. Hover over the ruleButtons Decisions component.

A 5-button toolbar appears above the component on hover-over.

2. Using the toolbar, click the (Settings) button.
3. In the Outputs table, add the following:
a. Property ID: enter pluginDelete.
b. Type: enter trigger.
4. In the Micro Decisions table, add the following:
a. buttonClick: enter Delete.
b. pluginDelete_trigger: enter GO.

5. Click Save.
6. Save your module.

Lab