UI Customization Concepts
Conditional Templates
- Conditional Templates let you conditionally show or hide parts of the Velt Component Wireframes.
- You can add conditions based on the same data models available in Template Variables.
Usage
<VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
{/* Content to render if condition is true */}
</VeltIf>
Syntax
The condition is specified as a string that will be evaluated as a JavaScript expression. You can use:
- Comparison operators:
===
,==
,!==
,>
,<
,>=
,<=
- Logical operators:
&&
,||
,!
- Template variables enclosed in curly braces:
{variable.property}
Example Usage
{/* 1. Show content only for open annotations: */}
<VeltIf condition="{annotation.status.id} === 'OPEN'">
<p>This annotation is currently open.</p>
</VeltIf>
{/* 2. Display a message for annotations with more than 5 comments: */}
<VeltIf condition="{annotation.comments.length} > 5">
<p>This is a popular annotation!</p>
</VeltIf>
{/* 3. Combine multiple conditions: */}
<VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 0">
<p>This is a new open annotation without any comments yet.</p>
</VeltIf>
Was this page helpful?