Using Internal API Calls in Unqork

Overview

Let’s configure some internal API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls (application programming interface) to better understand how to use Unqork’s internal API.

What You’ll Learn

In this article, you’ll learn how to:

Use Case

This use case makes use of two modules:

  • Schema Module: First, you'll set up a Schema module to store your submissions. You'll reference the module ID for your Schema module in your internal API calls.

  • Submissions Module: Then, you'll collect the end-user’s First Name, Last Name, a joke of their choosing, and the joke’s answer. The submitted responses are the submissions for this use case.

In this use case, you'll outline the configuration of each of these modules. Then, you'll configure each API call.

Configure the Schema Module

Set up a Schema module to store your submissions. Reference the module ID for your Schema module in your internal API calls. This is how your Schema module looks in the Module Builder:

What You’ll Need

To set up the Schema module, you’ll need four Hidden components.

Configure the Hidden Components

The Schema module stores submission data. So, the Schema module only needs fields that mirror the data-entry fields from your Submissions module.

Use a Hidden component that matches each data-entry field. You need a Hidden component for First Name, Last Name, the end-user's joke, and the joke's answer.

1. Create a new module.
2. Enter a Title for your module that contains the word Schema.
3. Drag and drop four Hidden components onto your canvas.
4. Enter the following Property IDs and Label Text:

Property ID

Label Text

firstName

firstName

lastName

lastName

jokeQuestion

jokeQuestion

jokeAnswer

jokeAnswer
5. Set the Store Data to Database toggle to ON for each component.

NOTE  You must enable Store Data to Database for each component in your Schema module for them to return in the API response.

6. Save each component as you configure it.
7. Save your module.

With your Hidden components in place, your Schema module is complete. Make note of the module ID for your Schema module, though, because you'll need it to make your API calls later. You can find the module ID in the Express View URL. In the following example, identify the bolded text: https://trainingx.unqork.io/#/display/5ece83f7cf02e4020f247408.

Configure the Submissions Module

The second module in this configuration is your Submissions module. In this module, you collect the end-user’s First Name, Last Name, a joke of their choosing, and the joke’s answer. Each set of answers creates a single submission. The next sections cover some of the internal API calls that manage that submission data.

What You'll Need

Each API call requires its own configuration, but they all share:

  • 1 Initializer component

  • 1 Hidden component

Your Submissions module looks like this in the Module Builder before configuring your API calls:

Configure the Initializer Component

Each of your API calls must reference your Schema module. You can enter the module ID into every API call manually, but that's not a best practice. Instead, use an Initializer component to set the module ID for every new submission. The Initializer stores the module ID in a Hidden component that you'll add in the next step. At some point, you might need to update the Schema module ID. With this approach, you only need to update the module ID in one component, instead of several.

1. Create a new module.
2. Enter a Title for your module.
3. Drag and drop an Initializer component onto your canvas.
4. Enter initNewSubmission in the Property ID and Label Text fields.
5. Select New Submission from the Trigger Type.
6. Enter the following values in the Outputs table:
Property ID Type Value

moduleId

value

{your Schema module's unique module ID}

NOTE  The Property ID listed in the Outputs table corresponds to the Hidden component you’ll add in the next step. This is where the Schema module ID is stored. In the Value column, enter your Schema module's unique module ID. The image below displays the module ID from the sample Schema module.

7. Click Save.

Configure the Hidden Component

Next, add the Hidden component referenced by the Initializer. You'll reference this component later in this use case to pull the module ID into your API calls.

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

Configure the Create Module Submissions API Call

You need a portal for your end-user in your Submissions module to collect their First Name, Last Name, their joke, and their joke's answer. Then, you use a Create Module Submissions API call to store submissions in your Schema module.

What You'll Need

To set up this API call, you'll need:

  • 1 Panel component

  • 1 Columns component

  • 2 Text Field components

  • 2 Text Area components

  • 1 Plug-In component

  • 1 Button component

Your Create Module Submissions Call looks like this in the Module Builder:

NOTE  The above image uses optional HTML Element components to add a header and description in the Panel.

Configure the Panel Component

Your Panel acts as a container for the components involved in this stage of the configuration.

1. Drag and drop a Panel component onto your canvas. Place your Panel components below your Hidden component.
2. Enter Create in the Title field.
3. Enter panelCreateModuleSubmissions in the Property Name field.
4. Click Save.

Configure the Columns Component

A Columns component keeps things organized. Use the default setting of two columns.

1. Drag and drop a Columns component onto your canvas. Place your Columns component inside your panelCreateModuleSubmissions panel.
2. Enter colCreateSubmissions in the Property ID field.
3. Click Save.

Configure the Text Field Components

Add two Text Field components to collect your end-user's First Name and Last Name.

1. Drag and drop two Text Field components onto your canvas. Place one component in each column of the Columns component.
2. Enter the Property IDs and Label Text as follows:

Property ID

Label Text

firstName

First Name

lastName

Last Name

NOTE  The firstName field is in the first column, and the lastName field is in the second.

3. Save each component as you add it.

Configure the Text Area Components

Add two Text Area components to collect your end-user's joke and the joke's answer.

1. Drag and drop two Text Area components onto your canvas. Place one component in each column of the Columns component.
2. Enter the Property IDs and Label Text as follows:

Property ID

Label Text

jokeQuestion

Joke Question

jokeAnswer

Joke Answer

NOTE  The jokeQuestion field is in the first column, and the jokeAnswer field is in the second.

3. Save each component as you add it.

Configure the Plug-In Component

Add a Plug-In component to handle the Create Module Submissions API call. You'll map the data from your input fields into the call to create the submissions and store them in the Schema module.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component below your columns.
2. Enter pluginCreateModuleSubmission in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Enter the following values in the Inputs table:

Property ID

Mapping

firstName

data.firstName

lastName

data.lastName

jokeAnswer

data.jokeAnswer

jokeQuestion

data.jokeQuestion

5. Select Create Module Submission(s) from the Internal Services drop-down. The Data Source URL autopopulates.
6. Replace {moduleId} with {{data.moduleId}} in the Data Source URL.

NOTE  This Plug-In maps the data from your moduleId Hidden component into the Data Source URL.

7. Click Save.

Configure the Button Component

Add a Button component to trigger the Plug-In and the API call it contains.

1. Drag and drop a Button component onto your canvas. Place your Button component below the Plug-In.
2. Enter btnCreateSubmission in the Property ID field.
3. Enter Create Submission in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginCreateModuleSubmission in the Trigger on Click field.

6. Click Save.

Configure the Get Module Submissions API Call

Now that an end-user can create submissions, you must add functionality to view those submissions. There are a few options for GET API calls in Unqork. In this use case, you'll use the Get Module Submissions call, which pulls the data back from your Schema module. Then, you'll use the DevTools Console to view the submissions.

What You'll Need

To set up this API call, you'll need:

  • 1 Panel component

  • 1 Plug-In component

  • 2 Hidden components

  • 1 Button component

  • 1 Data Workflow component

You'll need the following Data Workflow operators:

  • 1 Input operator

  • 1 Col2Array operator

  • 1 Output operator

Your Get Module Submissions call looks like this in the Module Builder:

You can use optional HTML Element components to add a header and description in the Panel. The image above displays the HTML Element component.

Configure the Panel Component

Your Panel acts as a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas. Place your Panel component below your Create panel.
2. Enter panelGetModuleSubmissions in the Property ID field.
3. Enter Get Module Submissions in the Title field.
4. Click Save.

Configure the Plug-In Component

Add a Plug-In component to handle the Get Module Submissions API call.

1. Drag and drop a Plug-In component onto your canvas. Place the Plug-In component inside your panelGetModuleSubmissions Panel.
2. Enter pluginGetSubmissionsCall in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Enter dwfNestGetSubmissionsCall in the Post Trigger field.
5. Enter the following values in the Inputs table:

Property ID

Mapping

'created'

sortBy

'-1'

sortOrder

NOTE  This sorts the submissions in descending order, starting with the most recent. Use single quotes around the values in the Property ID field to indicate to the component that you're not referencing actual Property IDs. Instead, you're hardcoding these values into the API call.

6. Enter the following in the Outputs table:

Property ID

Mapping

getSubmissionsResponse

data

7. Select Get Module Submissions from the Internal Services drop-down. The Data Source URL autopopulates.
8. Replace {moduleId} with {{data.moduleId}} in the Data Source URL:

9. Click Save.

Configure the Hidden Component

Add a Hidden component to hold the response of your API call.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your pluginGetSubmissionsCall Plug-In.
2. Enter getSubmissionsResponse in the Property ID and Label Textfields.
3. Click Save.

Configure the Hidden Component

You need another Hidden component to serve as the output for your Data Workflow. The component must exist in the module before you can add it as an output for your Data Workflow.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component beneath your Data Workflow.
2. Enter getSubmissionsAfterNesting in the Property ID and Label Text fields.
3. Click Save.

Configure the Data Workflow Component

There are different ways to log the response of this call and display the data. In this use case, you'll add a Data Workflow component to nest the submission data returned by your API call.

1. Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow component under your getSubmissionsResponse Hidden component.
2. Enter dwfNestGetSubmissionsCall in the Canvas Label Text and Property Name fields.

3. Set the Trigger Type to Manual.

4. Save your Data Workflow.

Configure the Input Data Operator

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

Setting

Selection

Category

Input

Component

pluginGetSubmissionsCall

Required

Yes

Source

Default

Configure the Col2Array Data Operator

1. Drag and drop a Col2Array operator onto your workflow canvas.
2. Configure the Col2Array operator’s Info window as follows:

Setting

Selection

Category

Col2Array

Label

 

Drop Empty

Yes

Path

data.rawData

Default Value

 
3. Connect the output port (right) of the Input operator to the input port (left) of the Col2Array operator.

Configure the Output Data Operator

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

Setting

Selection

Category

Output

Component

getSubmissionsAfterNesting

Action

value

NOTE  You'll create the getSubmissionsAfterNesting Hidden component next. This Hidden component serves as the output for your Data Workflow.

3. Connect the output (right-hand) port of the Col2Array operator to the input (left-hand) port of the Output operator.
4. Click Save.

Configure the Button Component

Configure a Button component to trigger your Plug-In. Your btnGetSubmissions triggers your Get Submissions API call.

1. Drag and drop a Button component onto your canvas. Place your Button component below your getSubmissionsAfterNesting Hidden component.
2. Enter btnGetSubmissions in the Property ID field.
3. Enter Get Submissions in the Label Text field.
4. Select Event from the ActionType.
5. Enter pluginGetSubmissionsCall in the Trigger on Click field.

6. Click Save.

Configure the List Submissions for Dashboard API Call

You can also perform a List Submissions for Dashboard API call. This is the second GET API option you have in Unqork. This call is similar to Get Module Submissions, but it returns a flat array of data. Flat arrays work well as inputs for ViewGrids. So, use List Submissions for Dashboard to see your submissions in your application rather than relying on the Console to view them.

What You'll Need

To set up this API call, you'll need:

  • 1 Panel component

  • 1 Plug-In component

  • 1 Hidden component

  • 1 Button component

  • 1 ViewGrid component

  • 1 Data Workflow component

You'll need the following Data Workflow operators:

  • 1 Input operator

  • 1 Output operator

Your List Module Submissions for Dashboard call looks like this in the Module Builder:

NOTE  The image above uses optional HTML Element components, which allow you to display a header and description in the Panel.

Configure the Panel Component

Add a Panel component to provide a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas. Place your Panel component below your Get Module Submissions panel.
2. Enter List Submissions for Dashboard in the Title field.
3. Enter panelListSubmissions in the Property Name field.
4. Click Save.

Configure the Plug-In Component

Configure a Plug-In component to handle the List Submissions for Dashboard API call.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component in panelListSubmissions Panel.
2. Enter pluginGetSubmissionsForDashboard in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Enter dwfOutput in the Trigger Type field.
5. Enter the following in the Inputs table:

Property ID

Mapping

moduleId

moduleId

'jokeQuestion, jokeAnswer, firstName, lastName'

fields

'-created'

sort

6. Select List Submissions for Dashboard from the Internal Services drop-down. The Data Source URL autopopulates.
7. Click Save.

Configure the Data Workflow Component

Use a List Submissions for Dashboard call to bring back an unnested array of data. This lets you put the entire response in a Hidden component. Then, use a simple Data Workflow to separate the data.

1. Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow component under your pluginGetSubmissionsForDashboard Plug-In.
2. Enter dwfOutput in the Canvas Label Text and Property Name fields.

3. Set the Trigger Type to Manual.

4. Save your Data Workflow.

Configure the Input Data Operator

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

Setting

Selection

Category

Input

Component

pluginGetSubmissionsForDashboard

Required

Yes

Source

Default

Configure the Output Data Operator

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

Setting

Selection

Category

Output

Component

listSubmissionsResponse

Action

value

NOTE  You'll create the listSubmissionsResponse Hidden component next. Again, this Hidden component serves as the output for your Data Workflow.

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

Configure the Hidden Component

Add a Hidden component to hold the output for your Data Workflow.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component under your dwfOutput Data Workflow.
2. Enter listSubmissionsResponse in the Property ID and Label Text fields.
3. Click Save.

Configure the Button Component

Configure a Button component to execute the Plug-In. Your btnListSubmissionsforDashboard triggers your List Submissions for Dashboard API call.

Next, you'll create the listSubmissionsResponse Hidden component. Again, this Hidden component serves as the output for your Data Workflow.

1. Drag and drop a Button component onto your canvas. Place your Button below your listSubmissionsResponse Hidden component.
2. Enter btnListSubmissionsForDashboard in the Property ID field.
3. Enter List Submissions for Dashboard in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginGetSubmissionsForDashboard in the Trigger on Click field.

NOTE  This ties your Button component to the ViewGrid component that you'll add in the next step.

6. Click Save.

Configure the ViewGrid Component

Finally, configure a ViewGrid component to display the data retrieved using this API call.

1. Drag and drop a ViewGrid component onto your canvas. Place your ViewGrid component under your columns.
2. Enter ViewGrid List Submissions Response in the Label field.
3. Enter vgSubmissionsReponse in the Property Name field.
4. Enter null in the Action field. This removes the default Submit button from your dashboard.
5. Complete the Inputs table as follows:

ID

Required

listSubmissionsResponse

Yes (checked)
6. Complete the Display table as follows:

ID

Formula

Heading

Type

jokeQuestion

 

Question

string

jokeAnswer

 

Answer

string

firstName

 

Submitted By

string

id

 

SubmissionId

string

7. Click Save.

Configure the Update Module Submissions Call

Now that you added a way to create and view submissions, you must add functionality to update those submissions. Set up an Update Module Submissions API call within your Submissions module. This allows you to change the end-user's name or joke, if needed.

What You'll Need

To set up this API call, you'll need:

  • 1 Panel component

  • 1 Columns component

  • 4 Text Field components

  • 2 Text Area components

  • 1 Plug-In component

  • 1 Button component

Your Update Module Submissions call looks like this in the Module Builder:

NOTE  The image above uses optional HTML Element components, which allow you to display a header and description in the Panel.

Configure the Panel Component

Add a Panel component to provide a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas. Place your Panel components below your Read panel.
2. Enter Update in the Title field.
3. Enter panelUpdateModuleSubmissions in the Property Name field.
4. Click Save.

Configure the Columns Component

Add a Columns component to keep things organized. You'll use the default setting of 2 columns.

1. Drag and drop a Columns component onto your canvas. Place your Columns component inside your Update panel.
2. Enter colUpdateSubmissions in the Property ID field.

NOTE  For this use case, you'll use the component default of 2 columns.

3. Click Save.

Configure the Text Field Components

Add two Text Field components. These Text Fields work differently than the Text Fields configured so far. You still have the Text Field components for First Name, Last Name, Joke Question, and Joke Answer. But, you also have a Text Field for the submission ID you’re updating and for the field you’re updating.

1. Drag and drop two Text Field components onto your canvas. Place the Text Field components inside your left column.
2. Enter the following Property IDs and Label Text:

Property ID

Label Text

submissionIdUpdate

SubmissionId to Update

firstNameUpdate

First Name
3. Save each component as you add it.
4. Drag and drop two more Text Field components onto your canvas. Place the Text Field components inside your right column.
5. Enter the following Property IDs and Label Text:

Property ID

Label Text

valueThatDoesntExist

Value That Doesn't Exist in Schema

lastNameUpdate

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

Configure the Text Area Components

Add Text Area components to update the joke question and the joke answer from the original submission data. You need one Text Area component for each.

1. Drag and drop 2 Text Area components onto your canvas. Place one component in each column of the Columns component, below the Text Fields.
2. Enter the Property IDs and Label Text as follows:

Property ID

Label Text

jokeQuestionUpdate

Joke Question

jokeAnswerUpdate

Joke Answer

NOTE  The jokeQuestionUpdate field is in the first column, and the jokeAnswerUpdate field in the second.

3. Save each component as you add it.

Configure the Plug-In Component

Add a Plug-In component to handle the Update Module Submissions API call. You'll map the data from the input fields into the call to update the submissions in the Schema module.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component below your Columns component.
2. Enter pluginUpdateModuleSubmission in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Enter the following in the Inputs table:

Property ID

Mapping

Optional (the rightmost column)

firstNameUpdate

data.firstName

Yes (selected)

lastNameUpdate

data.lastName

Yes (selected)

jokeAnswerUpdate

data.jokeAnswerUpdate

Yes (selected)

jokeQuestionUpdate

data.jokeQuestionUpdate

Yes (selected)

valueThatDoesntExist

data.valueThatDoesntExist

Yes (selected)

NOTE  You must select each field as optional. If they remain clear, the submission updates with blank data in any fields left blank during the update. Adding valueThatDoesntExist displays what happens when you map new data in the Schema module. Notice the call returns valueThatDoesntExist if you perform another Get Submissions call.

5. Select Update Module Submission from the Internal Services drop-down. The Data Source URL autopopulates.
6. Replace {moduleId} with {{data.moduleId}} and{submissionId} with {{data.submissionIdUpdate}} in the Data Source URL.

7. Click Save.

Configure the Button Component

Add a Button component to execute the API call.

1. Drag and drop a Button component onto your canvas. Place your Button component under your pluginUpdateModuleSubmission Plug-In.
2. Enter btnUpdateSubmission in the Property ID field.
3. Enter Update Submission in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginUpdateModuleSubmission in the Trigger on Click field.

6. Click Save.

Configure the Delete Module Submissions Call

There might be instances when you want to delete submissions from your Schema module. You can add a Delete Submissions API call to do that. But, you also might want to maintain the ability to restore those deleted submissions. Let’s take a look at how those work together and consider an example of what happens when you try to restore a deleted submission.

What You'll Need

To set up this API call, you'll need:

  • 1 Panel component

  • 1 Columns component

  • 1 Text Field component

  • 3 Plug-In components

  • 3 Button components

Your Delete Module Submissions call looks like this in the Module Builder:

NOTE  The image above uses optional HTML Element components, which allow you to display a header and description in the Panel.

Configure the Panel Component

Add a Panel component to provide a container for the components involved in this section of the configuration.

1. Drag and drop a Panel component onto your canvas. Place your Panel components below your Update panel.
2. Enter Delete in the Title field.
3. Enter panelDeleteModuleSubmissions in the Property Name field.
4. Click Save.

Configure the Columns Component

Add a Columns component to keep things organized. Use the default setting of two columns.

1. Drag and drop a Columns component onto your canvas. Place your Columns component inside your Delete panel.
2. Enter colDeleteSubmissions in the Property ID field.

NOTE  Use the default setting of two columns in this use case.

3. Click Save.

Configure the Text Field Component

Add a Text Field component for this API call. This is where you enter the Text Field submission ID you want to delete.

1. Drag and drop a Text Field component onto your canvas. Place your Text Field component in the left column.
2. Enter submissionIdDelete in the Property ID field.
3. Enter SubmissionId to Delete in the Label Text field.
4. Click Save.

Configure the Plug-In Component

Configure a Plug-In for this API call. This Plug-In allows you to delete submissions.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component below your Columns component.
2. Enter pluginDeleteMultipleModuleSubmissions in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Complete the Inputs table as follows:

Property ID

Mapping

submissionIdDelete

ids

5. Select Deletes Multiple Module Submissions from the Internal Services drop-down. The Data Source URL autopopulates.
6. Replace {moduleId} with {{data.moduleId}} in the Data Source URL.

7. Click Save.

Configure the Delete Submissions Button Component

Configure a Button component for this API call. This Button triggers the pluginDeleteMultipleModuleSubmissions Plug-In to delete submissions.

1. Drag and drop a Button component onto your canvas. Place your Button component below your pluginDeleteMultipleModuleSubmissions Plug-In.
2. Enter btnDeleteSubmission in the Property ID field.
3. Enter Delete Submission(s) in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginDeleteMultipleModuleSubmissions in the Trigger on Click field.

6. Click Save.

Configure the Get Deleted Submission Button Component

Configure a second Button component for this API call. This Button triggers your Plug-In to retrieve previously deleted submissions. This example demonstrates what happens when you try to GET a deleted submission.

1. Drag and drop a Button component onto your canvas. Place your Button component in the right column.
2. Enter btnGetDeletedSubmission in the Property ID field.
3. Enter Get Deleted Submission in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginGetDeletedSubmission in the Trigger on Click field.

NOTE  This sets the button to trigger the Plug-In component you'll add in the next step.

6. Select Info from the Button Style drop-down.

7. Click Save.

Configure the Plug-In Component

Configure a second Plug-In for this API call. This Plug-In is a GET call, so you can see what happens when you try to GET a deleted submission.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component in the right column, below your btnGetDeletedSubmission Button.
2. Enter pluginGetDeletedSubmission in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Select Get Module Submission from the Internal Services drop-down. The Data Source URL autopopulates.
5. Replace {moduleId} with {{data.moduleId}} in the Data Source URL.
6. Replace {submissionId} with {{data.submissionIdDelete}} in the Data Source URL.

7. Click Save.

Configure the Restore Deleted Submissions Button Component

Configure a third Button for this API call. This Button triggers your Plug-In to restore previously deleted submissions.

1. Drag and drop a Button component onto your canvas. Place your Button component in the right column, below your pluginGetDeletedSubmission Plug-In.
2. Enter btnRestoreDeletedSubmission in the Property ID field.
3. Enter Restore Deleted Submission in the Label Text field.
4. Select Event from the Action Type.
5. Enter pluginRestoreDeleteModuleSubmission in the Trigger on Click field.

NOTE  This sets the button to trigger the Plug-In component you'll add in the next step.

6. Select Success from the Button Style drop-down.

7. Click Save.

Configure the Plug-In Component

Configure a third Plug-In for this API call. This Plug-In allows you to restore previously deleted submissions.

1. Drag and drop a Plug-In component onto your canvas. Place your Plug-In component in the right column, below your btnRestoreDeletedSubmission Button.
2. Enter pluginRestoreDeleteModuleSubmission in the Property ID and Label Text fields.
3. Leave the Trigger Type set to Manual.
4. Select Restore a Deleted Module Submission from the Internal Services drop-down. The Data Source URL autopopulates.
5. Replace {moduleId} with {{data.moduleId}} in the Data Source URL.
6. Replace {submissionId} with {{data.submissionIdDelete}} in the Data Source URL.

7. Click Save.
8. Save your module.

Lab

You can view the completed labs for this use case here: