Part 3: Templating Logic

DML Templating

How dyspatch Handles Template Logic

When building, use DML to define your templating logic. When your template 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:

Data tab in the Dyspatch 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

    •  • Not required, will be overridden by anything in the data tab
    •  • Allow you to define placeholder data within the block itself
    •  • Only for testing, will not be included in rendered templates
    •  • Require a key (your variable name) and placeholder value
  • 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 evaluates as true, the code within <dys-if> </dys-if> will be rendered
  •  • A full list of the supported comparison operators, modifiers, and logical operators are 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-inputs>
    <dys-array key='line_items'>
      <dys-object>
        <dys-string key='name' placeholder='Item name' />
        <dys-string key='price' placeholder='Item price' />
      </dys-object>
    </dys-array>
  </dys-inputs>
  <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 template 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 template 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

Next:

Part 4: Themes

Didn't find what you're looking for?

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

Contact Support