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.

The Conditional Script Wizard helps you to show or hide an element – a paragraph, image or other HTML element - based on the value of one or more data fields. For example, you could check whether the data field 'State' is 'Equal To' the value 'British Columbia' or 'Québec', to include a paragraph for all recipients in those states.

Showing or hiding elements using the Conditional Content Script wizard

  1. Select the element(s), right-click and choose 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 Content Script wizard opens.
  2. Rename the script so that it reflects what the script does.

    Scripts can only have the same name when they are not in the same folder. (See Managing scripts.)

  3. Type a Selector. 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.

    When you start the Conditional Script Wizard by right-clicking an element, the Selector field is pre-populated with the element's ID and class (or classes). If the element didn't have an ID or class, it gets a new ID (or class, in case multiple elements were selected) that is generated automatically.
    If you'd want to change the selector later, you can do that after reopening the script (double-click the name of the script in the Scripts pane).

  4. Set the Action: use the drop-down to select whether to Show or Hide the element when the condition below is true.
  5. Check the Toggle Visibility option, if you want the opposite action to be performed if the condition evaluates to false. By default, this option is checked.
  6. Click the downward pointing arrow next to Field, to select the data field that should be evaluated.
  7. 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.
  8. Type the Value or values (each on a new line) that should be used for the conditional check.
    Values (in Strings) are case sensitive, unless the option Case insensitive is checked.
    Dates should be entered in ISO standard notation (yyyy-mm-dd).
    The selected action will be performed if the condition evaluates to true with one of the given values.
    If, conversely, the condition evaluates to false, and the option Toggle Visibility is checked, the opposite action will be performed.

    9. If you need more complex conditions, click Expand and edit the code of the script. See Writing your own scripts.

  9. Click Apply or OK.
  10. 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, a CSS class or HTML element needs to be used as the selector of the script. When you select multiple elements and create a new conditional content script following the actions described in Showing or hiding elements using the Conditional Content Script wizard, a CSS class will be applied automatically.

If you have created the script yourself, or if you want a script to apply to more elements later on, you have to do this manually.

  1. Double-click the conditional script in the Scripts pane to reopen it.
  2. Make sure that the selector is a CSS class (for example, .male) or an HTML element with a certain CSS class (for example, p.male). See Using the Text Script Wizard for further explanation on selectors.
  3. 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:

  1. Select the part of the text that you want to make conditional.
  2. Right-click the selected text and click Wrap in span.
  3. 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.
  4. 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 Content Script wizard.