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 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:
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.
For detailed information about the supported form elements, refer to the view_widget.xml section in the Plugins development page.
LICENSE and README.md files
Refer to the Private Plugins page for detailed information:
Private pluginsManifest.toml
Aside from the previously mentioned manifest components common to all plugin types, the following are specific to widget plugins:
[settings.widget]
name
Any string
Name that the widget will display in the plugins drawer
[settings.widget]
js_thirdparty_libraries*
A list of valid CDN URLs
List of libraries that the widget will import to use in its logic
[settings.widget]
css_thirdparty_libraries*
A list of valid CDN URLs
List of libraries that the widget will import to use in its styling
[settings.widget]
enable_lazy_load
true or false
Enables or disables lazy loading for the widget's visual components
With this in mind, a typical widget plugin manifest.toml file looks like this:
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:
Last updated
Was this helpful?