How to: Display a Delete Button in a Simple Dashboard

Many dashboards require multiple buttons to perform various actions. For example, one to view a submission and one to delete it.

In this how-to guide, you'll learn how to display a Delete button in a dashboard.

This example includes steps for building a simple dashboard. The dashboard retrieves submissions from the following source module: https://trainingx.unqork.io/#/display/5eb01aa6811bf80215fd706b.

Preconfiguration

Begin by setting up basic components for this example.

Configure the Panel Component

This Panel component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto the canvas.

2. In the Property ID field, enter panelDashboard.

3. Click Save Component.

Configure the Initializer Component

Next, add an Initializer component to trigger a Plug-In component that you'll set up next.

1. Drag and drop an Initializer component inside the panelDashboard Panel component.

2. In the Property ID and Canvas Label Text fields, enter initStart.

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	pluginGetSubmissions	trigger	GO

   You’ll configure the pluginGetSubmissions Plug-In component in the next steps.

5. Click Save Component.    

Configure the First Hidden Component

Now, let's add a Hidden component to store the module ID of your source or submission module.

1. Drag and drop a Hidden component inside the panelDashboard Panel component, below the Initializer component.

2. In the Property ID and Label Text fields, enter moduleId.

3. In the Default Value field, enter 5eb01aa6811bf80215fd706b.

   This module ID is taken from the source module: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.

4. Click Save Component.

Configure the Plug-In Component

This Plug-In component connects the module to the external systems using an API. You’ll use this component to retrieve submissions and display them in your dashboard.

1. Drag and drop a Plug-In component inside the panelDashboard Panel component, below the Hidden component.

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.

3. From the Internal Services drop-down, select List Submissions for Dashboard. The Data Source URL field autopopulates.

4. In the Inputs table, enter the following:

   #	Property ID	Mapping
   1	moduleId	moduleId
   2	'firstName,middleName,lastName,email,dateOfBirth'	fields

   The first row reference the module ID stored in the moduleId Hidden component. The second row represents the fields that populate the dashboard. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork platform.

5. Click Save Component.

Configuration

Next, you’ll add the second action button by updating the ViewGrid component and configuring a new Plug-In and Decisions component.

Update the ViewGrid Component

1. Hover over the gridView ViewGrid component and click the (Settings) button.

2. End the end of the Display table, enter the following:

   ID	Formula	Heading	Type	CSS	Button
   Delete		Delete			(checked)

   The ID value here is not acting as a Property ID, so it does not need to be in camel case. The field simply needs a value for the button to work.

   

3. Click Save Component.

Configure the Plug-In Component

This Plug-In component uses the Deletes Multiple Module Submissions API to delete the submission and remove it from your dashboard.

1. Drag and drop a Plug-In component onto the canvas, placing it below the submissionId Hidden component.

2. In the Property ID and Canvas Label Text fields, enter pluginDelete.

3. From the Internal Services drop-down, select Deletes Multiple Module Submissions.

4. In the Data Source URL field, enter /fbu/uapi/forms/{{data.moduleId}}/submissions?ids={{data.submissionId}}.

   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.

4. From the Post Trigger drop-down, enter pluginGetSubmissions.

   Doing so triggers pluginGetSubmissions Plug-In component to refresh your dashboard after every deletion.

   

5. Click Save Component.

Configure the Decisions Component

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

1. Drag and drop a Decisions component onto the canvas, placing it below the gridView ViewGrid component.

2. In the Property ID and Canvas Label Text fields, enter ruleButtons.

3. In the Inputs table, enter the following:

   #	Source	Type	Silent
   1	buttonClick	exact
   2	moduleId	exact	(checked)
   3	submissionId	exact	(checked)

4. In the Outputs table, enter the following:

   #	Source	Type
   1	panel	pageOpen
   2	pluginDelete	trigger

5. In the Conditionals table, enter the following:

   #	buttonClick	moduleId	submissionId	panel_pageOpen	pluginDelete_trigger
   1	Delete				GO
   2	View			=concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId)

   

6. Click Save Component.

7. Save your module.

Here's how the completed example looks in the Module Builder:

Here's how the completed example looks in Express View: