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.
![display_conditions.png 2018](https://files.readme.io/d65c98c-display_conditions.png)
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.
![Screen Shot 2020-08-20 at 9.58.24 PM.png 1052](https://files.readme.io/570ab54-Screen_Shot_2020-08-20_at_9.58.24_PM.png)
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 almost 4 years ago