> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/ui-customization/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.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
      {/* Content to render if condition is true */}
    </VeltIf>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-if condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
      <!-- Content to render if condition is true -->
    </velt-if>
    ```
  </Tab>
</Tabs>

## 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.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogWireframe.Header veltIf="{user.isAdmin} === true" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-wireframe-header velt-if="{user.isAdmin} === true">
    ```
  </Tab>
</Tabs>

## 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.

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    client.enableSafeEval();
    client.disableSafeEval();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    Velt.enableSafeEval();
    Velt.disableSafeEval();
    ```
  </Tab>
</Tabs>

## Examples

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    {/* 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>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <!-- 1. Show content only for open annotations: -->
    <velt-if condition="{annotation.status.id} === 'OPEN'">
      <p>This annotation is currently open.</p>
    </velt-if>

    <!-- 2. Display a message for annotations with more than 5 comments: -->
    <velt-if condition="{annotation.comments.length} > 5">
      <p>This is a popular annotation!</p>
    </velt-if>

    <!-- 3. Combine multiple conditions: -->
    <velt-if condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 0">
      <p>This is a new open annotation without any comments yet.</p>
    </velt-if>
    ```
  </Tab>
</Tabs>