Showing content conditionally
One way to personalize content is to show or hide one or more elements depending on a field’s value. For example, a paragraph written for Canadian customers could be hidden when the recipient of the letter is not living in Canada, if that can be derived from the data.
Use the Conditional Script Wizard to show or hide one element – a paragraph, image or other HTML element - based on the value of a data field.
Showing or hiding elements using the Conditional Script Wizard
- Right-click the element and click Make Conditional. Alternatively click the black triangle on the New button on the Scripts pane at the bottom left of the window, and click Conditional Content Script. The Conditional Script Wizard opens.
- Rename the script so that it reflects what the script does.
-
If you have started creating the script from the Scripts pane, you have to type a . The selector selects one or more pieces of text or elements from the template, so that the conditional content script can hide or show those pieces. An ID (for example: #conditional-script) is best if you want to show or hide one element only. Use a class selector (for example: .conditional) if the script should show or hide more than one element. See Using the Text Script Wizard for further explanation on selectors.
If you have started the Conditional Script Wizard by right-clicking an element, you don't have to set a selector. If the element didn't have an ID, a new ID has been generated automatically. The new ID functions as the selector of the script.
You can change the selector after closing and reopening the script (double-click the name of the script in the Scripts pane).
- Set the Action: use the drop-down to select whether to Show or Hide the element when the condition below is true.
- Click the downward pointing arrow next to Field, to select the data field that should be evaluated.
- Click the downward pointing arrow next to Condition to expand the list of conditions with which the data field can be evaluated. The options are: Equal to, Not equal to, Contains, Does not contain, Begins with, Ends with.
- Type the Value that should be used for the conditional check.
For example, you could check whether the data field Gender is 'Equal To' the value 'M', in order to show a paragraph or an image applying to male customers only. If the condition evaluates to true, the selected action will be performed. If, conversely, the condition evaluates to false, and the option Toggle Visibility is checked, the opposite action will be performed. By default, this option is checked.
To combine the values of two or more data fields, you have to click Expand and edit the code of the script. See Writing your own scripts.
- Click Apply or OK.
- To see the result, toggle to the Preview tab at the bottom of the workspace (or select View > Preview View on the menu).
Showing or hiding several elements with one conditional script
To apply one conditional content script to several elements, you have to use a CSS class or HTML element as the selector of the script. When using a CSS class, apply that class to the elements in question:
- Double-click the conditional script in the Scripts pane to reopen it, or create a new conditional content script and follow the actions described in Showing or hiding elements using the Conditional Script Wizard.
- Change the selector to a CSS class (for example, .male) or to an HTML element with a certain CSS class (for example, p.male). See Using the Text Script Wizard for further explanation on selectors.
- Apply the same CSS class to all elements that should be shown or hidden under the condition that you have set in the conditional script. Click each element and type the class (without the preceding dot) in the Class field.
Showing or hiding a text selection
When you right-click on an element and make it conditional, the element as a whole will be made conditional. This happens even when you select a few words in a paragraph and right-click those words; the paragraph as a whole will be made conditional.
It is, however, possible to partially show or hide a paragraph or a line item in a list. Before you can do that, you have to select the text that you want to be shown or hidden and wrap it in a span element first:
- Select the part of the text that you want to make conditional.
- Right-click the selected text and click Wrap in span.
- Type an ID and/or a class. An ID is fine if this is the only thing that should be shown or hidden on a given condition. Use a class if there is more that should be shown or hidden on the same condition.
- Start creating a conditional content script from the Scripts pane. Use the ID or class as the selector of the script. See Showing or hiding elements using the Conditional Script Wizard.
|
|