Skip to main content
Skip table of contents

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

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

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

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

Variable

Description

{{ panel }}

The name of the panel producing the error

{{ code }}

The HTML status code of the error. This value is only present in web based data sources.

{{ error }}

The original readable error message

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.