Component Styling

Several Components allow you to set a color on an attribute, such as the background color, text color, etc.


In most cases, setting a color functions the same way. You can enter a valid HTML hexadecimal color code, a valid HTML color name, or use the color picker to visually select the color you'd like. When you use the color picker, the end result will be an HTML hex color.

Learn more about HTML colors



Most Components can have an exterior border set on them with variable styling. All borders can have their color, size (in pixels), and style configured. Additionally, some Components allow their border radius to be set. This applies a curvature to the corners of the border.

Colorborder color
Sizethickness in pixels
Styleborder appearance, such as solid, dashed, dotted, etc.
Radiuscorner radius, where applicable



When a Component contains a text element, the Font can often be configured.

Base Fontthe typeface
Sizetext height pixels
Stylebold, italic, underline
Alignhorizontal and vertical alignment
Paddingtop, right, bottom, left padding to assist with text positioning


Components can be dynamically shown or hidden using the VIsibility property. When a Component is hidden, it will not display in Run Mode, but will still be available and visible in Edit Mode.


In some cases you may want to draw attention to a Component in your UI. For example if something enters an alarm state, or is a critical failure, an operator may not catch it. This is especially the case if your dashboard is complex with many small Components. The Flah property causes the Component to fade in and out when it is set to true. There are two additional settings on the Flash property:


Ratein seconds, how quickly each flash will occur. This can be set to fractions of a second if you want the flashing effect to be more pronounced.
CountThe number of times the Component will flash when the Flash property is true. Setting this to -1 will cause it to flash indefinitely.
Last Updated: