Templates

Use the Handlebars templating language to customize the look of your integration.

Directory Structure

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

Basic Syntax

Polarity Integrations use Ember Handlebars syntax. The syntax is covered in the official Ember templates guide: Ember Templates Guide

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:

{
    "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.

components/block.js

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

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

<div>
   John Smith
</div>