# 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](https://docs.polarity.io/integrations/build-an-integration/directory-layout) 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](https://docs.polarity.io/integrations/build-an-integration/configuration-file).

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