> For the complete documentation index, see [llms.txt](https://docs.polarity.io/integrations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/conditionals.md).

# Conditionals

## Summary

Handlebar templates include `if` `else` and `unless` conditional helpers.  These helpers can be invoked as block or inline helpers.

## Block Usage

Conditional statements can be invoked in block format to show blocks of HTML if the conditional statement evaluates to true.  In the example below, the `severity` property will only be displayed if it is present.

```markup
{{#if block.data.details.severity}}
   <span>Severity: {{block.data.details.severity}}</span>
{{/if}}
```

The `{{if}}` helper tests for truthiness.  This means that the condition will be true except when it is `false`, `undefined`, `0`, `[]`, or `null`.

The inverse of the `if` helper is the `unless` helper.

```markup
{{#unless block.data.details.severity}}
   <span>No Severity Level Found</span>
{{/unless}}
```

Both the `if` helper and `unless` helper can use the `else` helper.

```
{{#if block.data.details.severity}}
    <span>Severity: {{block.data.details.severity}}
{{else}}
    <span>No Severity Level Found</span>
{{/if}}
```

## Inline Usage

Conditional helpers can also be used `inline`.  When using the helper inline, no `#` sign is needed.

```markup
<div>
    {{if block.data.details.isActive "Active" "Not Active"}}
</div>
```

In the example above, the `<div>` will display the string `Active` if the boolean value `isActive` is `true`.  Otherwise, if `isActive` is `false` the string `Not Active` will be displayed.

Inline conditional helpers can be used to conditionally add CSS classes to your template.

```
<span class={{if block.data.details.isActive "green" "red"}}></span>
```

Oftentimes you will combine this inline conditional usage with [truth helpers](/integrations/build-an-integration/customizing-the-overlay-window/templates/built-in-helpers.md#truth-helpers).

{% tabs %}
{% tab title="template.hbs" %}

```
<span class={{if (gt block.data.details.severity 50) "red" "green"}}>
    {{block.data.details.severity}}
</span>
```

{% endtab %}

{% tab title="style.less" %}

```cpp
.red {
    color: #ff0000;
}

.green {
    color: #00ff00;
}
```

{% endtab %}
{% endtabs %}

In the example above, the severity level will be displayed using the `red` CSS class if the severity value is greater than 50, otherwise the severity level will be displayed using the `green` CSS class.  These CSS classes might set the `color` attribute on the text.

{% hint style="info" %}
For more detailed information on conditional helpers please see the Ember handlebars guide located here <https://guides.emberjs.com/v3.4.0/templates/conditionals/>
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/conditionals.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.