Template Editor

Servitly provides an editor dedicated to configuring templates used by pages, dashboards, and reports.

Within the console, where it is possible to edit a template, you can leverage the Servitly template editor, which is composed by the following views:

Layout View

Without coding, you can configure your templates, through a synthetic representation of the template allowing you to:

drag and drop components from the palette into the grid area;
move rows and components wherever you want;
sort sub-elements (e.g. metrics and properties);
edit components properties with specific editors, minimizing the need for manual text entry.

Code View

If your template is particularly complex, or if you have special requirements that the Layout View does not meet, you can switch to the Code View, providing a text editor where you can edit the source code of the template.
For more details about coding a template, you can refer to the Template Coding article.

Custom HTML elements, placed inside the code view, may not be fully recognized when switching back to the Layout View.

Editor Overview

Here it is described how the view of the template editor is composed.

Toolbar

Here you can switch between Layout and Code views, undo and redo changes, save the template.
At any time you can return to the Code View where you are free to write your custom content code. The Layout View still remains available, and unrecognized code will be preserved and displayed as a custom HMTL block. HTML comments are the only elements that are deleted when switching between views.

Components Palette

Here, you can choose the component to drag and drop into the grid area.
The list of components depends on the type of template you are editing (e.g. Thing Definition, General), and on the components you have enabled in the Components page.

Grid Area

Here, you can display the current template content, which is structured into rows containing the components.
Rows and components can be dragged and dropped wherever you want. For example, a component can be moved internally in the row or moved to another row.
The rows themselves can also be moved, by selecting the gray part on the left.

Element Outline

When you select an element from the grid, here you can see its structure. In the case the component support sub-elements (e.g. metric, properties), you can add one of them by clicking on the add button, present on the right of the parent element, and selecting the desired sub-element to add.
You can drag sub-elements to change their order into the parent component, for instance, you want to change the order of the displayed metrics or properties.
From this panel you can also copy an element, which will be automatically added to the same parent, then you are free to move and change it.

Property Panel

When an element is selected into the outline, the property panel is filled with its properties. Each property has a type, which is supported by its specific editor. For instance, if you need to specify a metric to be displayed by a widget, it is enough to select it from a selection menu.
Other than the element specific properties, the property panel may include on the bottom the following additional properties:

Content Alignment: define how the row elements must be aligned.
This property is available on ROW elements only.
Horizontal Sizing: define how the element must fit the row.
This property is available only on elements within a ROW.
CSS Class: the additional CSS classes you can add to the elements (e.g. m-2 for margins).
Visibility Condition: an expression used to display or hide the element dynamically. For more details, refer to the Visibility Conditions article.

Using the Editor

When a new template is created, by default 3 rows are added to it.

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

Each row uses the d-flex layout, and components are laid out horizontally, left-aligned, wrapped if needed (the screen horizontal size is not enough for all widget in the row), and spaced to each other by a fixed gap. The Servitly CSS class "components-row" is used to manage the gap between components in a row.

The Layout view can recognize only templates having the above structure, you can refer to the Old Templates Conversion article, in the case you want to migrate from the Grid System to Flex layout and start using the visual editor.

For more details about how the d-flex layout works, you can ref to this guide
https://getbootstrap.com/docs/4.6/utilities/flex/

Into the row property panel, you can change the content alignment between:

Left: all the components are aligned to the left (default).
Center: all the components are aligned to the center.
Right: all the components are aligned to the right.
Space Around: distribute components evenly, with half-size space on either end.
Space Between: distribute components evenly, with no spaces on either end.

From the palette, you can drag and drop components into a row and then edit their properties.

When the component is dropped in the desired place, its outline and property panel are updated too. The selected component, or element in the outline, is highlighted in yellow.

Into the property panel of the selected element, you can configure the main properties, like the Title/Label, CSS Class, and other properties depending on the element and parent component.

By clicking on the top right plus button, a drop-down menu appears, allowing you to add a sub-element, for instance, a metric, property, or any other sub-element supported by the chosen component.

In the case of custom HTML, which is not fully supported by the Layout view, a special block is displayed and preserved when saved.

When there are some changes, the Undo and Save buttons are enabled.
You can also press Crtl + S, to save the template content.

Into the browser, you can open two tabs, one on the editor and one on the live page, when the template is saved, remember to refresh the live page (F5) to see the changes.

Composite Content

Like the Composite widget, when a component supports composition, the editor shows into the component box the Edit Content button.

By clicking the Edit Content button, the editor changes and allows the editing of the composite content.

By clicking on the right upper arrow, you can switch back to the main template editing.

Columns Layout

If you want to layout elements vertically, you can add columns to the rows.

By selecting a ROW, you can click on the Add Column button within the row outline panel.

When done, a column appears in the ROW, and now you can drag elements into the columns.

Note that, within a row you cannot have mixed elements (columns and widgets).
If in a row you start using columns, you can place only columns in such a row.

Components Horizontal Sizing

If you need to change how a component is resized, you can edit its Horizontal Sizing attribute.

You can select one of:

Default

Fill

In case the page is resized, components are automatically distributed on multiple lines, this requires the flex-wrap on row level.