Dashboards
Last updated
Last updated
The following is the Dashboard's Custom Style editor. From here, you can:
Set Custom Styles for the Dashboard.
Set Custom Styles for the ContextBar.
Set Custom Styles for all of the Widgets in the current Dashboard, at once.
Set the dashboard
properties inside the dashboard
key
Applying any styling to a Dashboard will override the settings given by the App's style.
Any properties' Accepted Values different than numbers, needs to be wrapped up in double quotes as a String.
The ContextBar
and Widget
components in a Dashboard inherit thecolor
property from it.
Set the contextBar
properties inside the contextBar
key
Setting the color
property for the contextBar will override its inherited value from the Dashboard
Any properties' Accepted Values different than numbers, needs to be wrapped up in double quotes as a String.
Set the widgets
properties inside the widgets
key. Go to the Widgets section to know what properties can be modified for Widgets.
This will set the same Custom Style for all the widgets in the dashboard, thus, overriding their individual settings
Modifying the Custom Style globally will only have effect on the Widgets whose default Custom style hasn't been modified.
backgroundColor
propertyThe following shows how to set background color to "black" for a Dashboard in different ways:
Named colors:
Hex colors:
RGB:
RGBA:
HSL:
HSLA:
The following is the Dashboard before applying the Custom Style:
Below is the Dashboard after applying the Custom Style:
color
property from Dashboards to all the Widgets in it Lets take a Dashboard containing Widgets with no Custom Style set yet:
Go to the dashboard Custom Style editor and do the following:
Delete the color
property inside the Widget
key in the Style Editor at the Dashboard level:
Set the Dashboard's color
property to red and save the changes:
If you take a look at the Widgets inside the Dashboard, nothing seems to have changed. That is because each widget's individual settings are overriding the color
property. With that in mind, remove the color
property from the Widget that you want to inherit this property from the Dashboard.
Note that, once the color
property of the widget is deleted, it will inherit that property from the Dashboard.
The following is the default Custom Style for every ContextBar:
Open the Dashboard Custom Style settings and set the following style for the ContextBar in the Style Editor. This will change the ContextBar background and font color to white and change the font size:
The following is the result:
By Modifying the elements inside the "widget" key in the Dashboard's Style Editor, you'll be able to apply said style to all the widgets simultaneously on the Dashboard.
Consider the following Dashboard with no Custom Style set yet:
Suppose that you want to apply the following style for all the widget in the current dashboard at once:
Set the header font color to white
Set header border color to black
Set the header border style to Dotted
Set the header border width to 1
Set the header border radius to 10
Set the header background color to black
Set the font size to 30
Set box-shadow to 10px 5px 5px orange
Set the border border color to #5e5e5e
Set the border style to solid
Set border width to 5
Set border radius to 10
Set background color to black.
The following is the JSON describing such Custom Style:
In order to apply this Style for all the Widget at once, go to the Dashboard's Style Editor and paste said style in the "widget" key. It will look something like:
Doing so will result in the following:
Note that all the Widgets in the current Dashboard got the same Custom Style.
Property | Accepted values | Behavior |
---|---|---|
Property | Accepted values | Behavior |
---|---|---|
color