# Templates

## Directory Structure <a href="#top" id="top"></a>

```
sample-integration/
├── templates/
|   └── sample-integration.hbs
```

## Summary

Integration templates allow you to customize how data returned from your integration is rendered in the details section of your integration. Templates are written using [Ember Handlebars](https://guides.emberjs.com/v3.4.0/templates/handlebars-basics/) syntax which enhances HTML by providing intuitive syntax for mixing static HTML content with dynamic integration content inside curly braces `{{ }}`. Handlebars also provides basic programming logic such as `if/then/else` statements and `loops`.

To begin you should create a template file with an `.hbs` extension. If you are following the recommended directory layout then the file should be placed in `templates/your-integration.hbs`. See the [directory layout guide](/integrations/build-an-integration/directory-layout.md) for more information.

After creating the template file make sure to configure your integration to use the template and associated component by [specifying the template file in your `config.js` file](/integrations/build-an-integration/configuration-file.md).

## Basic Syntax

Polarity Integrations use Ember Handlebars syntax. The syntax is covered in the official Ember templates guide: [Ember Templates Guide](https://guides.emberjs.com/v2.18.0/templates/handlebars-basics/)

### Displaying Integration Data

Integrations return an array of result objects. Each result object is rendered into a block using the template you specify in `config.js` or the default template which simply renders the data into a table. When accessing the integration data in your template the result object is accessed through the `block` property.

You can then use the curly brace syntax `{{` `}}` to render the dynamic data.

Assuming the result object returned from the integration has the following properties:

```javascript
{
    "entity": entityObject,
    "data": {
        "summary": ['Tag 1', 'Tag2'],
        "details": {
            "firstName": "John",
            "lastName": "Smith"
        }
    }
}
```

You would display the `firstName` and `lastName` in your template like this:

```
<div>
  {{block.data.details.firstName}} {{block.data.details.lastName}}
</div>
```

### **Displaying Component Data**

Variables that you define in a custom component can also be accessed in your templates. In this case access the variable directly without using the `block` object. &#x20;

{% code title="components/block.js" %}

```javascript
polarity.export = PolarityComponent.extend({
    firstName: "John",
    lastName: "Smith"
});
```

{% endcode %}

For example, if you define the `firstName` and `lastName` properties in your component file you can access those properties directly in your template to display them.

```
<div>
  {{firstName}} {{lastName}}
</div>
```

This would result in the following HTML

```markup
<div>
   John Smith
</div>
```

### &#x20;<a href="#helpers" id="helpers"></a>


---

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