Custom style

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

Introduction

When deploying an IoT application to end users, a large part of user perception and adoption depends on its look and feel. If the interface is visually appealing, it can improve perception and make onboarding easier.

For that reason, in addition to Ubidots' basic customization options at the App branding level, there is an advanced editor for Dashboards and Widgets that provides more ways to customize their appearance.

Definition

Custom Style is an editor available for all Dashboards and Widgets that lets you modify their style.

The editor expects a JSON object with root-level keys for each component (Widget, Dashboard, and ContextBar). Inside each key, define the properties you want 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?

Use Custom Styles whenever you need to customize a Widget or Dashboard beyond the default style.

Which elements can be customized?

• Dashboards, along with their ContextBar

• All the Widgets in a dashboard at once

• Widgets, individually

How to set Custom Style on Dashboards?

Custom Style is available in the Dashboard Appearance tab, as shown below. When you click it, a text editor appears where you can enter valid JSON to create a custom style.

The Dashboard custom style overrides 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, place the JSON for the Custom Style you want to apply to all Widgets inside the widget key.

This overrides 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. When you click it, a text editor appears where you can enter valid JSON to create a custom style.

• The current Custom Style only applies to this Widget.

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