How to: Configure a SendGrid API Module With Server-Side Execution (SSE)

Overview

In this how-to guide, you'll learn how to build an API 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. module using the SendGrid API service for sending emails. The API 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. module uses SSE Server-Side Execute (SSE) means data is executed outside of the end-users browser. This increases security by preventing data from being manpulated by bad actors. to increase security and prevent malicious actors from compromising application data. You'll also build a FE Front-End Front-End (FE) Modules act as the user interface (UI) that end-users see and interact with. FE Modules use Plug-Ins to securly connect to API Modules for executing API calls. module where end-users 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. can craft an email message and choose where to send it.

Configuring the SendGrid Email API Module

First, create and configure an API API module that sends the email. In this API API module, you'll update and configure components to make the API call. Later, you'll build a FE Front-End module that lets end-users 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. enter a title and message to send using the API call.

Configure the Initializer Component

This Initializer component receives the Execute Module call from the FE Front-End module you'll configure later. Then, it triggers the Plug-In component you'll set up next.

1. Create a new API API module and open it in the Module Builder.
2. Hover over the initCreateSubmission Radio Button component icon Initializer component and click (Edit Component).
3. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and 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, update the values to initPluginSendEmail.
4. Navigate to the Actions settings.
5. To the right of Inputs & Outputs, click Edit.
6. In the Outputs table, enter the following:
# Source Type Value

1

pluginSendEmail

trigger

GO

You'll set up the pluginSendEmail Plug-In component in the next section.

A static image dispalying the Initilizer component's settings.

7. Click Save Component.

Configure the Plug-In Component

This Plug-In component executes the SendGrid API. In the Inputs table Enter inputs components and actions you want the component to perform., you'll reference the emailAddress and emailMessage iconHidden components from the FE Front-End module you'll set up later.

1. Hover over the pluginCreateSubmission Plug-In component and click (Edit 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 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, update the values to pluginSendEmail.
3. From the Service Type drop-down, select External.
4. From the External Services drop-down, select SendGrid.

Non-Training environments require their own SendGrid service. Learn how to set up SendGrid in Unqork with our SendGrid in Unqork article.

5. In the pre-populated Data Source URL field, add mail/send to the end of https://api.sendgrid.com/v3/. The value becomes https://api.sendgrid.com/v3/mail/send.
6. To the right of Inputs & Outputs, click Edit.
7. In the Inputs table, enter the following:

Feel free to enter your own email address and subject in these sections for testing.

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

Property ID

Mapping

emailAddress

personalizations[0].to[0].email

emailMessage

content[0].value

'youremail@email.com'

from.email

'Hello Subject'

subject

'text/html'

content[0].type
8. Navigate to the Actions settings.
9. In the Error Trigger field, enter initError. This value triggers the initError Radio Button component icon Initializer component.
10. Click Save Component.

Configure the Second Initializer Component

This Initializer component triggers an error message if the SendGrid API fails.

1. Drag and drop an Radio Button component icon Initializer component onto your canvas, placing it inside the panelConfig Panel 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 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 initError.
3. Navigate to the Actions settings.
4. To the right of Inputs & Outputs, click Edit.
5. In the Outputs table, enter the following:
# Source Type Value

1

sendGridResponseError

value

There was an error sending the SendGrid email
6. Click Save Component.

Update the First Hidden Component

Next, you'll update the requestParameter iconHidden component to store the emailAddress data.

1. Hover over the requestParameter iconHidden component and click (Edit 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 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, update the values to emailAddress.
3. Click Save Component.

Configure the Second Hidden Component

The second Hidden component stores the emailMessage data.

1. Drag and drop a iconHidden component onto your canvas, placing it inside the panelRequest Panel component, and below the emailAddress iconHidden 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 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 emailMessage.
3. Click Save Component.

Update the Third Hidden Component

Lastly, you'll update the responseParameter iconHidden component to store the error response for the API call. When the API call fails, the initError Radio Button component icon Initializer component fires. The Initializer component then outputs an error response to this Hidden component.

1. Hover over the responseParameter iconHidden component and click (Edit 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 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, update the values to sendGridResponseError.
3. Click Save Component.

The SendGrid API 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. module is now configured. Next, build the FE Front-End module where end-users 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. can send email messages using the SendGrid API.

Configuring the Front-End Module

The FE Front-End module is where you'll remotely execute the API 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. module. This module is also where the 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. enters the email information.

Configure the Field Group Component

This component enables you to organize your module.

1. Create a new FE Front-End module and open it in the Module Builder.
1. Drag and drop a icon Field Group component onto the 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. field, enter fgExecuteModule.
3. Click Save Component.

Configure the Text Field Component

This component acts as the field where your end-user will enter the recipient's email address.

1. Drag and drop a  Text Field component onto the canvas, placing it inside the fgExecuteModule icon Field Group 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. field, enter emailAddress.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Email Address.
4. Navigate to the Validation settings.
5. Under User Input, set Required to (ON).
6. Click Save Component.

Configure the Text Area Component

In this field, the 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. enters a message to send as part of the email.

1. Drag and drop a Icon Text Area component onto your canvas, placing it inside the fgExecuteModule icon Field Group component and below the emailAddress  Text Field 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. field, enter emailMessage.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Email Message.
4. Navigate to the Validation settings.
5. Under User Input, set Required to (ON).
6. Click Save Component.

Configure the Plug-In Component

This Plug-In component executes the SendGrid API 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. module.

1. Drag and drop a Plug-In component onto your canvas, placing it inside the fgExecuteModule icon Field Group component and below the emailMessage Icon Text Area 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 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 pluginRemoteExecuteSendEmail.
3. Navigate to the Data settings.
4. From the Internal Services drop-down, enter or select Execute Module.
5. In the Data Source URL field, you'll see /fbu/uapi/modules/{moduleId}/execute. Replace {moduleID} with the module ID of the Send Email API 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. module.
6. To the right of Inputs & Outputs, click Edit.
7. In the Inputs table, enter the following:
#

Property ID

Mapping

1

emailAddress

data.emailAddress

2

emailMessage

data.emailMessage

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

8. In the Outputs table, enter the following:
#

Property ID

Mapping

1

responseAPIError

data.resolved.responseError

9. Click Save Component.

Configure the Button Component

This component triggers the pluginRemoteExecuteSendEmail Plug-In component.

1. Drag and drop a Button component Icon Button component onto your canvas, placing it inside the fgExecuteModule icon Field Group component and below the pluginRemoteExecuteSendEmail Plug-In 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. field, enter btnExecuteEmailAPI.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Execute Send Email API.
4. Navigate to the Actions settings.
5. From the Action Type drop-down, enter or select Event.
6. In the On Click field, enter or select pluginRemoteExecuteSendEmail .
7. Click Save Component.

Configure the Hidden Component

Lastly, configure a Hidden component to store the error response if the API call fails.

1. Drag and drop a iconHidden component onto your canvas, placing it inside the fgExecuteModule icon Field Group component and below the btnExecuteEmailAPI Button component Icon Button 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 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 responseApiError.
3. Click Save Component.

Preview your FE Front-End module in Express View Express View is how your end-user views your 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.. Test the SendGrid API 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. module by entering your email address and a message in the Express View fields. Click Execute Send Email API button to receive an email. If you do not receive the email, check your email's spam folder.

Resources