Widgets

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

  1. Set Custom Style for the Widget.

  • Any Accepted Values different than numbers, needs to be wrapped up in double quotes as a String.

  • Setting any of these properties will override the value inherited from the Dashboard

  • Setting any of these properties will render it unable to modify its Custom Style at the Dashboard level

Examples.

Example 1: Set a Widget's header Custom Style

Let's give a metric widget a Custom Style that modifies the following:

  • Rounded corners with a border radius of 10

  • Outset border style

  • A blue-ish background color

  • Font color as white

  • Border width to 1

The following is the JSON for such Custom Style:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72",
        "borderStyle": "dotted"
    },
    "fontSize": 14,
    "borderRadius": 15,
    "backgroundColor": "#000000"
}

In order to apply the dotted border to the whole widget, you can change the line "borderStyle": "dotted" from the "header" section and put it in the root, however, it is mandatory to the borderWidth property in order for it to be displayed correctly:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72"
    },
    "fontSize": 14,
    "borderColor": "white",
    "borderStyle": "dotted",
    "borderRadius": 15,
    "borderWidth": 5,
    "backgroundColor": "#000000"
}

This is the Widget with no Custom Style applied yet:

The following is the same Widget after applying the Custom Style above:

Example 2: Set a Widget's Body Custom Style

Let's modify the Widget's body for the metric widget above. The following properties will be set:

  • Black font color

  • Font size to 20

  • Border radius to 10

  • Background color to #38b01e

  • Box shadow to 60px -16px teal

The following is the JSON representing the custom style above:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "backgroundColor": "#10435b"
    },
    "fontSize": 20,
    "borderRadius": 10,
    "backgroundColor": "#38b01e",
    "boxShadow": "30px -8px teal"
}

After applying the Custom Style above the Widget will look like:

Example 3: Using linear gradient background

Let's take again the previous metric Widget for this example. In this case, instead of setting a flat green background color, a linear gradient will be used.

Set the background property to linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c) as shown below:

The following is the resulting Widget:

The background property can also be used in the Widget's Header as shown below:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "background": "linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%)"
    },
    "fontSize": 20,
    "borderRadius": 20,
    "background": "linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)",
    "boxShadow": "30px -8px teal"
}

Last updated