Use Case: Building a Remote Execute Dashboard with a Delete Action

Overview

In this article, you'll learn how to build a remote execute dashboard with a Delete button. Deleting submissions is possible thanks to the Deletes Multiple Module Submissions Unqork service. Remember, it's a best practice to remote execute any API (application programming interface) calls in front-end modules. So, one server-side module will handle getting submissions from your dashboard. Another server-side module will handle deleting submissions from your dashboard. All together, you'll have 4 modules:

# Module Title Description

1

 Simple Module for Remote Execute

A simple module where your end-user fills out their personal information. This is the source module for your dashboard. We'll refer to this as Module 1.

2

 Remote Execution

Shows the back-end functions, including the module ID used by the remote execute. This module will get submissions to display in your dashboard. We'll refer to this as Module 2.
3

Simple Dashboard with Remote Execute

The dashboard module, where you'll display submission information from Module 1. We'll refer to this as Module 3.

4

 Remote Execution for Deleting Submissions This module will handle deleting submissions after your end-user clicks the dashboard's Delete button. We'll refer to this as Module 4.

If you're continuing along from the Use Case: Remote Executing a Dashboard article, your Modules 1 and 2 will stay the same. If you haven't worked through that article, begin with the Pre-Configuration steps below.

Here's how your completed dashboard will work in Express View:

What You'll Learn

In this article, you'll learn how to:

  • Add a Delete button to a dashboard.
  • Use a remote execute to delete submissions from a dashboard.

Let's start by creating the Simple Module for Remote Execute module. In this module, you'll set up fields to record the end-user's personal information.

For this module, you'll need:

  • 3 Text Field components
  • 1 Email component
  • 1 Date Input component
  • 1 Button component

Here's how the completed module looks in the Module Builder. Notice how the optional Panel and Columns components deliver improved organization:

Configure the Text Field Components

1. Drag and drop 3 Text Field components onto your canvas.
2. Enter the following Property IDs and Label Text:

Property ID

Label Text

firstName

First Name

middleName

Middle Name

lastName

Last Name
3. Save each component as you add it.

Configure the Email Component

1. Drag and drop an Email component onto your canvas. Place your Email component below your Text Field components.
2. Enter emailAddress in the Property ID.
3. Enter Email in the Label Text.
4. Click Save.

Configure the Date Input Component

1. Drag and drop a Date Input component onto your canvas. Place your Date Input component below your Email component.
2. Enter dateOfBirth in the Property ID.
3. Enter Date of Birth in the Label Text.
4. Enter 125 in the Display (+/-) Years From the Current Date field.
5. Select Past from the Restrict To drop-down.
6. Click Save.

Configure the Button Component

1. Drag and drop a Button component onto your canvas. Place it below your Date Input component.
2. Enter btnSave in the Property ID.
3. Enter Save in the Label Text.
4. Enter Saved! in the Success Message.
5. Click Save.
6. Save your module.

Next, you'll create the Remote Execution module (Module 2). This is the module that contains the Plug-In logic. Think about this module as a middleman or a gatekeeper. This module exists server-side, inaccessible to users outside the Module Builder. When you preview this module, you'll see a blank screen. You'll only be able to see module details in the DevTools Console.

For this module, you'll need:

  • 1 Initializer component
  • 1 Plug-In component
  • 2 Hidden components
  • 1 Data Workflow component

To set up your Data Workflow, you'll need:

  • 1 Input operator

  • 1 Output operator

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

Turning on Server-Side Execute

Before adding components to your Module 3, you'll adjust the module settings. By setting your module to server-side execute, your module becomes inaccessible to anyone without Module Builder access.

1. Click the Settings button on the left side of the Module Builder.
2. Set the Server Side Execution Only toggle to ON.

3. Click Save Settings.

Configure the Initializer Component

Next, let's return to the Module Builder and add an Initializer component. The Initializer component is what triggers the Plug-In component. You'll set the Trigger Type to New Submission so that the Initializer fires on page-load.

1. Drag and drop an Initializer component onto your canvas.
2. Enter initPluginGetSubmissions in the Property ID and Label Text.
3. Select New Submission from the Trigger Type choice chip.
4. In the Outputs table, enter the following:
a. Property ID: enter pluginGetSubmissions.
b. Type: enter trigger.
c. Value: enter GO.

5. Click Save.

Configure the First Hidden Component

You'll use 2 Hidden components in this module. Your first Hidden component, moduleId, houses the module ID of the Simple Module for Remote Execute (Module 1). For security purposes, you don't want this module ID stored in the database. So, we'll keep the Store Data in Database toggle set to OFF.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Initializer.
2. Enter moduleId in the Property ID and Label Text.
3. Enter 5f8d9eb9f1a98d024e984c75 in the Default Value.

Note: This is the module ID of our Simple Module for Remote Execute (Module 1). It's drawn from the source module's hyperlink as follows: https://training.unqork.io/#/form/5f8d9eb9f1a98d024e984c75/edit.

If you created your own Module 1, be sure to enter that module's unique module ID.

4. Click Save.

Configure the Second Hidden Component

Now for the second Hidden component. This Hidden component stores the submission data retrieved by the pluginGetSubmissions Plug-In.

1. Drag and drop a Hidden component onto your canvas. Place this Hidden component below the first.
2. Enter submissions in the Property ID and Label Text.
3. Set the Store Data in Database toggle to ON. This allows the submission data to be brought into the dashboard.

4. Click Save.

Configure the Plug-In Component

Next, let's add a Plug-In component. The Plug-In's job here is to retrieve the submission data from your source module.

1. Drag and drop a Plug-In component onto the canvas. Place your Plug-In component below your Initializer.
2. Enter pluginGetSubmissions in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. In the Inputs table, enter the following:

Property ID

Mapping

moduleId

moduleId

'firstName,lastName,emailAddress'

fields

Note: The first row defines which module you’ll get the submissions from. The second row shows which fields you'll pull into the Dashboard. Here you'll pull firstName, lastName, and emailAddress. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform. Add them exactly as shown.

5. Select List Submissions for Dashboard from the Internal Services drop-down. The Request Type and Data Source URL pre-populate.

6. Click Save.

Configure the Data Workflow Component

Lastly, for this module, let's configure a Data Workflow component. This component pulls the submission data out of the Plug-In, pushing it to the submissions Hidden component. A simple Input to Output Data Workflow will do the trick.

1. Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow below your Hidden components.
2. Enter dwfSaveSubmissions in the Property ID and Label Text fields.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the Input operator's Info window as follows:

Setting

Value

Category

Input

Component

pluginGetSubmissions

Required

Yes

Source

Default

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.
2. Configure the Output operator's Info window as follows:

Setting

Value

Category

Output

Component

submissions

Action

value
3. Connect the output port (right) of the Input operator to the input port (left) of the Output operator.
4. Click Save.
5. Save your module.

Now, let's move on to your third module: the Simple Dashboard with Remote Execute. Module 3 calls on the Remote Execution module (Module 2). The Plug-In in this module retrieves the submission data to display in a simple dashboard.

For this module, you'll need:

  • 1 Initializer component
  • 1 Plug-In component
  • 1 Hidden component
  • 1 ViewGrid component

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

Configure the Initializer Component

Like in the last module, the Initializer component triggers the Plug-In component on page-load.

1. Drag and drop an Initializer component onto your canvas.
2. Enter initPluginRemoteSubmissionsModule 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 pluginExecuteSubmissionsModule.
b. Type: enter trigger.
c. Value: enter GO.

5. Click Save.

Configure the Plug-In Component

Next, let's add a Plug-In component. This Plug-In component pulls the submission data stored in the submissions Hidden component in your Remote Execution module (Module 2). Then, stores that submission data in a Hidden component you'll create in this module (Module 3).

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In below your Initializer.
2. Enter pluginExecuteSubmissionsModule in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. In the Outputs table, enter the following:
a. Property ID: enter submissionsFromPlugin.
b. Mapping: enter data.resolved.submissions.

Note: The Property ID here references a Hidden component you'll set up in the next step. The Hidden component will store the submission data from Module 2. The Mapping column tells the system to get the submission data from the submissions Hidden component in Module 2.

5. Select Execute Module from the Internal Services drop-down. The Data Source URL and Request Type pre-populate.
6. In the Data Source URL, replace {moduleID} with the module ID from your Remote Execution module (Module 2). In this example, the module's module ID is 5f8d9fec19c4e6024ed45c48.

7. Click Save.

Configure the Hidden Component

Now, let's add a Hidden component. This Hidden component stores the submissions from your Remote Execution module (Module 2).

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Plug-In.
2. Enter submissionsFromPlugin 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.

1. Drag and drop a ViewGrid component onto the canvas. Place your ViewGrid below your Hidden component.
2. Enter gridDashboard in the Property Name.
3. Enter Dashboard in the Label.
4. Enter null in the Action field. This removes the default Submit button from your dashboard.
5. In the Inputs table's ID column, enter submissionsFromPlugin.
6. In the Display table, enter the following:

ID

Formula

Heading

firstName

 

First Name

lastName

 

Last Name

emailAddress

 

Email

7. Click Save.
8. Save your module.

Update Module 3: Simple Dashboard with Remote Execute

Here you'll make the first round of updates to your Module 3. This is where you'll add the Delete button and supporting components. After creating your Module 4, you'll need to revisit your Module 3 one more time.

To update your dashboard module, you'll need:

  • 1 Hidden component
  • 1 Decisions component
  • 1 Plug-In component

Here's how the updated module looks in the Module Builder:

Update the ViewGrid Component

Here you'll make 2 changes to your ViewGrid:

  • Adding the Delete button.
  • Setting up the Outputs table to export submission IDs. On clicking a particular row's Delete button, that row's submission ID will export to a Hidden component. This way, you can tell the Deletes Multiple Module Submissions API call which submission to remove. For now, you'll use a placeholder Property ID in the Outputs table. In the next step, you'll set up the Hidden component that'll store the submission ID.
1. Hover over the gridDashboard ViewGrid component.

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

2. Click the (Settings) button to open the Configuration window.
3. In the Outputs table, enter the following:
a. ID: enter exportId.
b. Mapping: enter _id.
4. In the Display table, add the following row:
a. ID: enter Delete.
b. Heading: enter Delete.
c. Button: Yes (checked).

5. Click Save.

Configure the Hidden Component

Here, you'll create a Hidden component to store the submission ID exported by the ViewGrid. Remember to use the same placeholder Property ID you used in the ViewGrid's Outputs table.

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

Configure the Decisions Component

Next, let's set up your Decisions component. This component is what creates an action when your end-user clicks the Delete button. On button-click, the Decisions component will trigger the Plug-In you'll set up next. That Plug-In is what will trigger the remote execute of your Module 4.

1. Drag and drop a Decisions component onto the canvas. Place it below your exportId Hidden component.
2. Enter ruleButton in the Property ID and Label Text.
3. In the Inputs table, enter the following:
a. Property ID: enter buttonClick.
b. Type: enter exact.
c. Required: Yes (checked).
4. In the Outputs table, enter the following:
a. Property ID: enter pluginExecuteDelete.
b. Type: enter trigger.
5. In the Micro Decisions table, enter the following:
a. buttonClick: enter Delete.
b. pluginExecuteDelete_trigger: enter GO.

6. Click Save.

Configure the Plug-In Component

Now for the last component in this module, a Plug-In. This Plug-In will execute your Remote Execution for Deleting Submissions module (Module 4). You'll need to revisit this Plug-In later to finalize the connection. But, let's get it started for now.

1. Drag and drop a Plug-In component onto the canvas. Place it below your Decisions component.
2. Enter pluginExecuteDelete in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. Enter pluginExecuteSubmissionsModule in the Post Trigger. This ensures your dashboard refreshes after deleting a submission.
5. In the Inputs table, enter the following:
a. Property ID: enter exportId.
b. Mapping: enter data.ids.
c. Required: Yes (checked).
6. Select Execute Module from the Internal Services drop-down. The Request Type and Data Source URL pre-populate.

7. Click Save.
8. Save your module.

Create Module 4: Remote Execution for Deleting Submissions

Next, let's create your fourth and final module. This module handles deleting submissions from Module 1. On clicking your dashboard's Delete button, the pluginExecuteDelete Plug-In in Module 3 calls on Module 4. This in turn causes an Initializer to fire, which triggers a Plug-In. It's this Plug-In in Module 4 that runs the Deletes Multiple Module Submissions API call. Once deleted, the submission disappears from your dashboard.

For this module, you'll need:

  • 1 API Specificationsnippet
  • 1 Hidden component
  • 1 Initializer component
  • 1 Plug-In component

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

Turning on Server-Side Execute

Before adding components to your Module 4, you'll adjust the module settings. By setting your module to server-side execute, your module becomes inaccessible to anyone without Module Builder access.

1. Click the Settings button on the left side of the Module Builder.
2. Set the Server Side Execution Only toggle to ON.

3. Click Save Settings.

Add the API Specification Snippet

Let's return to the Module Builder and start configuring the module. Here, you'll use the Unqork API Specification snippet. Using this snippet is a best practice when creating remote execute or API modules.

1. In the left sidebar of the Module Builder, click the Snippets button.
2. Enter API Specification in the search bar.
3. Drag and drop the API Specification snippet onto your canvas.

For the API Specification snippet to work properly, you'll need to move the panelInfo, panelRequest, panelConfig, and panelResponse Panels outside of the panelApiTemplate Panel. Then, you'll delete the empty panelApiTemplate Panel component.

4. Hover over the panelInfo Panel component.
5. Click and drag the (Move) button, dropping the panelInfo Panel outside of the panelApiTemplate Panel.
6. Repeat for the panelRequest, panelConfig, and panelResponse Panels.
7. Hover over the empty panelApiTemplate Panel component.
8. Click the (Remove) button.

Update the panelInfo Panel

Next, let's make some updates to the components in the panelInfo Panel. This information says what the purpose of this remote execute, or API, module is.

Update the description HTML Element Component

1. Hover over the description HTML Element component.
2. Click the (Settings) button to open the Configuration window.
3. In the Content field, replace the default text with the following: This module is to host the Deletes Multiple Module Submissions call that is used to delete module submissions on the dashboard.
4. Click Save.

Update the method Hidden Component

1. Hover over the method Hidden component.
2. Click the (Settings) button to open the Configuration window.
3. In the Default Value field, replace the default text with the following: DELETE
4. Click Save.

Update the panelRequest Panel

Next, let's set up the panelRequest Panel. Components added to this Panel are part of the API request. That is, they house the values the Plug-In will use when running the Deletes Multiple Module Submissions API call. Here, you'll only need a single Hidden component. You'll notice a default requestParameter Hidden component included in the snippet. But let's delete that for now and configure our own. That way, you won't have to update its pre-configured settings.

Remove the requestParameter Hidden Component

1. Hover over the requestParameter Hidden component.
2. Click the (Remove) button.

Configure the Hidden Component

1. Drag and drop a Hidden component onto your canvas, placing it inside the panelRequest Panel.
2. Enter ids in the Property ID and Label Text.
3. Click Save.

Update the panelConfig Panel

Now, let's update the panelConfig Panel. This Panel is where you'll add all the components involved in making your module work. In this case, you'll add an Initializer and a Plug-In.

Configure the Initializer component

Let's set up your Initializer. This Initializer will trigger the pluginDeleteSubmissions Plug-In you'll set up next. One key step is using a Trigger Type of New Submission. This way, the Initializer runs whenever the pluginExecuteDelete Plug-In in your Module 3 calls your Module 4.

1. Drag and drop an Initializer component onto your canvas, placing it inside the panelConfig Panel.
2. Enter initExecuteDeleteSubmissions 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 pluginDeleteSubmissions.
b. Type: enter trigger.
c. Value: enter GO.

5. Click Save.

Configure the Plug-In component

The last step in configuring this module is setting up your Plug-In. This Plug-In is what deletes submissions from your Simple Module for Remote Execute (Module 1). So, you'll need to have that module's module ID handy to complete the configuration.

1. Drag and drop a Plug-In component onto the canvas, placing it inside the panelConfig Panel.
2. Enter pluginDeleteSubmissions in the Property ID and Label Text.
3. Select Manual from the Trigger Type.
4. In the Inputs table, enter the following:
a. Property ID: enter ids.
b. Mapping: enter ids.
c. Required: Yes (checked).
5. Select Deletes Multiple Module Submissions from the Internal Services drop-down. The Request Type and Data Source URL pre-populate.
6. In the Data Source URL, replace {moduleId} with 5f8d9eb9f1a98d024e984c75.

NOTE  This is the module ID of our Simple Module for Remote Execute (Module 1). It's drawn from the source module's hyperlink as follows: https://training.unqork.io/#/form/5f8d9eb9f1a98d024e984c75/edit.

If you created your own Module 1, enter your module's unique module ID instead.

7. Click Save.
8. Save your module.

Update Module 3: Simple Dashboard with Remote Execute

Now for the last step of the configuration. This final link lets your dashboard's Delete button actually delete a submission. You'll need to enter the module ID of your Module 4 in the pluginExecuteDelete Plug-In. So, revisit your Module 4 and copy the module ID.

Update the Plug-In component

1. Hover over the pluginExecuteDelete Plug-In component.
2. Click the (Settings) button to open the Configuration window.
3. In the Data Source URL, replace {moduleId} with 5f90843a7bfe8d023c981142.

NOTE  This is the module ID of our Remote Execution for Deleting Submissions module (Module 4). It's drawn from the module's hyperlink as follows: https://training.unqork.io/#/form/5f90843a7bfe8d023c981142/edit . If you created your own Module 4, be sure to enter your module's unique module ID instead.

4. Click Save.
5. Save your module.

Lab

You'll find the completed Remote Execute Dashboard with Delete Action use case modules below: