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

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

The question should be specific, self-contained, and written in natural language.
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.