Plug-In Component
Estimated Reading Time: 16 minutes
Overview
The Plug-In component connects your 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) calls to pass 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 DecTools Console article.
What You'll Learn
After completing this
About the Configuration Window
General
Setting |
Description |
---|---|
Property ID |
A Property ID is the unique field ID used by Unqork to track and link components in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and 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. Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation. |
Field Tags |
Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the 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. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry. |
Settings Tab |
Select this tab to display the component's Display, Data, Actions, and Validation settings panels, as applicable. |
Permissions Tab |
Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component. |
Notes Tab |
Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component. |
Cancel |
Click this button to undo any unsaved configuration changes and return to the canvas. |
Save |
Click this button to save all settings as configured and return to the canvas. |
Display Panel
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. |
Data Panel
Service Type
The Plug-In component can be used for making internal Unqork API calls and external API calls.
UnqorkSelecting this option provides you with an Internal Services drop-down.
|
ExternalSelecting this option provides you with an External Services drop-down.
|
Request Type
The Request Type is automatically selected after you've completed the Service Type settings. The Plug-In component includes five Request Types.
-
Get: Retrieves and reads existing resources, like submission data.
-
Patch: Partially updates existing resources.
-
Post: Creates new resources.
-
Put: Updates existing resources.
-
Delete: Deletes resources.
If Patch, Post, or Put are selected, two new toggles display:
Setting |
Description |
---|---|
Make a MultiPart API Call |
Multipart API calls combine one or more sets of data into a single body. Multipart requests are common for file uploads and for transferring multiple data types with a single request. Set this toggle to ON when sending a request that isn't part of the API's body. When set to |
Alternative Multipart Sub-Type (Services) |
The Alternative Multipart Sub-Type (Services) field is only available for external APIs, but can be used to specify whether the parts of your request are related, mixed, or otherwise correlated. |
Promote Object/Array to Top Level |
Use this setting to call an object or array, and make it the body of the API request. When the Promote Object/Array to Top Level toggle is set to |
Object/Key Array |
In this field, enter the key of the object or array that you're promoting to the top level. |
Inputs Table
Use these fields to enter inputs as references for your logic components. These references include values you want to send as part of the API call's request header or body. For example, when getting module submission details for a dashboard, you need to enter the fields that you want to pull from the source module.
Setting |
Description |
---|---|
Property ID |
Examples of supported inputs include:
The Property ID entered must match the Property ID used in the output component. Remember, use camel case (stylized as camelCase) without spaces or punctuation. NOTE When using the Watch Trigger Type, enter all inputs the component must watch for in the Property ID column. TIP You can use dot notation to reference values nested under a Property ID in the submission data.
|
Mapping |
API documentation includes mapping information. Mapping information tells your Plug-In component which data to send or retrieve from the API call. In the case of SendGrid integration, the Mapping column indicates where the Property ID values show up in the email. If you enter 'no-reply@unqork.com' in the Inputs table's Property ID and from.email in the Mapping column, your From address is no-reply@unqork.com. |
Required |
When |
Exclude |
When selected, the Plug-In component doesn't pass the field as part of your API call's request body. But, the Plug-In component can still watch for changes made to the value. |
Header |
When selected, the Plug-In component passes the field as part of the API call's request header. When clear, the Plug-In component passes the field as part of the request body. |
Resolvebase64 |
Select this setting if you're expecting a Base64 Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format. file from your API request. Selecting this setting prepares the system for the Base64 file, making it easier to convert the file. |
Optional |
When selected, the Plug-In component doesn't pass the field in the API call's request body if there's no value (null). By default, the Plug-In passes every Input in the request body, even if the field is empty (null). |
Outputs
Use the Outputs table to send the data retrieved by the API call to a specific location.
Setting |
Description |
---|---|
Property ID |
For your logic component to recognize an output, you must enter the destination component's Property ID(s) here. The Property ID entered must match the Property ID used in the output component. Remember, use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation. |
Mapping |
Map Property IDs according to the API's documentation. Mapping tells your Plug-In component what to retrieve from the API call. For the Outputs table, map specific data to put into your output components. |
Option |
This setting offers handling methods for your outputs:
|
Header |
When selected, the Plug-In component looks for the output value in the response header. When clear, the Plug-In looks for the field in the response body. |
Actions Panel
Setting |
Description |
---|---|
Trigger Type |
This setting provides the following options:
By default, the Manual Trigger Type is selected.
|
Concurrent Trigger |
Enter the Property ID of the component to trigger concurrently when the Plug-In component makes the API call. |
Post Trigger |
Enter the Property ID of the component to trigger after the Plug-In completes the API call. For example, triggering a component to display the data received from the Plug-In component's API call. |
Error Trigger |
Enter the Property ID of a component to trigger on failure of the API call. |
Set Timeout |
The number of milliseconds that pass before the API call times out. If an API call doesn't respond within a reasonable time, you don't want the Plug-In component to continue to wait. Unresponsive API calls can stall your entire application. The maximum timeout is 120,000 milliseconds. |
Set Retry Delay |
The number of milliseconds that pass before the component tries the API call again after it failed. Waiting before retrying an API call could give the destination server time to clear the issues that caused it to be unresponsive. The maximum delay is 10,000 milliseconds. |
Set Number of Retries |
The number of retries the Plug-In component makes on a failed API call. It's best practice to limit the number of retries, so a continually failing API call doesn't stall your application. Use this setting to limit the number of times the Plug-In component retries the failed API call. If the API call fails all retries, the Error Trigger fires. The maximum number of retries is 10. |
Disable Execution |
If Disable Execution is set to By default, this setting is set to |
Advanced Settings
Setting |
Description |
---|---|
Set Debounce |
The number of milliseconds that pass before the module loads this component. This is useful if you have a large module and you load several components at the same time. NOTE 1,000 milliseconds = 1 second. |
Show Modal Dialog While Running |
When set to
By default, this toggle is set to |
Show Cursor as Spinner While Running |
When set to By default, this toggle is set to |
Show Page Loader Spinning While Running |
When set to By default, this toggle is set to |
Assign Values if They Are Null or Empty String |
If an output comes back empty, you can either have the data store as an empty value or choose not to store the data. By setting this toggle to By default, this toggle is set to |
Only Set Output Variables |
When set to When set to By default, this toggle is set to |
Convert XML Response to JSON |
Older API calls are more likely to use XML Extensible Markup Language (XML) is markup language that lets you define and store data in a shareable way. coding language. The Unqork Designer Platform reads JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. coding language only. If you know your API call returns XML, set this toggle to By default, this toggle is set to |
Expect Binary Response |
When set to By default, this toggle is set to |
Enable Server Side Pagination |
When set to By default, this toggle is set to |
Flatten to a Single Record Value |
When set to By default, this toggle is set to |
Assign All Values Returned to Module |
When set to By default, this toggle is set to |
Look for 'Data' Key in Response |
The Plug-In component looks for all specified output values in the data section of the response body. When set to By default, this toggle is set to |
Include Cookies on Cross-Site Requests |
When set to By default, this toggle is set to |
Required Property Path in Response |
This field lets you set a required property path return value. If the path isn't present in the response body, the call results in an error. |
Adding a Plug-In Component
In this example, you'll set up the Plug-in component's List Submissions for Dashboard API call. This call retrieves data submitted by your end-user End-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:
-
1 Initializer component
-
1 Hidden component
-
1 Plug-In component
-
1 ViewGrid component
Configure the Initializer Component
This Initializer component triggers the Plug-In component that you'll set up later.
1. | In the Module Builder, drag and drop an ![]() |
3. | To the left component's configuration window, select ![]() |
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 |
6. | Click Save & Close. |
Configure the Hidden Component
Next, add a Hidden component to house 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 ![]() ![]() |
3. | In the Default Value field, enter 5eb01aa6811bf80215fd706b. |
4. | Click Save & Close. |
Configure the Plug-In Component
Now, add a Plug-In component to retrieve the submissions from your source module, so you can display them in a dashboard.
1. | Drag and drop a ![]() ![]() |
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 pulling into the dashboard. The values entered in the Mapping column (moduleId and fields) are native values in Unqork.
5. | Click Save. |
Configure the ViewGrid Component
Next, add a ViewGrid component to display your data in a dashboard.
1. | Drag and drop a ![]() ![]() |
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 |
|
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 |
|
|
|
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.
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. After configuring a module, click Preview in the Module Editor 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:
Structure of a Plug-In Component's Data
Each row of the table stores as an array in the Unqork database.
Resources
-
Is it implied that the Data Source URL includes an http:// or https:// protocol?
-
How do you create an API query parameter for a specific API endpoint?
-
Why is a "Get Submissions" API call failing when you change roles?