Custom Style

Customize your App beyond the branding level with the Custom Style editor for Dashboards and Widgets

Introduction

When it comes to deploying an IoT application to end-users, a big portion of the user perception and adoption of the solution is related to the look and feel of whatever they're using, if it's catchy and nice to the eye, this undoubtedly helps changing the perspective and makes the on-boarding easier.

For that reason, besides Ubidots' basic customization options at the App branding level, there's an advanced editor for dashboards and widgets providing additional options to change their aspect even further.

Definition

Custom Style is an editor available for all Dashboards and Widgets which allows to modify their style.

The editor expects a JSON containing, on the root level, keys that represent each component (Widget, Dashboard, ContextBar) and, inside such keys, the values for the properties to modify.

The following is an example of the default Custom Style JSON for a recently created dashboard:

{
    "widget": {
        "color": "#5e5e5e",
        "header": {
            "color": "#5e5e5e",
            "borderColor": "inherit",
            "borderStyle": "none",
            "borderWidth": 0,
            "backgroundColor": "#ffffff"
        },
        "fontSize": 14,
        "borderColor": "inherit",
        "borderStyle": "none",
        "borderWidth": 0,
        "borderRadius": 0,
        "backgroundColor": "#ffffff"
    },
    "dashboard": {
        "color": "#5e5e5e",
        "backgroundColor": "#f2f2f2"
    },
    "contextBar": {
        "color": "#ffffff",
        "title": {
            "fontSize": 24
        },
        "fontSize": 14,
        "backgroundColor": "#192c54"
    }
}

When to use Custom Styles?

Whenever there is the need to customize a Widget or Dashboard beyond the default style

Which elements can be customized?

• Dashboards (along with its ContextBar)

• All the Widgets in a dashboard, at once

• Widgets, individually

How to set Custom Style on Dashboards?

Custom Style is available on the Dashboard Appearance tab as shown below. Upon clicking on it, a text editor will be displayed, in which the user can place a valid JSON to create a custom style.

Dashboards custom style will override any customization set at the app level

How to set Custom Style on all the Widgets in a dashboard, at once?

At the dashboard customization level, the JSON containing the desired Custom Style to apply on all widget can be placed inside the "widget" key.

This will override every Widget's individual Custom Style.

How to set Custom Style on Widgets individually?

On the Widget's Appearance tab there is an option labeled Custom Style. Upon clicking on it, a text editor will be displayed, in which the user can place a valid JSON to create a custom style.

• The current Custom Style will only be applied to this widget

• Setting a Widget Custom Style after setting it globally at the Dashboard level, will override the global settings.