Control flow tags enable you to create rules to give more specific control over your Email Design System.
Similarly to rules, control flow tags enable the HTML developer to control how an Email Design System behaves, depending on how the person creating the email uses certain fields.
For example, removing a whole CTA when the text field is empty, as opposed to having to manually remove a whole <td> or <tr>, or changing the position of an image, based on the value in a dropdown.
Music: https://www.bensound.com/royal...
When including rules in your Email Design System we've seen how you can use remove_unless and remove_outer_unless tags to remove specific content or tags if certain conditions are not met. These enable you to control content based on checkbox fields being turned on or off, or if certain fields have no content, such as removing the <a> tag if the link field is empty.
Control flow tags work in a similar way, but can also be used based on specific values set in a field. For example, you can control your HTML if certain words are typed into text fields or specific choices are selected from a dropdown. You can also use them to control the HTML based on multiple conditions, so if more than one field has a specific value.
You can use an if statement to control content when certain conditions are met.
<field type="checkbox" name="turn_content_off" label="turn this content off" default="false"></field>
<td rule="{% if turn_content_off %}{% remove %}{% endif %}">
Content that gets removed
</td>
If the checkbox field is set to true, the <td> will be removed. If it's set to false, the <td> will be included.
You can use an unless statement to control content when certain conditions are not met.
<field type="checkbox" name="turn_content_on" label="turn this content on" default="false"></field>
<td rule="{% unless turn_content_on %}{% remove %}{% endunless %}">
Content which gets removed
</td>
If the checkbox field is turned on the <td> will be included, if it is turned off the <td> will be removed from your email.
You can also use these rules to control content if a field has a certain value, as opposed to only if a checkbox is turned on or off.
<field type="dropdown" name="include_content" label="turn content on or off">
<choice label="on" value="on"></choice>
<choice label="off" value="off"></choice>
</field>
<td rule="{% if include_content == 'off' %}{% remove %}{% endif %}">
Content which gets removed
</td>
If off' is selected on the dropdown, the <td> will get removed. If on' is selected it will be left alone. When controlling content using specific values of a field, use single quotation marks around the value.
You can also have multiple conditions for these rules, to control content if more than one condition is met.
<field type="checkbox" name="hide_text" default="false"></field>
<field type="checkbox" name="hide_text2" default="false"></field>
<content rule="{% if hide_text and hide_text2 %}{%remove%}{%endif%}" replace="{{text}}">
Text
</content>
In this example the text will only be removed if both checkbox fields are set to the right value.
When using if statements, you can add more conditions to them using elsif and else.
This is useful when you want certain content based on a condition, but in the same rule provide an alternative if that condition is not met.
For example, you can use else tags to give more control over text styling.
<field type="checkbox" name="underline" label="underline the CTA"></field>
<td replace-style="text-decoration:{% if underline %}underline{% else %} none{% endif %};">
This text might be underlined
</td>
Here, if the checkbox is turned on, then the text-decoration will be set to underline. However if it is turned off, then it will be set to none and the text won't be underlined.
You can also use control flow tags on fields and editables. Read more here.