Display Conditions
Premium Feature
This feature is only available in Business or Growth plans. You must pass the
projectId
with a paid plan to enable this feature.
Display conditions allow your users to change the content that is shown to recipients of an email based on different conditions.

Your users will have the ability to pick a condition and apply it to a row so they can show different content based on who the audience is.
Enable Feature
unlayer.setDisplayConditions([
{
type: 'Last Order Catalog',
label: 'Women',
description: 'Only people who ordered from Women catalog',
before: "{% if lastOrder.catalog == 'Women' %}",
after: '{% endif %}'
},
{
type: 'Last Order Catalog',
label: 'Men',
description: 'Only people who ordered from Men catalog',
before: "{% if lastOrder.catalog == 'Men' %}",
after: '{% endif %}'
},
{
type: 'Last Order Catalog',
label: 'Children',
description: 'Only people who ordered from Children catalog',
before: "{% if lastOrder.catalog == 'Children' %}",
after: '{% endif %}'
}
]);
Your users will see these options in a modal.

Each display condition must have the following attributes. You can also send any custom attributes to identify the condition.
Attribute | Description |
---|---|
type | This is a category to combine multiple conditions into different folders. If there are conditions with different types, the user will select the type first. |
label | This is the name of the condition that the user will see. |
description | This is the description of the condition that the user will see. |
before | This is opening syntax for the condition that will be added before the selected row |
after | This is the closing syntax for the condition that will be added after the selected row |
Custom UI for Display Conditions
You can extend this feature and allow users of the editor to build their own Display Conditions using a UI that you control. For example, you can open a custom modal and show any interface to pick or build display conditions.
unlayer.registerCallback('displayCondition', function (data, done) {
// data - current display condition
// done - callback function
// Open custom UI for display conditions here
// Once your user is done creating a condition, call the "done"
// callback function with the new condition.
done({
type: 'Last Order Catalog',
label: 'Women',
description: 'Only people who ordered from the Women catalog',
before: "{% if lastOrder.catalog == 'Women' %}",
after: '{% endif %}',
});
});
Updated over 3 years ago