Skip to main content
  • 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.
There are two ways to use Conditional Templates:

​
1. Using Velt If component

  • Wrap wireframe components and html elements in Velt If component.
  • If the condition is not met, the component will not be rendered.
  • Good for targeting groups of components at once.
  • React / Next.js
  • Other Frameworks
<VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
  {/* Content to render if condition is true */}
</VeltIf>

​
2. Using Velt If attribute

  • Add Velt If attribute to existing wireframe components.
  • If the condition is not met, the component will not be rendered.
  • Good for targeting a single component.
  • React / Next.js
  • Other Frameworks
<VeltCommentDialogWireframe.Header veltIf="{user.isAdmin} === true" />

​
Syntax

The condition is specified as a string that will be evaluated as a JavaScript expression. Here is a sample syntax: Syntax: {<variable>} <operator> <value> Example: {annotation.status.id} === 'OPEN'
  • Template variables need to be enclosed in curly braces: {variable.property}
  • Operators:
    • Comparison operators: ===, ==, !==, >, <, >=, <=
    • Logical operators: &&, ||, !
  • Value can be a string, number or boolean.

​
Strict CSP Policy

Some environments enforce strict Content Security Policies (CSP) that disallow unsafe-eval. In such cases, the default method could be blocked and the conditions may not be evaluated. Here is how you can use an alternative approach to evaluate Velt If conditions. This method uses a safer, CSP-compliant parser to evaluate your Velt If conditions.
  • React / Next.js
  • Other Frameworks
client.enableSafeEval();
client.disableSafeEval();

​
Examples

  • React / Next.js
  • Other Frameworks
{/* 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>