The HTML Dashboard template is used to configure the dashboards introduced in QualiWare 10.8.
The Dashboard is setup up through a HTMLTemplateDefinition’s Dashboard tab:

It is possible to have multiple Dashboards. In this case they will appear in the selection in the web:

The Dashboard-template contains a collection of DashBoardItems-templates.

Furthermore, the Dashboard contains a Settings tab where the Dashboard can be adjusted.

Each DashBoardItems contain 2 tabs relevant for configuring their behaviour.
HTMLDashboard tab:

… And Custom Configuration

Configuration of Dashboards
The Dashboard Setting tab contains the setting following table:

Background: You can insert any HTML color, HEX or RGB. This field behaves like color in CSS.
Examples: rgb(204, 255, 229) #E5FFCC PaleGreen
minWidth and maxWidth: The dimensions of the dashboard.
minRow and column: minimum rows amount and columns
cellHeight and CellHeightThrottle: cellHeight- one cell height (default?: ‘auto’). Can be:
- an integer (px) Example: 20
- px, em, rem (ex: ‘100px’, ’10em’, ’10rem’)
- auto – height will be calculated for square cells (width / column) and updated live as you resize the window
- initial – similar to ‘auto’ (start at square cells) but stay that size during window resizing.
CellHeightThrottle: throttle time delay (in ms) used when cellHeight=’auto’ to improve performance vs usability (default?: 100).
marginTop, marginBottom, marginLeft, marginRight and marginUnit:
The margins can be set with integers or strings. Use marginUnit to define the unit. Example of units: “px” and “em”.
float: enable “floating” items (default: false). Enabling this allow items to be anywhere on the page.
When true:

When false, items “fall upwards” and stack:

animate: turns animation on to smooth transitions (default: true). This is used when editing the layout when items swap places.
placeholderText: placeholder default content (default: ‘MOVE HERE’). This is shown when user is in edit mode and dragging the items:

rtl: “Right To Left”, Possible values are true, false, ‘auto’. This value has no effect.
In QualiTube, you can find videos about how to configure the Dashboards