SendGrid Send Mail with external templates

In this short video, I demonstrate how we can create email templates to be used to send email with Send Grid Send Mail API. This demonstration is done in Betty Blocks environment, where we manage the entire list of email templates within Betty Blocks application.

The setup allows business users to create or maintain a list of email templates within the portal environment provided, without the need navigating away from the portal environment they use for working on the application functionalities such as managing users, assets, services, and so on.

Here are the steps on how I setup the template for sending email:

1. Template Model

These are some of the important fields of database table schema for the template. Content column is used to store the HTML content, I have my page designed to which I use the CKEditor to allow editing the content in WYSIWYG mode (i.e. or you may switch to investigate the content in HTML source).

2. Web Servic Definition (i.e. the SendGrid V3 Send Mail API)

Here is the cURL i used to for the SendGrid Send Mail API call, you will need to replace the data-raw with the proper JSON format (i.e. can be found in the SendGrid documentation at https://docs.sendgrid.com/api-reference/mail-send/mail-send)

curl –location –request POST ‘https://api.sendgrid.com/v3/mail/send’ \
–header ‘Authorization: Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx’ \
–header ‘Content-Type: application/json’ \
–data-raw ‘{ “personalizations”: [      {  {% if to_list != null %}        “to”: [    {% for send_to in to_list %}            {            “email”:”{{send_to.email}}”,            “name”:”{{send_to.name}}”},    {% endfor %}        ]  {% else %}            “to”: [          {            “email”: “{{email_to}}”          }        ]  {% endif %}      }} …’

3. Email Body

In Betty Block, the liquid templating engine is used to supply and parse the JSON content to allow inserting/replacement of content from the values we supply via the variables we have configured.

Here is the sample content with liquid tags, this content will be parsed and supply as the body content of the SendGrid API.

{
    "personalizations": [
      {
  {% if to_list != null %}
		"to": [
	{% for send_to in to_list %}
			{
			"email":"{{send_to.email}}",
			"name":"{{send_to.name}}"},
	{% endfor %}
		]
  {% else %}	
        "to": [
          {
            "email": "{{email_to}}"
          }
        ]
  {% endif %}
      }
  {% if email_cc != null and email_cc != "" %}
      ,{
        "cc": [
          {
            "email": "{{email_cc}}"
          }
        ]
      }
  {% endif %}
  {% if email_bcc != null and email_bcc != "" %}
      ,{
        "bcc": [
          {
            "email": "{{email_bcc}}"
          }
        ]
      }
  {% endif %}
    ],
    "from": {
      "email": "{{email_from}}"
    },
    "subject": "{{email_subject}}",
    "content": [
      {
        "type": "{{content_type}}",
        "value": "{{content_value}}"
      }
    ]
}

4. Configure the HTTP Request to send email using the SendGrid endpoint.

The HTTP Request is an ‘action‘ you may use to call a predefined Web Service (i.e. external endpoint) in Betty Blocks. We may call this ‘web service’ in Betty Blocks ‘endpoint‘ or/and ‘actions‘ for example. Some of the important variables we will need are defined as below:

Name	Type	Description
tempalte	Object	The template object (i.e. the template document as described previously for storing the email template content). This is the object we will be retriving for the defined email content template.
content_value	Text Expression	The email template content of the “template” document/object.
content_type	Text	value of “text/html”

Other fields that we will need are: email_to, email_cc, email_bcc, email_subject, email_from, etc. depending on the setting we would like to provide to the SendGrid API’s body payload.