Dashboards

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

1. Set a Custom Style for the Dashboard.

2. Set a Custom Style for the ContextBar.

3. Set a Custom Style for all 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 overrides the settings defined by the App style.

• Any accepted value other than a number must be wrapped in double quotes as a string.

• The ContextBar and Widget components in a Dashboard inherit the color 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 overrides the value inherited from the Dashboard.

• Any accepted value other than a number must be wrapped 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 sets the same Custom Style for all widgets in the Dashboard, overriding their individual settings.

• Modifying the Custom Style globally only affects Widgets whose default Custom Style has not been modified.

Dashboard Custom Style Examples

Example 1: Set the backgroundColor property

The following examples show how to set the 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:

The following is the Dashboard after applying the Custom Style:

Example 2: Inherit the color property from the Dashboard to all Widgets in it

Let's 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 color property to red and save the changes:

   
3. If you look at the Widgets inside the Dashboard, nothing seems to have changed. This happens because each Widget's individual settings override the color property. With that in mind, remove the color property from the Widget that you want to inherit this property from the Dashboard.

   

Once the Widget color property is deleted, it inherits that property from the Dashboard.

ContextBar Custom Style examples

Example 1: Change the ContextBar title font, size, 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 changes the ContextBar background to white, changes the font color to black, and updates the font size:

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

The following is the result:

Widget Custom Style examples

Example 1: Set a Custom Style for all Widgets in a Dashboard

By modifying the elements inside the widget key in the Dashboard Style Editor, you can apply the same style to all widgets on the Dashboard.

Consider the following Dashboard with no Custom Style set yet:

Suppose you want to apply the following style to all widgets 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 the box shadow to 10px 5px 5px orange

• Set the border color to #5e5e5e

• Set the border style to solid

• Set the border width to 5

• Set the border radius to 10

• Set the background color to black.

The following JSON describes that 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"

To apply this style to all Widgets at once, go to the Dashboard Style Editor and paste it into the widget key. It will look like this:

{
    "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 results in the following:

All Widgets in the current Dashboard now share the same Custom Style.