- 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.
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.
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.
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:
&&
,||
,!
- Comparison operators:
- Value can be a string, number or boolean.
Strict CSP Policy
Some environments enforce strict Content Security Policies (CSP) that disallowunsafe-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.