Auto-generated Content Data-Show-If/Data-Hide-If Attributes
data-show-if/data-hide-if
These attributes allow a user to show or hide blocks of content in a document based on meeting criteria defined in the attribute’s statement. The attribute is inserted within the HTML element that you want to conditionally display.
Syntax: data-show-if="variable_name <operator> 'value'"variable_name: the Collaborate variable name of the field you want to evaluateoperator: the method by which you want to compare your variable_name and valuevalue: a user-defined value that you compare with the value of your variable_name
Valid operators in Conga Collaborate:
| Operator | Definition |
|---|
| = | Equals |
| != | Does not equal |
| > | Greater than |
| >= | Greater than or equal |
| < | Less than |
| <= | Less than or equal |
| LIKE | Contains |
| NLIKE | Does not contain |
| IS BLANK | Value is blank |
| IS NOT BLANK, IS PRESENT | Value is not blank |
The following example shows the HTML necessary to make a paragraph visible when the Proposal Location contains Los Angeles. In all other cases, the paragraph will hide.
<p data-show-if="proposal_location LIKE 'Los Angeles'">Show this text if the Proposal Location contains Los Angeles</p>
Remember that the value of the statement is case-sensitive. If the true value of the proposal_location variable is 'Los Angeles' but instead we entered 'los angeles' in our statement, the logic statement would return false and the content would hide.
These attributes can also be used within any HTML element, but is particularly useful within <span> elements in order to conditionally display information within other elements.
Table cell example:
<td><span data-show-if="Opportunity_Contract_Term__c == 6">*</span>[PricebookEntry.Product2.Name]</td>
This HTML allows us to show the asterisk only if the Contract Term = 6.
When rendered in the document, it will look like this:
