Advanced Conditional Logic Statements

Configure conditional logic statements from scratch, directly within a page’s HTML source code.

Conditional logic statements can be applied to any HTML element in your document, but the point and click Collaborate user interface only supports inserting a conditional <div> block. To create statements on other HTML elements, you will need to insert them directly into source code.

HTML Overview

<div>Some content to display here</div>

HTML is the standard structure that makes up the skeleton of all content on the web. All HTML elements are contained within a set of < > carats. Any text inside the carats is not visible to the user when the HTML is rendered. The text outside of those carats will be displayed. In addition, each HTML element has an opening and closing tag. Opening tags use only < > carats, while closing tags use </ >. All HTML is simply made up of elements that are called out using pairs of tags. Each element has rules that govern how it displays on the page and how it interacts with other HTML elements.If you want to learn more about HTML, here are some good references:

HTML as used with conditional logic statements in Collaborate

In the context of Collaborate and writing conditional logic statements, you can write statements manually in the Source Code of your document. Access Source Code by going to Edit > Source Code in the editor toolbar.

You'll likely see something like this in your document HTML:

This is a <div> element that has a conditional show statement inserted on it. To compare to the UI editing experience, this is what would be entered into source code automatically when you insert a conditional content block using the Conditional Content option on the editing toolbar. The dashed blue box surrounding your content represents the data-show-if="" or the data-hide-if="" in the source code.

Using the Collaborate Conditional Content tool will only insert <div> elements with conditional statements; however, conditional statements can be applied to any HTML element. Other useful examples include (but are not limited to):

Paragraph <p>
Table <table>
Table Row <tr>
Table Cell <td>
Ordered List <ol>
Unordered List <ul>
List Item <li>
Span <span>

<span> is especially useful for inserting conditional logic on content that is within any other HTML element. Whereas <div> and <p> (among others) are block elements that take up the entire line inside the container, <span> is an inline element and therefore is allowed to be on a line with other HTML elements.

<span> example:

<p>Direct any inquires to the <span data-show-if="Opportunity_Region == 'North'">North</span><span data-show-if="Opportunity_Region = 'South'">South</span> region manager.</p>

When rendered in the document, it will look like this:

Then when the document is previewed or published, the proper word will display based upon the value of the Opportunity_Region variable.

Writing Conditional Logic Statements in Source Code

Once you identify the element(s) you want to put conditional logic statements on, refer to Data-Show-If/Data-Hide-If Attributes for a detailed breakdown on how to write these statements in source code.

It is also possible to string multiple logic statements together to create a complex logic statement. To do this, you can insert multiple ANDs or ORs between each collection of a variable, operator and value. However, you cannot use ANDs and ORs together in the same complex statement. For example, these statements are valid:

But these statements are not:

ANDs and ORs are case sensitive and must be capitalized. This differs from writing conditional logic statements for including sections and pages, where these must be lower-case.

If your use case requires a combination of ANDs and ORs, consider enabling and using Logic Groups. If not enabled in your account, you will need to contact support.