Template language for DeskDirector Email Template

Andy Chen Updated by Andy Chen

Markup language - MJML

Mjml is a markup language designed to reduce the pain of coding a responsive email. You can find their documentation here.

DeskDirector email template utilize both MJML markup language and Liquid template engine to allow user to easily code dynamic email content.

Base structure

It all start with base mjml tag and mj-body tag, it is equivalent of html tag and body tag. Then mj-body can have multiple sections. Each section represent as row. Where row can have single or multiple mj-column.

<mjml>
  <mj-body>
    <mj-section background-color="#f0f0f0"></mj-section>
    <mj-section background-color="#f0f0f0"></mj-section>
  </mj-body>
</mjml>

Template engine - Liquid

Liquid is an template language, with this template language, we can insert token(object) into the template. Such as user's name, ticket's content etc.

Tags

Tags create the logic and control flow for templates. They are denoted by curly braces and percent signs: {% and %}.

Control Flow

Input

{% if Company.Id == 123 %}
  <mj-text>Welcome to our new portal!</mj-text>
{% endif %}

Output

Welcome to our new portal!

With {% else %}:

{% if Company.Id == 123 %}
    <mj-text>Welcome to our new portal!</mj-text>
{% else %}
    <mj-text>Welcome back!</mj-text>
{% endif %}

Iteration

{% for Item in Ticket.Timeline %}
    <mj-text>{{ Item.User.Name }}</mj-text>
{% endfor %}

Filters

Filters change the output of a Liquid object. They are used within an output and are separated by a |.

Capitalize

Input

{{ "my great title" | Capitalize }}

Output

My Great Title

Upcase & Downcase

Input

{{ "My Great Title" | Upcase }}, 
{{ "My Great Title" | Downcase }}

Output

MY GREAT TITLE, my great title

TimeAgo

Input

{{ Ticket.LastUpdated | TimeAgo }} ago
<br/>
{{ "2018-08-21T22:22:07Z" | TimeAgo }} ago

Output

2 days ago
15 days ago

TimeZone

Timestamps in the data are in UTC time, but you can use this filter to convert it to your local time.

The first parameter for TimeZone is time zone ID (C# timezone ID), the second parameter is the output format of the date time (C# DateTime format string).

Input

<mj-text>{{ Ticket.DateEntered | TimeZone: "New Zealand Standard Time", "f" }}</mj-text>

Output

Tuesday, September 4, 2018 9:46 AM

first, last & size

Notice that these filters start from a lower case letter.

Input

<mj-text>{{ Ticket.Timeline.size }}</mj-text>

<mj-text>{{ Ticket.Timeline.first.Timestamp }}</mj-text>

<mj-text>{{ Ticket.Timeline.last.Timestamp }}</mj-text>

Output

1
9/3/2018 9:46:30 PM
9/3/2018 9:46:30 PM

How did we do?

Contact