When it comes to deploying an IoT application to end-users, a big portion of the user reception 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.

The advanced customization feature is a JSON-based editor where users can input element-defined keys to set parameters for the look and feel of each of the available elements. Here's an example of how it looks at the dashboard level:

IMPORTANT NOTES:
This feature will override any customization set at the App level.

Requirements

Table of Contents

  1. Custom style from Dashboards.
  2. Custom style from widgets.
  3. Custom style: HTML canvas widget.

1. Custom style from Dashboards

Following the below steps you'll be able to customize the appearance, to further extend, of the below dashboard and widget elements:

Dashboard: you'll be able to set the font and background color.
Context bar:
this is where the dashboard title, date time picker and device dropdown selector –if dynamic dashboard– are located. The available elements are fonts and background color, font size, box shadow, border radius, and then, independently, the dashboard title font size and weight.
Widgets: At this level, customizable elements are fonts and background color, font size and weight, box shadow, border radius, and then, independently, the widget header font and background color, font weight, box shadow and border radius.

Step 1: Open the Dashboard Drawer.
Step 2: Open the settings by clicking the sprocket option on the right side.
Step 3: Click on the "Custom Style" option, located in the Appearance section.
Step 4: Input the JSON-based file in the editor to indicate the desired customization.
Example: Note that every text different from a number needs to be wrapped up in double quotes as a string. 

{
    "widget": {
        "color": "#5e5e5e",
        "header": {
            "color": "#ffffff",
            "backgroundColor": "#202d4d",
            "borderRadius": 0
        },
        "fontSize": 14,
        "boxShadow": "3px 3px 5px 6px #cccccc",
        "fontWeight": "normal",
        "borderRadius": 7,
        "backgroundColor": "#ffffff"
    },
    "dashboard": {
        "color": "#5e5e5e",
        "backgroundColor": "#f2f2f2"
    },
    "contextBar": {
        "color": "#ffffff",
        "title": {
            "fontSize": 30,
            "fontWeight": "bold"
        },
        "fontSize": 14,
        "boxShadow": "3px 3px 5px 6px #ccc",
        "borderRadius": "0px 0px 7px 7px",
        "backgroundColor": "#192c54"
    }
}

Step 5: Click on the "Accept" button.
Step 6: Click the green check-mark button in the dashboard settings.

IMPORTANT NOTES:

  1. Applying a "Custom Style" will override any App level styling.
  2. Applying a "Custom Style" for widgets at the dashboard level will cause all widgets to change equally.
  3. To learn more about boxShadow and borderRadius please refer to the respective hyperlink.
  4. By default, the unit for the numerical key is "px". If other is to be used, it needs to be specified.
    Examples: "fontSize": "1.5rem" – "fontSize": "1.5em" – "fontSize": "70%"

2. Custom style from Widgets

Similarly to the customization at the Dashboard level, widgets also allow individual look and feel options and just as in that case, applying a styling to a widget will not only override the settings given by the App's style but also any "Custom Style" set at the dashboard level.
Here the case is the same, the elements available to customize are font and background color, font size and weight, box shadow, border radius, and then, independently, the widget header font  and background color, font weight, box shadow and border radius.

Step 1: Open the widget settings by clicking the three top-right dots and then "Edit".
Step 2: Click on the "Custom Style" option, located in the Appearance section.
Step 3: Input the JSON-based file in the editor to indicate the desired customization.
Example:

{
    "color": "#5e5e5e",
    "header": {
        "color": "#ffffff",
        "backgroundColor": "#F47373",
        "borderRadius": 7,
        "fontWeight": "bold",
        "boxShadow": "3px 3px 5px 6px #cccccc"
    },
    "fontSize": 15,
    "boxShadow": "3px 3px 5px 6px #cccccc",
    "fontWeight": "bold",
    "borderRadius": 7,
    "backgroundColor": "#ffffff"
}

Step 4: Click on the "Accept" button.
Step 5: Click the green check-mark button in the dashboard settings.

3. Custom style: HTML canvas widget

The HTML canvas widget allows users to create their own widgets in order to fit visualization needs that are not necessarily available within Ubidots default widget palette.
In this section, you'll learn to change this widget's header styling in a dynamic fashion right from the JavaScript code. 

Step 1: Create a HTML canvas widget.
Step 2: Open the HTML editor.
Step 3: Paste the below code in the corresponding tab
HTML

<button id="color">Click here to change header styling</button>

JavaScript

const button = document.querySelector("#color");
button.addEventListener("click", () => {
    const event = new CustomEvent("widget_changeHeaderColor", {
        detail:{
            "backgroundColor": "#00bcd4",
            "borderRadius": 7,
            "color": "#ffffff",
            "boxShadow": "3px 3px 5px 6px #cccccc",
            "fontWeight": "bold"
        }
    });
    document.dispatchEvent(event);
});

Step 4: Click on the green check-mark button
Step 5: Click the green check-mark button in the dashboard settings.

Other users also found helpful...

Application Branding: how to customize your Ubidots user interface

Application Branding: How Do I Change my App Domain?

Application Branding: how to white-label emails coming from your application



Did this answer your question?