Sendgrid dynamic email template tutorials with examples


In this tutorial, We will discuss about sendgrid dynamic template examples for replacing date, currency and iterate object.

This tutorial covers an following things

  • How to create a dynamic template in sendgrid dashboard?
  • How to replace dynamic data (HTML) into SendGrid Templates in JavaScript
  • Adding array of json data to templates
  • Iteration loop in sendgrid template
  • conditional check in template
  • format date in sendgrid email template

How do create email template in sendgrid?

First login to sendgrid dashboard with your credentials

  • In left navigation, Click on Email API - Dynamic Templates option diagram shown below
sendgrid template how to create a template example

Next Click on Create a Dynamic Template

It ask for new dynamic template name as shown below

sendgrid template how to create a template

Once template is created, You can created versions Version can be many but only one version can be activated at any time.

Once you created version, It can ask for creating version with your own design or send grid predefined templates.

I selected my own version which ask using to edit the code

  • Design Editor, In this, You can use drag and drop html elements to design an elements
  • Code Editor - You can write html and assets code in a plain editor

It opens html editor as seen below

sendgrid template editor code design

You can note down Template ID which can be configured in client code to configure it.

sendgrid template javascript

Sendgrid dynamic template uses handlebarjs syntax to replace variable with values in html.

Template contains variables with double curly braces.

Below code is converted to html by replacing name with actual value in plain text.

<p>{{name}}</p>

Converted to

<p>John</p>

You can also pass html content instead of plain values, But the interprete syntax is to use three braces

{{{htmlcontent}}}
  • Limitations

html class selectors are not working for styles, instead you have to use inline styles Here some of the examples that faced displaying json object

How to iterate json object in dynamic grid template in sendgrid?

Suppose you have array of json objects passing from client code and wants to display in table format

You have to iterate an array of objects and print it

sendgrid provides an each loop iteration using handlebarJS scripting language

Here is an syntax each iteration each is an handlebar helper class which start and end tag and has array of objects. We can retrieve each object properties by name using double braces syntax - {{property}} inside each block.

You can also get index of each object using {{@index}} helper attribute

  {{#each employees}}
  {{property}}
    {{/each}}

Let’s declare an array of objects

{
    "employees":[
    {
    "id": 2,
  "name": "Frank",
  "salary": 6000,
  "gender":"male"
},
{
  "id": 1,
  "name": "john",
  "salary": 5000,
  "gender":"male"
}]
}

You want to print this array of objects in template with html table.

<table class="table ">
  <thead>
    <tr style="border:1px solid  #ddd;">
      <th style="border:1px solid #ddd;width:50px;text-align:center;font-weight:700">id</th>
      <th  style="border:1px solid #ddd; text-align:center;font-weight:700">Name</th>
      <th  style="border:1px solid #ddd;text-align:center;width:120px;font-weight:700">Salary</th>
      <th  style="border:1px solid #ddd;text-align:center;width:120px;font-weight:700">Gender</th>
    </tr>
  </thead>
  
  <tbody>
  {{#each employees}}
  <tr style="border:1px solid  #ddd;">
  <td  style="border:1px double #ddd;text-align:center;">{{@index}}</td>
    <td align="center" style="border:1px double #ddd;">{{id}}
      </td>
      <td  style="border:1px double #ddd;text-align:center;">{{name}}</td>
    <td  style="border:1px double #ddd;text-align:center">{{salary}}</td>
    </tr>
    <td  style="border:1px double #ddd;text-align:center;">{{gender}}</td>
    {{/each}}
 </tbody>
</table>

Table is printed in sendgrid email template.

How to use if else conditional check in Sendgrid dynamic template

Suppose you are passing the below object from client code

{
  "id": 1,
  "name": "john",
  "salary": 5000,
  "gender":"male"
}

handbardjs has a if conditional check against object in sendgrid.

In dynamic template editor, you can write a below code

if else in can be used in send grid template as seen below

<div class="printname">
{{#if name}}
<h1>{{name}} {{salary}}</h1>
{{else}}
<h1>No Employee</h1>
{{/if}}
</div>

You can also use if else if conditional expressions in sendgrid dynamic template

Here is an syntax

{{#if property}}
  <p>Condition1 met</p>
{{else if property}}
  <p>Condition2 met</p>
{{else}}
  <p>No Condition satisfied</p>
{{/if}}

Format date in sendgrid email template

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.