Overview
This is a user guide to change the visual appearance of a widget (size, colors, borders, other widget-specific style customizations).
How to adjust Widget Style
Step | Screenshot | |
1 | Place a Widget on the canvas (click on ‘Add’ button nearby the widget from widget library) | ![]() |
2 |
Select the widget placed on the canvas, review available Style customization options under ‘Style’ section inside ‘Properties’ tab |
![]() |
3 |
If available, click on ‘Show Advanced Options’ to review the complete list of available Style customizations |
![]() Advanced Options are collapsed
![]() Advanced Options are expanded
|
4 |
Save Changes to the Graphic Layout |
![]() |
5 |
Review changes in Graphics Viewer (Customer/ Site / Equipment page where Graphic was linked) |
![]() |
Available Widget Style Customizations
Style Customization | Applicable to Widgets | Description | Option in Graphics Builder | Outline example (Graphics Viewer) | |
1 |
Width |
Map, Chart, Scatter, Image, Table |
Width of a Widget in pixels |
![]() |
|
2 |
Height |
Map, Chart, Scatter, Image, Table |
Height of a Widget in pixels |
![]()
|
|
3 |
Background Color |
Icon, Chart, Shapes |
Defines background color for a Widget: one can select any color via color picker or code |
![]() ![]() Current selection
![]() ![]() New selection
|
![]() ![]()
|
4 |
Color Theme |
Chart, Scatter |
A Color palette being used to display a Widget. One can either select from standard Themes or define a custom Theme. |
![]() ![]() Current Selection
![]() ![]() New Selection
|
![]() ![]()
|
5 |
Background Transparency |
Icon, Chart, Shapes |
Changes transparency of a Widget from 0 (transparent) to 1 (solid) with 0.1 stepper |
![]() ![]()
|
![]() ![]()
|
6 |
Border Color |
Icon, Chart, Shapes |
Defines background color of a Widget: one can select any color via color picker or code |
![]() ![]() Current Selection
![]() ![]() New selection
|
![]() ![]()
|
7 |
Border Width |
Icon, Chart |
Defines Border Width of a Widget in pixels: from 0 px to 10 px with 1 px stepper |
![]() |
Thick border width |
8 |
Border Radius |
Chart |
Defines Border Radius of a Widget corners in pixels: from 0 px to 10 px with 1 px stepper |
![]() ![]()
|
![]() ![]() Rounded border radius
|
9 |
X Attribute Name |
Chart |
Defines an Attribute to be used for X Axis:
NOTE: must apply ‘Parse URI’ Data Pipeline to be able to use the attributes |
![]() ![]()
|
![]() ![]() Timestamp on X Axis
|
10 |
Y Attribute Name |
Chart |
Defines an Attribute to be used for Y Axis: List of possible values:
|
![]() ![]()
|
![]() Y Axis shows value
![]()
|
11 |
Hide X Axis |
Chart |
If enabled, hides X axis of a Widget in Graphics View Mode |
![]() |
![]() ![]() X Axis is hidden
|
12 |
Hide Y Axis |
Chart |
If enabled, hides Y axis of a Widget in Graphics View Mode |
![]() |
![]() ![]()
|
13 |
Show Legend |
Chart |
If enabled, shows Legend in Graphics View Mode according to Legend Position defined |
![]()
|
![]() ![]() Legend |
14 |
Legend Position |
Chart |
Shows Legend in Graphics View Mode in the selected position towards a Widget:
|
![]() ![]()
|
![]() ![]() Legend at the bottom
|
15 |
Show Timespan Filter |
Chart |
If enabled, shows Timespan Filter towards a Widget in Graphics View Mode to change period for a Widget :
|
![]()
|
![]() |
16 |
Show Data Labels |
Chart |
If enabled, shows Data Labels next to each Datapoint in Graphics View Mode |
![]() |
![]() ![]() Data Labels |
17 |
Show X-Axis Grid |
Chart |
If enabled, shows X-Axis Grid in Graphics View Mode |
![]() |
![]() ![]() X-Axis Grid
|
18 |
Show Y-Axis Grid |
Chart |
If enabled, shows Y-Axis Grid in Graphics View Mode |
![]() ![]()
|
![]() ![]() Y-Axis Grid |
19 |
Datapoint Radius |
Chart |
Changes size of a datapoint on Widget in pixels: from 0 px to 5 px (solid) with 1 px stepper |
![]() ![]()
|
![]() ![]() Extended Datapoint Radius |
20 |
Override Priority |
Dual Setpoint Thermostat, Thermostat, Slider |
Sets the Priority from BACnet Priority Array to be overriden by a Widget (please find more info about Priority Array workflow in BACnet Basics - BACnet Priority Array |
![]() |
N/A
|
21 |
Icon |
Icon |
An Icon from icon library |
![]() ![]()
|
![]() ![]()
|
22 |
Frame URL |
Iframe |
URL to be displayed inside Iframe |
![]() |
![]() |
23 |
Theme |
Map |
|
![]() |
![]() |
24 |
Zoom |
Map |
Defines zoom ration for a widget |
![]() |
N/A
|
25 |
Size |
Slider |
Defines size of a Widget in pixels |
![]() |
N/A
|
26 |
Weight |
Slider |
Defines font weight for a Widget |
![]() |
![]() |
27 |
Horizontal Alignment |
Column, Row |
|
![]() ![]()
|
![]() ![]()
|
28 |
Vertical Alignment |
Column, Row |
|
![]() ![]() |
![]() ![]()
|
29 |
Border Style |
Shapes |
|
![]() ![]() |
![]() ![]()
|
30 |
Color |
Link |
Defines Font Color for a Widget in pixels |
![]() ![]() ![]() ![]()
|
![]() |
31 |
Font Size |
Link |
Defines Font Size for a Widget in pixels |
![]() ![]()
|
![]() |
32 |
Font Weight |
Link |
Defines Font Weight for a Widget |
![]() ![]()
|
![]() ![]()
|
33 |
Text Align |
Link |
Defines Text Align for a Widget |
![]() |
![]() |