Template Coding

  • 2 minute(s) read

Servitly uses a template-based model to render widgets and display information, including metric data, statistics, and properties values.

A template is a piece of HTML5 that includes:

  • Structure elements used for content positioning in a responsive way

  • UI Components compatible with the context of the template (e.g. customer details, thing details).

  • Custom HTML which used CSS and Angular components.

Layout

You can use the Boothstrap 4.6 CSS classes to arrange UI Components within the page, for instance, it is possible to use the Flex layout or the Grid System.

Note that, only the Flex layout is recognized by the Design View in the Template Visual Editor.

Flex

The following example generates one row, with two cells that fit the entire space of the row.

<div class="d-flex components-row flex-wrap">
 <widget-1></widget-1>
 <widget-2></widget-2>
</div>

Depending on the available space or screen size, the cells will be automatically resized and wrapped into new rows. See the Bootstrap Flex page for more details.

Grid System

The following example generates a row, with two cells.

<div class="row">
 <div class="col-md-6 col-sm-6 col-xs-12">
 <!-- CELL 1 -->
 </div>
 <div class="col-md-2 col-sm-2 col-xs-12">
 <!-- CELL 2 -->
 </div>
</div>

Each cell will fit the space differently according to the screen size:

  • CELL 1 will fit 6 columns (half space) on medium and small screens, and the whole row in case of extra-small screens.

  • CELL 2 will fit 2 columns on medium and small screens, and the whole row in case of extra-small screens.

This approach allows driving the way how the components will respond depending on the available screen size. See the Bootstrap Grid page for more details.

Attributes Encoding

In addition to the standard HTML attributes, widgets allow defining more specific attributes that are used to configure the widget itself, for instance, considering the following sample, the attributes iconName, name, and filters are widget specific attributes. 

<gauge-widget iconName="fa-clock-o">
 <metric name="Running Hours" filter="hours"></metric>
</gauge-widget>

Depending on the type of the attribute value, a different syntax must be used:

STRINGS

<ATTRIBUTE_NAME>="<ATTRIBUTE_VALUE>"

In some cases, you can also find and use the oldest syntax based on squared brackets.

[<ATTRIBUTE_NAME>]="'<STRING_VALUE>'"

BOOLEAN

[<ATTRIBUTE_NAME>]="true"
[<ATTRIBUTE_NAME>]="false"

Due to a Javascript limitation in recognizing types, booleans always require the squared brackets' syntax, for instance, if you write <ATTRIBUTE_NAME>="false", this is always intended as true.

NUMBERS

[<ATTRIBUTE_NAME>]="123"

You need to use the squared brackets' syntax to pass the attribute value as a number object instead of a simple STRING.

JSON OBJECTS

[<ATTRIBUTE_NAME>]="{'foo': 'xyz', 'bar': 123, 'baz': true}"

You need to use the squared brackets' syntax to pass the attribute value as a JSON object instead of a simple STRING.

Include templates

Templates can include other templates by using the include-template element.

<div>
 <!-- some content here -->
 <include-template name="templateToInclude"></include-template>
 <!-- some content here -->
</div>

The include-template element searches for the template by name, if not present, nothing is printed.

In this way, in the case of a thing-definition hierarchy, it is possible to create a dashboard whose fragments are redefined within the sub-thing-definitions, allowing common parts reuse.

Link Element

Link-element components can be used to place a navigation link as a button within pages or widgets.

Refer to the Link Element article for more details.