• 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?

Template VariablesVariants