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:
![Graphical user interface, text, application Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-text-application-descr-2.png)
It is possible to have multiple Dashboards. In this case they will appear in the selection in the web:
![Diagram Description automatically generated with medium confidence](https://coe.qualiware.com/wp-content/uploads/2022/12/diagram-description-automatically-generated-with.png)
The Dashboard-template contains a collection of DashBoardItems-templates.
![Graphical user interface, text Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-text-description-automa-1.png)
Furthermore, the Dashboard contains a Settings tab where the Dashboard can be adjusted.
![Graphical user interface Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-description-automaticall-1.png)
Each DashBoardItems contain 2 tabs relevant for configuring their behaviour.
HTMLDashboard tab:
![Graphical user interface Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-description-automaticall-2.png)
… And Custom Configuration
![Graphical user interface, application Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-application-description-1.png)
Configuration of Dashboards
The Dashboard Setting tab contains the setting following table:
![Graphical user interface Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/graphical-user-interface-description-automaticall-3.png)
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:
![A picture containing diagram Description automatically generated](https://coe.qualiware.com/wp-content/uploads/2022/12/a-picture-containing-diagram-description-automati.png)
When false, items “fall upwards” and stack:
![A screenshot of a game Description automatically generated with medium confidence](https://coe.qualiware.com/wp-content/uploads/2022/12/a-screenshot-of-a-game-description-automatically.png)
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:
![Shape Description automatically generated with medium confidence](https://coe.qualiware.com/wp-content/uploads/2022/12/shape-description-automatically-generated-with-me.png)
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