Plug-In Component

 

Estimated Reading Time:  2 minutes

Overview

The Plug-In component connects a module to internal and external 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. (application programming interface) services for passing data to and from a chosen source.

Common uses of the Plug-In component include:

  • Generating an email on submission of an application.

  • Populating a dashboard with application submissions.

  • Retrieving and displaying up-to-date data from an external source.

To make an external API call with a Plug-In component, you must set up the API service in Unqork's Services Administration. Doing so requires you to reference the external service's API documentation. Once you set up the service, the API call becomes available to use with your Plug-In component.

TIP  To learn more about Services Administration, view our Services Administration article.

You'll find the Plug-In component in the Data & Event Processing group to the left of the Module Builder.

Remote Executing Your Plug-In Component

It's best practice to configure your Plug-In component to remote execute. Remote execute, or server-side execution, lets the Plug-In component execute the call outside of the browser. Running APIs in the browser is not secure. If the API call happens in the browser, malicious agents can access the data in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.—including accessing PII Personal Identifiable Information (PII) is any representation of information that permits the identity of an individual to whom the information applies to be reasonably inferred by either direct or indirect means. (personally identifiable information) and inject malware.

The benefits of using remote execute are:

  • Speed: Back-end services handled by a remote server ease the burden on the browser.

  • Security: No one can use the DevTools Console to access PII.

  • Debugging: Modularization provides a smaller code-base for debugging.

TIP  To learn more about the DevTools Console, view our Access Submission Data Using the DevTools Console article.

What You'll Learn

After completing this article, you’ll know when to use a Plug-In component, how to configure its settings, and how to use it in an Unqork application.

About the Configuration Window

TIP  To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Display Panel

A static image dispaying the Plug-In component's Display settings.

Setting

Description

Canvas Label Text

A component’s Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the Module Builder.

User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Adding a Plug-In Component

In this example, set up the Plug-in component's List Submissions for Dashboard API call. This call retrieves data submitted by your end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. and populates it on a dashboard. To make it easier, we already created the source module your end-user uses to submit their information. You can find the prebuilt source module here: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.

If you preview this module in Express View, you see a page that collects your end-user's information. This source module includes name, email, and date of birth fields. After your end-user adds their information, they click Save. Their submission data is then stored. The List Submissions for Dashboard API call references this source module and retrieves the submission data to display in a dashboard. These instructions assume that you have an open module saved with a title.

In this configuration, you need the following components:

Configure the Initializer Component

This Radio Button component icon Initializer component triggers the Plug-In component that you'll set up later.

1. In the Module Builder, drag and drop an Radio Button component icon Initializer component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initStart.
3. To the left component's configuration window, select Actions Icon Actions.
4. From the Trigger Type drop-down, select New Submission.
5. In the Outputs table, enter the following:

Property ID

Required

Value

plugGetSubmissions

trigger

GO

A static image displaying the Initializer component's New Submission Trigger Type and Output table configuration.

NOTE  The Property ID here matches the Plug-In component you'll add in a later step.

6. Click Save & Close.

Configure the Hidden Component

Next, add a Hidden component to store the module ID of your source module. If you have your own source module, you can use its module ID.

You can get the module ID from your source module’s hyperlink as follows: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit. This module ID comes from the prebuilt source module.

1. Drag and drop a Hidden component onto your canvas, placing it below your Radio Button component icon Initializer component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter moduleId.
3. In the Default Value field, enter 5eb01aa6811bf80215fd706b.
4. Click Save & Close.

Configure the Plug-In Component

Now, add a Plugin Component Icon Plug-In component to retrieve the submissions from your source module, so you can display them in a dashboard.

1. Drag and drop a Plugin Component Icon Plug-In component onto your canvas, placing it below your Hidden component.
2. In the Property ID and Canvas Label Text fields, enter plugGetSubmissions.
3. From the Internal Services drop-down, select List Submissions for Dashboard.
4. In the Inputs table, enter the following:

Property ID

Mapping

moduleId

moduleId

'firstName,middleName,lastName,email,dateOfBirth'

fields

NOTE  The first row references the module ID stored in the Hidden component. The second row shows the source module fields you're retrieving to insert into the dashboard. The values entered in the Mapping column (moduleId and fields) are native values in Unqork.

A static image displaying the List Submissions for Dashboard API and the Inputs table.

5. Click Save.

Configure the ViewGrid Component

Next, add a Dropdown Component Icon ViewGrid component to display your data in a dashboard.

1. Drag and drop a Dropdown Component Icon ViewGrid component onto the canvas, placing it below your Plugin Component Icon Plug-In component.
2. In the Label field, enter Submissions.
3. In the Property Name field, enter vgSubmissions.
4. In the Action field, enter null.
5. In the Inputs table, enter the following:

ID

Required

plugGetSubmissions

(Checked)

6. In the Outputs table, enter the following:

ID

Mapping

submissionId

id

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

A static image displaying the configuration of the ViewGrid component.

8. Click Save.
9. Save your module.

Now, Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. A dashboard displays showing the data from the source module. Using an API call, the Plug-In component retrieves the submissions from the source module and your ViewGrid component displays them. This is one of many examples of using the Plug-In component in Unqork.

The completed configuration looks like this in Express View:

A static image displaying the Express View dashboard populated with end-user submission data.

Structure of a Plug-In Component's Data

Each row of the table stores as an array in the Unqork database.

Resources