Creating Print Templates

In 4HSE, there are useful tools available to produce printable documents and reports from your project data.
There is a print wizard that generates the final document by merging data and templates:

the data are the information you want to display within a document (for example, the list of employees in a project)
the template is a graphic model or a visual representation to present the data according to certain logic or styles

You can create and save templates in 4HSE using the ht format. Once the template is created, you can use it to produce a graphical output that can be saved as:

HTML viewable in a web browser
doc viewable in Microsoft Word

There are also special documents identified by the hdoc extension that can be included within templates. The HDOC extension tells the device which app can open the file. However, different programs may use the HDOC file type for different data. For example, a header with a logo to insert at the top of a report.

Creating a Template

A template consists of:

static content: text, images, paragraphs, etc.
dynamic content: variable content that changes based on the data. For example, a section is shown/hidden based on certain conditions or placeholders are replaced with data at print time (expressions).

To build a template, you use the following elements:

HTML: to define the structure of the document and divide the content into sections
CSS: to define the style of the content (colors, shapes, sizes)
handlebars: to define dynamic content or introduce display logic (e.g., show red text if a certain condition is met)
javascript: to define new display logic not already available

HTML

The basic structure of a template is as follows:

<html>                          // 1
    <head>
        <meta charset='utf-8'>  // 2
    </head>
    <body>                      // 3
        ...
    </body>
</html>

This is the main tag that contains the entire document.
The charset is not mandatory but strongly recommended, as it ensures the compatibility of character encoding during printing.
This is the tag that contains the content of the document.

CSS

The graphic definition of elements can be done inline. However, it is recommended to insert the CSS within the style tag in head.

<html>
    <head>
        <meta charset='utf-8'>
        <style>
            body { color: black; }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Handlebars

Expressions

The mustache syntax is part of the handlebarsJS library and is used by the engine to reference dynamic content within the template.
The basic directives are the expressions that allow you to print data from a collection of your project within the template.

Example: you want to display the name of the office at the top of the document.

<html>
    <head>
        <meta charset='utf-8'>
        <style>
            body { color: black; }
        </style>
    </head>
    <body>
        <h1>The name of the office is {{office.name}}</h1> // The name of the office is Verona
    </body>
</html>

In this case, through the path expression office.name you want to print the value of the name attribute of the office resource. This is an example of dynamic content, where the value of the ‘name’ attribute will change based on the data from a project collection.
The documentation for collection resources is available in the API manual. In this example, it refers to the “schema” section of the office collection.

Helpers

In addition to the basic expression directive, many other directives called helpers are available. Some of these are provided by handlebars (builtin-helpers), others have been introduced by 4HSE.
They can be divided into:

conditional helpers (if, else, and, or)
iteration helpers (each)
comparison helpers (equal, not equal, greater, less, etc.)
mathematical helpers (sum, product, etc.)
selection and aggregation helpers (select, distinct, join)

A helper is defined as a javascript function that has a variable number of arguments, a context, and some options. To understand how helpers work, consult the documentation on custom helpers.

4HSE Helpers

dateFormat

dateFormat(dateString)
Starting from a date in the yyyy-mm-dd format, it returns the date formatted according to the user’s language.

{{ dateFormat "2010-10-05" }}  // User language: it-IT, returns 05/10/2010

today

today()
Returns the current date formatted according to the user’s language.

{{ today }} // 05/10/2020

eachSort

eachSort(context, sortAttribute, direction, options)
Iterates a collection of resources ordered by an attribute in ascending or descending order. Example: scroll through the entire collection of offices ordering them in ascending order office1, office2 as in the example below.

//offices = [{name: "office3"},{name: "office1"}]

{{#eachSort offices "name" "asc"}}
    {{name}} // office1,office3
{{/eachSort}}

sum

sum(v1, v2)
Sums v1 and v2. Addition of two numbers that returns a result.

{{sum 1 2}} // 3

prod

prod(v1, v2)
Multiplication between v1 and v2.

{{prod 3 2}} // 6

eq

eq(v1, v2)
Compares if v1 is equal to v2. Returns a boolean value.

{{eq "1" "2"}} // false
{{eq "2" "2"}} // true

ne

ne(v1, v2)
Compares if v1 is different from v2. Returns a boolean value.

{{ne "1" "2"}} // true
{{ne "2" "2"}} // false

lt

lt(v1, v2)
Compares if v1 is less than v2. Returns a boolean value.

{{lt "1" "2"}} // true
{{lt "2" "2"}} // false
{{lt "3" "2"}} // false

gt

gt(v1, v2)
Compares if v1 is greater than v2. Returns a boolean value.

{{gt "1" "2"}} // false
{{gt "2" "2"}} // false
{{gt "3" "2"}} // true

lte

lte(v1, v2)
Compares if v1 is less than or equal to v2. Returns a boolean value.

{{lte "1" "2"}} // true
{{lte "2" "2"}} // true
{{lte "3" "2"}} // false

gte

gte(v1, v2)
Compares if v1 is greater than or equal to v2. Returns a boolean value.

{{gte "1" "2"}} // false
{{gte "2" "2"}} // true
{{gte "3" "2"}} // true

and

and(cond1, cond2, … condN)
Executes a logical AND between two or more conditions. Returns a boolean value.

or

or(cond1, cond2, … condN)
Executes a logical OR between two or more conditions. Returns a boolean value.

distinct

distinct(list, key, options)
Starting from a collection, it returns a list of unique resources based on the value of an attribute (key).

select

select(context)
Returns a list of filtered nodes according to a pattern.

join

join(list1, list2, …, listN)
Joins two or more collections into one.

In this example, an array based on the officeRisk collection ordered by name is iterated. The iterable array is obtained by combining the distinct, join, and select directives.

{{#eachSort                                                   // 1
    (distinct                                                 // 3
        (join                                                 // 4
            (select "officeRisk.*.riskDemand.*.probability")  // 5
            (select "officeRisk.*.riskDemand.*.damage")       // 6
        )
        "office_risk_id"                                      // 3
    )
    "name"                                                    // 2
}}

Iterator.
Sorts an array of objects by the name attribute.
Excludes from iteration all objects with the same office_risk_id (to avoid duplicates).
Joins two collections into one.
The first collection is officeRisk. From this collection, it selects only the objects where the officeRisk.riskDemand attribute is filled and office.riskDemand.probability is filled.
The second collection is still officeRisk but selects only the objects where the officeRisk.riskDemand attribute is filled and office.riskDemand.damage is filled.

Adding a Custom Helper

To add a custom helper, simply insert a new method into the js class already defined in the “helpers” section of the template editor:

var helpers = {
    prod(v1, v2) {
        return v1 * v2;
    }
}

usage:

{{ prod 2 2 }} // 4

Partials

Partials are normal Handlebars templates that can be included directly in other templates. It is possible to insert external documents in hdoc or HTML format within the template, and therefore in the final report.
For example, you want to display a header at the top of the document. You must have it previously created in the header.html file.

header.html

<h1>This is my header</h1>

template.ht

{{> header.html}}
other content

the final document will be as follows

<h1>This is my header</h1>
other content

Template Example

Let’s create a template that prints the list of people within a table.

<html>
    <head>
        <meta charset='utf-8'>
        <style>
            table th { font-weight: bold }                                      // 1
        </style>
    </head>
    <body>
        {{> header.html}}                                                       // 2

        <h1>People</h1>

        <table>                               //defines a table in html
            <thead>                           //defines the table header
                <tr>                          //defines a row in the table
                    <th>Name</th>             //defines the header of the cell
                    <th>Surname</th>
                    <th>Date of Birth</th>
                </tr>
            </thead>
            <tbody>                           //defines the body of the table
                {{#eachSort persons "first_name"}}                              // 3
                <tr>
                    <td>{{first_name}}</td>     //defines the cell of the table         // 4
                    <td>{{last_name}}</td>                                      // 4
                    <td>
                        {{#if (lt birth_date "1990-01-01")}}                    // 5
                            <span>{{dateFormat birth_date}}</span>
                        {{else}}                                                // 6
                            <span style="color: red">{{dateFormat birth_date}}</span>
                        {{/if}}
                    </td>
                </tr>
                {{/eachSort}}
            </tbody>
        </table>
    </body>
</html>

Simple css directives to define the style of the table making the font bold.
You want to show a simple external header at the top of the document.
You iterate over the collection of people ordering them by name.
These are simple placeholders to show the name and surname of the person in the table.
If the person was born before 1990, the date is simply displayed formatted according to the user language.
Otherwise, the date is displayed formatted in red.