Skip to content

08 Printouts - Handlebars

SRS supports the Handlebars templating engine. Template files should be stored in the /templates directory of the application.

Execute

To execute a Handlebars template, use the following API

HTTP
1
/api/srs/{id}/{template-name}.hbs.html?id={id}

Creating a new template with basic helpers srs_administrator

HTTP
1
/api/srs/{id}/_new.hbs.html

You can also use following extensions:

  • .hbs.html - html
  • .hbs.pdf - pdf
  • .hbs.csv - csv
  • .hbs.txt - txt
  • .hbs.xml - xml
  • .hbs.epp - epp
  • .hbs.svg - svg

Example data object

JSON
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
    dataset0:   //object
          {
            "field0": "some test <b>test</b>",
            "field1": "some test2",
            "field2": "some test3",
          }
        ,
    dataset1: [ //array
          {
            "field0": "some text4",
            "field1": "some text5",
            "field2": "some text6",
          }
        ],
    dataset2: [] //empty array
}

Handlebars FAQ

Built in functions

  • isArray
Text Only
1
2
3
{{#if (isArray this)}}
...
{{/if}}
  • fnAdd - numerator
Text Only
1
2
3
{{#each items}}
  {{add @index 1}}
{{/each}}
  • isEqual - allow subiteration
Text Only
1
2
3
4
5
6
7
{{#each items}}
  {{#each ../files}}
    {{#if (isEqual this.commisionID ../commisionID)}}
    <img src="data:image/png;base64,{{path}}" />
    {{/if}}
  {{/each}}
{{/each}}

Iterate datasets

Text Only
1
2
3
{{#each this}}
  <li>{{@key}}</li>
{{/each}}

IF in Handlebars

Text Only
1
2
3
4
5
6
7
{{#if dataset2}}
 NOT VISIBLE - Array is empty
{{/if}}

{{#if dataset0}}
  VISIBLE -  object is not empty
{{/if}}
Text Only
1
2
3
{{#unless isValid}}
{{/unless}}
Also keep in mind that you can insert an {{else}} in between an {{#if}} or {{#unless}}

raw text in Handlebars

Text Only
1
2
raw: {{{dataset0.field0}}}
html-escaped: {{dataset0.field0}}

Includes (images)

There are two ways to include images in the Handlebars template:

Direct reference to storage

You can include images from any storage location using the [[ and ]] tags.

HTML
1
<img src="data:image/png;base64,[[/api/core/storage/get/www/images/logo.png]]" />

Srs data object

You can include images from the SRS data object using the tbase64 column type.

srs:

XML
1
2
3
4
5
6
<srs>
  <itm model="column" type="tbase64" name="testimg" />
  <itm model="command" opts="dtsingle" name="settings">
    select  '33d52ff9-9914-923c-10bd-3251ea2db555.png' testimg
  </itm>
</srs>

hbs:

HTML
1
<img  src="data:image/png;base64,{{{settings.testimg}}}" />

Comment

Text Only
1
{{! This comment will not show up in the output}}

Generic table horizontal

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
      <!--START Optional width -->
      <colgroup>
        <col style="width:20mm">
        <col style="width:40mm">
         <col style="width:60mm">
      </colgroup>
      <!--END Optional width -->
  <thead>
    <tr>
     {{#each dataset1.[0]}}
        <th>{{@key}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each dataset1}}
      <tr> 
        {{#each this}}
          <td>{{this}}</td>
        {{/each}}
      </tr>
    {{/each}}
  </tbody>
</table>

Generic table vertical

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    <table>
      <tbody>
        {{#each dataset1}}
         {{#each this}}
          <tr>
            <td>{{@key}}</td>
            <td><b>{{this}}</b></td>
          </tr>
           {{/each}}
        {{/each}}
      </tbody>
    </table>

Custom table

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    <table>
  <thead>
    <tr>
     {{#each dataset1.[0]}}
        <th>{{@key}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each dataset1}}
      <tr> 
        {{#each this}}
          <td>{{this}}</td>
        {{/each}}
      </tr>
    {{/each}}
  </tbody>
    </table>

Template

  • Size of the printout can be changed in @page section
  • header element will be repeated on each page
  • footer will be repeated on each page
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html>
<head>
  <title>TITLE</title>
  <meta charset="utf-8" />
</head>
<body>

<header>HEADER SECTION</header>
CONTENT
<footer>FOOTER SECTION</footer>
  <style>
    @page {
      width: 210mm;
      height: 297mm;
      margin-top: 20mm;
      margin-bottom: 20mm;
    }

  /*EXAMPLE BACKGROUND IMAGE*/
  body {
      background: url('data:image/png;base64,[[/api/core/storage/get/appui/assets/images/logo-background.png]]');
      background-repeat: no-repeat;
      background-position: 50% 300px;
      background-attachment: fixed;
      background-size: 100%;
      min-height:800px;
    }
</style>

</body>
</html>