DML Templating

How Dyspatch Handles Template Logic

Use DML to define your templating logic. When your email is exported, Dyspatch will translate your code to your ESP’s templating language. This makes your code portable — if you change your ESP, Dyspatch will handle the necessary code changes. Test out your code as you build by inputting preview data right inside your block editor:

Variables

Syntax — @{name}, or @{object.name} for a nested variable
- • Variable names and structures should match the data you will pass in when sending an email
dys-inputs let you define variables and placeholders within the block code
- • Allow you to define placeholder data within the block itself
- • Only for testing, will not be included in rendered emails
- • Require a key (your variable name) and placeholder value
- • Can be used as an alternative to the data tab or customer profiles
Data types available are:
- • <dys-string> for text
- • <dys-bool> for boolean values
- • <dys-number> for numbers
- • <dys-array> for arrays and lists of items
- • <dys-object> for objects

<dys-block>
  <dys-inputs>
    <dys-string key="name" placeholder="there" />
    <dys-object key="customer">
    	<dys-string key="name" placeholder="you" />
    </dys-object>
  </dys-inputs>

  <dys-comment>
  	This block is currently using the placeholders from the dys-inputs.
    To try using sample data, add this to the data tab:
		{
    		  "name": "Bob",
    		  "customer": {
        	    "name": "Jane"
    		  }
		}
  </dys-comment>

  <dys-row>
    <dys-column>
      <dys-text>
        Hey @{name}!
      </dys-text>
      <dys-text>
      	Hi, @{customer.name}!
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>

Using <dys-inputs> placeholder data: Variables using dys-inputs data

Using sample data tab: When sample data is entered, variables will use that instead

View in DML Playground

Conditionals — dys-if

• Define your conditional statement using dys-if with the attribute cond=“condition to evaluate”
• If your condition is met, the code within <dys-if> </dys-if> will be rendered
• A full list of the supported comparison operators, modifiers, and logical operators is available in the DML Documentation

Block:

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        Hello <dys-if cond="first_name != ''">@{first_name}</dys-if>!
      </dys-text>
      <dys-text>
        <dys-if cond="recent_purchase_amount > 50 && membership == 'premium'">
          Thanks for being an active premium member!
        </dys-if>
        <dys-if cond="'kite' in purchases">
          Are you enjoying your new kite?
        </dys-if>
      </dys-text>
    </dys-column>
  </dys-row>
</dys-block>


Data:
{
  "first_name": "Hina",
  "membership": "premium",
  "recent_purchase_amount": 100,
  "purchases": ["string", "windbreaker", "kite"]
}

dys-if conditionals evaluated based on the sample data

View in DML Playground

Loops — dys-for

<dys-for each=”item in items”>
- • Iterates through an array within your data
<dys-for range=”1 to 3”>
- • Performs loop for a set range of integers

Block:
<dys-block>
  <dys-row>
    <dys-column>
      <dys-table padding-left='50px' padding-right='50px'>
        <tr>
          <th style='border-bottom:1px solid #ecedee;text-align:left;'
            editable='th1'>
            Item
          </th>
          <th style='border-bottom:1px solid #ecedee;text-align:right;'>
            Price
          </th>
        </tr>
        <dys-for each="item in line_items">
          <tr>
            <td style='text-align:left'>
              @{item.name}
            </td>
            <td style='text-align:right;'>
              @{item.price}
            </td>
          </tr>
        </dys-for>
      </dys-table>
    </dys-column>
  </dys-row>
</dys-block>

Data:
{
 "line_items":[
   {"name": "Apples",
    "price": "$1.00/lb"
   },
   {"name": "Oranges",
    "price": "$1.22/lb"
   },
   {"name": "Bananas",
    "price": "$1.33/lb"
   },
   {"name": "Grapefruit",
    "price": "$0.99/lb"
   }
 ]
}

dys-table populated by sample data using dys-for

View in DML Playground

Special Case — dys-export & dys-raw

On export, Dyspatch will translate your email into the language used by your ESP. If you’re exporting to multiple ESPs, which may have different logic capabilities, you can define DML that should only be rendered when exporting to certain languages using <dys-export>.

• The full list of dys-export target languages is available in the DML Documentation.
• Check out our Knowledge Base for more detailed information on exporting to different ESPs

If you have a use case we don’t yet support, you can use <dys-raw> to take direct control over what gets passed on to your ESP. Content wrapped in <dys-raw> tags is ignored by Dyspatch and will be passed on to your ESP as-is.

<dys-block>
  <dys-row>
    <dys-column>
      <dys-text>
        This content will show for all export languages.
      </dys-text>
      <dys-export targets='handlebars, ampscript'>
        <dys-text>
          This content will only show if I am exporting to Handlebars or AMPscript.
        </dys-text>
      </dys-export>
      <dys-raw>
        Content here goes directly to the email and you won't see content here
        in Dyspatch.
        Use this to insert templating logic if required.
      </dys-raw>
    </dys-column>
  </dys-row>
</dys-block>

View in DML Playground

Part 4: Themes