Creating Dynamic Templates with Jinja: Introduction

January 15, 2018

Dyspatch uses Jinja, the powerful templating language that you can leverage to create personalized email content. On render, Jinja variables and programming logic are replaced with actual values from the data you provide from your data warehouse. This introduction to Jinja templating will help you build confidence with Jinja basics, like variables and control structures, so you can create dynamic email contentDynamic Email ContentText, links, images, and any other email elements that can change, through programming logic, based on the end user. powered by your own data.

Sample Data

Use the sample data below to follow along with the examples in this guide. Any "Rendered result:" preview below is based on this sample data. You can also try examples in the Dyspatch Editor by adding the data below into the Sample Data tab and any Jinja examples into the Body tab.

{
  "first_name":"lucy",
  "forest":["lion","tiger","bear"],
  "weather":"sunny"
}

Data is passed to a template formatted like the above sample, it's called a JSON object. A JSON object is a list of key (e.g. "first_name") and value (e.g. "lucy") pairs surrounded by curly braces {}.

Variables

A variable is a placeholder for a value from your data. It uses a key to get it's paired value that will replace the variable on render. Use {{ ... }} tags to create a variable in your template.

{# A variable, using "first_name" to display its value on render #}
  Hello {{ first_name }}

Rendered result:

Hello lucy

Filters

You can modify variables with Jinja filters. Use the pipe symbol "|" after the variable to add a filter.

{# Capitalize first letter in a variable #}
 Hello {{ first_name|capitalize }}

Rendered result:

Hello Lucy

Multiple filters can be chained together, with the output of one filter being applied to the next.

{# Assign a default value of "friend" if the "first_name" variable is undefined and capitalize the value #}
 Hello {{ first_name|default("friend", true)|capitalize }}

Rendered result:

Hello Lucy (if "first_name" is undefined, or its value is empty, the rendered result is instead Hello Friend)

The default filter is very handy if your variable could be undefined. Read more about how to use the default filter here.

Control Structures

A control structure is any programming logic that dictates how template code is processed and what to render, like a for loop for example. Use {% ... %} tags to wrap Jinja control structures in your template.

For Loop

Repeat a block of code for each value in a list, with a for loop. A for loop is often used to build an HTML list to display the values in a list.

{# Loop through the list "forest" and display its values as an HTML bulleted list. #}
<ul>
  {% for animal in forest %}
    <li>{{animal}}</li>
  {% endfor %}
</ul>

Rendered result:

  • Lion
  • Tiger
  • Bear

If Statement

Use an if statement to display different content if the specified condition is true.

{# If the "weather" key's value is "sunny", display sunglasses reminder  #}
{% if weather == "sunny" %}
  Don't forget your sunglasses!
{% endif %}

Rendered result:

Don't forget your sunglasses!

Else if and Else

Specify alternative conditions with else if, or elif in Jinja syntax. It's also possible to add an else statement with content that displays if all the conditions are false.

{# Depending on the value of "weather", this if statement will display the appropriate text #}
{% if weather == "sunny" %}
  Don't forget your sunglasses!
{% elif weather == "rainy" %}
  Better bring an umbrella.
{% else %}
  Unpredictable weather today, be prepared for anything!
{% endif %}

Rendered result:

Don't forget your sunglasses! (Try changing the value for "weather" in your sample data in the Dyspatch Editor to "rainy" or empty " " to display the other two text alternatives)

Further Reading

Didn't find what you're looking for?

Ask our support team, we're here to help!

Contact Support