Widget

Definition

A private widget plugin is a custom-developed widget that is available as if it were native to Ubidots. Like any other widget, it provides both execution logic and a graphical interface for user interaction.

Its visual rendering and logic execution happen when the dashboard loads. They continue only while the dashboard that contains it remains open.

For example, consider the following widget that uses the JavaScript Highcharts library for data plotting:

When a user opens the dashboard that contains this widget, the browser renders its visuals, and the logic that fetches and plots the data runs during load.

When the user leaves the dashboard, all tasks within the widget logic stop.

Required files

As stated before, any private plugin, regardless of its type, and especially a private widget plugin, follows the file structure shown below:

├── src
│   ├── static                    
│   │   ├── widget.css      
│   │   ├── widget.html 
│   │   ├── widget.js             
│   ├── view.xml
│   ├── view_widget.xml
│   ├── control.py | control.js
│   ├── function.py | function.js
│   ├── user_code.py | user_code.js      
├── LICENSE
├── README.md
├── manifest.toml

src and static directory

Unlike Cron and Webhook plugins, a Widget plugin includes an additional directory called static. This directory contains the widget's HTML, CSS, and JavaScript files.

Placing the CSS, HTML, and JS files in the root of src, instead of inside static, causes deployment errors.

widget.css

Written in CSS, this file styles the widget's visual components.

widget.html

Written in HTML, this file defines the layout of the widget's visual elements.

widget.js

Written in JavaScript, this file handles the plugin's core logic and can also modify the CSS styles and HTML dynamically.

Naming convention

You must keep the names of all files and directories listed in the "Required files" section, since the plugins engine specifically looks for these files and their extensions.

If you change the name of a file or directory, the plugin cannot be deployed.

view.xml

Although this file is only relevant to Cron and Webhook plugins, it must still contain valid placeholder data for the plugin to deploy.

view_widget.xml

The form that displays the widget's required parameters is created with view_widget.xml, not view.xml.

For example, suppose you are creating a widget that uses Highcharts to plot data. In that case, the widget requires the following information from the user:

• Variable label

• Title

• Subtitle

• X axis label

• Y axis label

• Series name

A form that contains those fields might look like this:

The form above can be built with view_widget.xml as follows:

<form>
    <inputcombo
        id="variable_label"
        type="text"
        label="Variable label"
        description="Device's variable label to use for the data"
        placeholder=""
        value=""
    />
    <inputcombo
        id="title"
        type="text"
        label="Chart's title"
        description="Chart's title"
        placeholder=""
        value=""
    />
    <inputcombo
        id="subtitle"
        type="text"
        label="Chart's subtitle"
        description="Chart's subtitle"
        placeholder=""
        value=""
    />
    <inputcombo
        id="x_axis_name"
        type="text"
        label="X-axis name "
        description="X-axis subtitle"
        placeholder=""
        value=""
    />
    <inputcombo
        id="y_axis_name"
        type="text"
        label="Y-axis name "
        description="Y-axis subtitle"
        placeholder=""
        value=""
    />
    <inputcombo
        id="series_name"
        type="text"
        label="Series name"
        description="Name for the series"
        placeholder="series 1"
        value=""
    />
</form>

All of these parameters in the form are accessible to the widget.js script using the Ubidots JavaScript class.

For detailed information on how to access XML properties from within the widget.js script, refer to the corresponding section in the Plugins development page.

Widget

For detailed information about the supported form elements, refer to the view_widget.xml section in the Plugins development page.

view_widget.xml

LICENSE and README.md files

Refer to the Private Plugins page for detailed information:

Private plugins

Manifest.toml

Aside from the previously mentioned manifest components common to all plugin types, the following are specific to widget plugins:

Section/subsection	Key	Value	Description	Example
[settings.widget]	name	Any string	Name that the widget will display in the plugins drawer	name = "My first widget plugin"
[settings.widget]	js_thirdparty_libraries*	A list of valid CDN URLs	List of libraries that the widget will import to use in its logic	js_thirdparty_libraries = [ "https://code.jquery.com/jquery-3.6.0.min.js", "https://code.jquery.com/moment-3.6.0.min.js" ]
[settings.widget]	css_thirdparty_libraries*	A list of valid CDN URLs	List of libraries that the widget will import to use in its styling	css_thirdparty_libraries = [ "https://code.jquery.com/jquery-3.6.0.min.css", "https://code.jquery.com/moment-3.6.0.min.css" ]
[settings.widget]	enable_lazy_load	true or false	Enables or disables lazy loading for the widget's visual components	enable_lazy_load = true

With this in mind, a typical widget plugin manifest.toml file looks like this:

manifest_version = 2.0

[settings]
version = "1.1.1"
plugin_type = "widget"
license_name = "MIT license"

[settings.widget]
name = "Send data to device widget"  
js_thirdparty_libraries = [
  "https://code.jquery.com/jquery-3.6.0.min.js",
  "https://code.jquery.com/moment-3.6.0.min.js"
]
css_thirdparty_libraries = [
  "https://code.jquery.com/jquery-3.6.0.min.css",
  "https://code.jquery.com/moment-3.6.0.min.css"
]
enable_lazy_load = true

The keys marked with a * in the table are optional. You do not need to import JS or CSS libraries. However, you should still define the key as an empty list.

For example, if no JS or CSS libraries need to be imported, the manifest looks like this:

manifest_version = 2.0

[settings]
version = "1.1.1"
plugin_type = "widget"
license_name = "MIT license"

[settings.widget]
name = "Send data to device widget"  
js_thirdparty_libraries = [ ] # No JS libraries are imported
css_thirdparty_libraries = [ ] # No CSS libraries are imported
enable_lazy_load = true