Dashboards

The following is the Dashboard's Custom Style editor. From here, you can:

1. Set Custom Styles for the Dashboard.

2. Set Custom Styles for the ContextBar.

3. Set Custom Styles for all of the Widgets in the current Dashboard, at once.

1. Dashboard customization

Set the dashboard properties inside the dashboard key

Available properties:

Property	Accepted values	Behavior
color	Named colors. Hex colors. RGB, RGBa HSL, HSLa	Sets the color of text and text decorations.
backgroundColor	Any color	Applies solid colors as background on an element.

• 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 ContextBarand Widget components in a Dashboard inherit thecolor property from it.

2. ContextBar customization:

Set the contextBar properties inside the contextBar key

Available properties:

Property	Accepted values	Behavior
title	A JSON containing the following properties: fontSize fontFamily fontWeight	Specifies the properties of the selected title.
fontSize	Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Length units: mm, cm, in, pt, pc, em, rem, px. Percentages.	Specifies the size, or height, of the font
boxShadow	Horizontal offset (required): positive or negative number Vertical offset (required): positive or negative number Blur radius (required): positive number Spread radius (optional): positive or negative number Color (required): named colors, hex, RGB, RGBA, HSL and HSLA.	Puts shadows on elements
borderRadius	Numeric value.	Gives any element “rounded corners”
fontFamily	Family name. Generic family name.	Defines the font that is applied to the selected element
backgroundColor	Any color	Applies solid colors as background on an element.
color	Named colors. Hex colors. RGB and RGBa colors. HSL and HSLa colors.	Sets the color of text and text decorations.

• 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.

3. Widgets customization

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.

Dashboard Custom Style Examples

Example 1: Set the backgroundColor property

The following shows how to set background color to "black" for a Dashboard in different ways:

• Named colors:

  {
      "dashboard":{
          "backgroundColor" : "black",
          "color": "#f2f2f2",
      },
  }

• Hex colors:

  {
      "dashboard":{
          "backgroundColor" : "#000000",
          "color": "#f2f2f2",
      },
  }

• RGB:

  {
      "dashboard":{
          "backgroundColor" : "rgb(0,0,0)",
          "color": "#f2f2f2",
      },
  }

• RGBA:

  {
      "dashboard":{
          "backgroundColor" : "rgba(0,0,0,1)",
          "color": "#f2f2f2",
      },
  }

• HSL:

  {
      "dashboard":{
          "backgroundColor" : "hsl(0, 0%, 0%)",
          "color": "#f2f2f2",
      },
  }
  

• HSLA:

  {
      "dashboard":{
          "backgroundColor" : "hsl(0, 0%, 0%, 1)",
          "color": "#f2f2f2",
      },
  }
  

The following is the Dashboard before applying the Custom Style:

Below is the Dashboard after applying the Custom Style:

Example 2: Inherit the 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:

1. Delete the color property inside the Widget key in the Style Editor at the Dashboard level:

   
2. Set the Dashboard's color property to red and save the changes:

   
3. 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.

ContextBar Custom Styles examples

Example 1: Change ContextBar's tittle font and size, font size and color, and background color

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:

"contextBar": {
        "title": {
            "color": "#000000",
            "fontSize": 14
        },
        "fontSize": 24,
        "backgroundColor": "#ffffff",
        "color": "#000000",
    }

The following is the result:

Widgets Custom Styles examples

Example 1: Set a Custom Style for all the Widget in a Dashboard.

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:

"header": {
    "color": "#FFFFFF",
    "borderColor": "#000000",
    "borderStyle": "dotted",
    "borderWidth": 1,
    "borderRadius": 10,
    "backgroundColor": "#000000"
},
"fontSize": 30,
"boxShadow": "10px 5px 5px orange",
"borderColor": "#5e5e5e",
"borderStyle": "solid",
"borderWidth": 5,
"borderRadius": 10,
"backgroundColor": "#000000"

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:

{
    "widget": {
         "header": {
            "color": "#FFFFFF",
            "borderColor": "#000000",
            "borderStyle": "dotted",
            "borderWidth": 1,
            "borderRadius": 10,
            "backgroundColor": "#000000"
        },
        "fontSize": 30,
        "boxShadow": "10px 5px 5px orange",
        "borderColor": "#5e5e5e",
        "borderStyle": "solid",
        "borderWidth": 5,
        "borderRadius": 10,
        "backgroundColor": "#000000"
    },
    "dashboard": {
        "color": "#5e5e5e",
        "backgroundColor": "#f2f2f2"
    },
    "contextBar": {
        "color": "#000000",
        "title": {
            "color": "#000000",
            "fontSize": 14
        },
        "fontSize": 24,
        "backgroundColor": "#ffffff"
    }
}

Doing so will result in the following:

Note that all the Widgets in the current Dashboard got the same Custom Style.