Template

The template visual is a fully customizable HTML Template.

Here you can use HTML to display the result the way you want with maximal flexibility. The data can be used with the mustache syntax. All CSS classes from AUI can be used inside the template to fit well into Confluence.

For an example we use the following data

{
  "userlist": [
    {
      "id": 1,
      "name": "Mario Speedwagon",
      "username": "mario"
    },
    {
      "id": 2,
      "name": "Anna Sthesia",
      "username": "anna"
    }
  ]
}

And the following template to display the data in a table designed to fit into Confluence.

<table class="aui aui-table-list">        
    <thead>
        <th>ID</th>
        <th>Name</th>
    </thead>
    <tbody>
    {{#userlist}}
        <tr>
            <td>{{ id }}<td>
            <td>{{ name }}<td>
        </tr>            
    {{/userlist}}
    </tbody>
</table>

This example will display a list of users. The css class aui and aui-table-list define the look of the table. When using both classes like in this example the table will have no row borders but a mouse-hover effect that highlights the hovered row. If you just use aui the table will have borders for each row, but now hover effect.

See the Template Syntax section for more details on creating more complex templates and the Advanced Tables section for creating rich tables

Custom Error Template

This optional template allows you to design custom error messages. It will be shown on any error message that is produced by your data source. The default template looks similar to this

<div class="aui-message aui-message-warning">    
    <p>Error for <strong>{{ panel }}</strong>
    {{#code}}responded <strong>{{ code }}</strong></p>{{/code}}
    <small>Reason: {{ error }}</small>
</div>