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"
    }
  ]
}

JSON

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>

HTML

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.

Top-Level List Loop

In case the JSON data you want to display is a list like the following:

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

JSON

This can happen when you filter data returning a list. You can access the list in the template by using the following syntax. {{#.}} to start the loop and {{/.}} to close the loop.

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

HTML

IF / ELSE Example

Sometimes you want to show a colored badge depending on a value being true or false. Considering the following JSON data

[
  { 
    "isActive": false,
    "company": "POWERNET"
  },
  {   
    "isActive": true,
    "company": "EXIAND"
  },
  {   
    "isActive": false,
    "company": "KYAGURU"
  },
  {
    "isActive": true,
    "company": "OATFARM"
  },
  {
    "isActive": true,
    "company": "VIAGRAND"
  }
]

CODE

In combination with the following template:


<table class="aui">
{{#.}}
    <tr>        
        <td>{{company}}</td>
        <td>
            {{#isActive}}
                <span class="aui-lozenge aui-lozenge-removed">Inactive</span>
            {{/isActive}}
            {{^isActive}}
                <span class="aui-lozenge aui-lozenge-success">Active</span>
            {{/isActive}}
        </td>
    </tr>
{{/.}}
</table>

CODE

{{#isActive}} is the IF part and {{^isActive}} refers to the ELSE part

The result will look like this:

In case you need to compare the value of your data source you can use the following helper function to achieve a similar result:


<table class="aui">
{{#.}}
    <tr>        
        <td>{{company}}</td>
        <td>
            <span class="aui-lozenge aui-lozenge-{{ RenderOnMatch isActive 'true''success''removed'}}">
              {{ RenderOnMatch isActive 'true''Active''Inactive'}}
            </span>
        </td>
    </tr>
{{/.}}
</table>

CODE

RenderOnMatch Example Explained

{{ RenderOnMatch field 'compare''equal''notequal'}}

CODE

This helper function compares the value compare with the value of the field and renders equal if they are equal and notequal if they are not.

SearchReplace

In case you have a text that contains line breaks like \n or \r\n and want to display those linebreaks in HTML you can use the following syntax to do so.

{{ SearchReplace field '\n''<br>' }}

CODE

or

{{ SearchReplace field '\r\n''<br>' }}

CODE

Raw Data

The template visual is a fully customizable HTML Template.

If you want to display data of a Raw data source you should use {{{ raw }}} to access and render the data. Three curly brackets is important because you want to display HTML from the raw datasource not escaped. Otherwise use {{ raw }} with only two brackets.

Be aware that using unescaped data from your source can introduce XSS attacks. So the data source you use must be a trusted source.

Markdown

If you data source is a markdown document set the interpreter to markdown. This will convert the markdown to HTML and can then be used in them template with {{{ raw }}}

Formatting Numbers

We added some helper functions to to basic number formatting.
The following examples are run on this JSON:

{
    "number1": 1.5,    
    "number2": 1000.457
}

CODE

Here are formatting examples

{{ FormatCurrency number1 }}
-> $1.50

{{ FormatNumber number1 'N0' }}
-> 2

{{ FormatNumber number1 'N1' }}
-> 1.5

{{ FormatNumber number1 'N2' }}
-> 1.50

CODE

If you need different culture formatting you can customize this as well. The default culture for number formatting is 'en-US'.

{{ FormatCurrencyCulture number1 'de-DE'}}
-> 1,50 €
{{ FormatNumberCulture number2 'N2''de-DE' }}
-> 1.000,46

CODE

Formatting Date & Time

The following examples are run on this JSON:

{
    "time": "2020-09-01T22:05:45.488+02:00"
}

CODE

Here are formatting examples

{{ FormatDate time 'g''en-Us'}}
-> "9/1/2020 10:05 PM"

{{ OffsetTimezoneThenFormatDate time '+8''g''en-AU'}}
-> "2/9/2020 4:05 am"

CODE

The g in the examples is a format type which can be changed to the following and will be different depending on your culture.

* d :08/17/2000
* D :Thursday, August 17, 2000
* f :Thursday, August 17, 2000 16:32
* F :Thursday, August 17, 2000 16:32:32
* g :08/17/2000 16:32
* G :08/17/2000 16:32:32
* m :August 17
* r :Thu, 17 Aug 2000 23:32:32 GMT
* s :2000-08-17T16:32:32
* t :16:32
* T :16:32:32
* u :2000-08-17 23:32:32Z
* U :Thursday, August 17, 2000 23:32:32
* y :August, 2000

CODE

Arithmetics in Templates

We added some helper functions to do basic arithmetics in combination with formatting of the result. The following examples are run on this json

{
    "number1": 6,    
    "number2": 3
}

CODE

You can add, subtract, divide and multiple decimal values.

{{ AddThenFormat number1 number2 'N1' }}
-> 9.0

{{ SubThenFormat number1 number2 'N1' }}
-> 3.0

{{ DivThenFormat number1 number2 'P1' }}
-> 50.0%

{{ MulThenFormat number2 number1 'N1' }}
-> 18.0

CODE

If you need different culture formatting you can customize this as well. The default culture for number formatting is ‘en-US’.

{{ AddThenFormatCulture number1 number2 'N1''de-DE' }}
-> 9,0

{{ SubThenFormatCulture number1 number2 'N1''de-DE' }}
-> 3,0

{{ DivThenFormatCulture number1 number2 'P2''de-DE' }}
-> 50,00%

{{ MulThenFormatCulture number2 number1 'N1''de-DE' }}
-> 18,0

CODE

Access Array By Index

The following examples are run on this JSON

{
  "result":[
    { "name" : "anybody"},
    { "name" : "nobody"}
  ]
}

CODE

Examples

{{#result.0}} {{ name }} {{/result.0}}
-> anybody
{{#result.1}} {{ name }} {{/result.1}}
-> nobody

{{ AccessArrayByIndex 'result''0''name' }}
-> anybody
{{ AccessArrayByIndex 'result''1''name' }}
-> nobody

CODE

The following examples are run on this JSON

[
  { "name" : "anybody"},
  { "name" : "nobody"}
]

CODE

Examples

{{ AccessArrayByIndex '.''0''name' }}
-> anybody
{{ AccessArrayByIndex '.''1''name' }}
-> nobody

CODE

Javascript

Due to security reasons we currently don’t allow any custom Javascript logic within templates. You can still work with AUI elements that don’t need extra scripting like the expander.