Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
A private widget plugin is a custom-developed widget that is made available as if they were Ubidots native. As any other widget, it offers both, logic execution and a user graphical interface for interaction.
Its visuals displaying and logic execution are performed at the moment of loading the dashboard and will only take place as long as the dashboard containing it remains open.
For instance, consider the following widget using the JavaScript HighCharts library for data plotting:
When a user accesses the dashboard containing this widget, the browser renders its visuals, and the logic—fetching and plotting the data—runs during the dashboard's load time.
After leaving the dashboard containing the widget, all tasks within its logic will stop.
As stated before any Private plugin regardless of its type, and, particularly, a private widget plugin, is composed by the file structure shown below:
Unlike Cron and Webhook plugins, the Widget plugin includes an additional directory called static. This directory holds the widget's HTML, CSS and JavaScript files.
Placing the CSS, HTML and JS files within the root of src and not inside static will cause deployment errors.
Written in CSS, it styles the widget's visual components.
Written in HTML, this file dictates the arrangement of the widget's visual elements.
Written in JavaScript, this handles the plugin's core logic and potentially altering the CSS styles and HTML dynamically.
You ought to retain the names of all files and directories mentioned in the "required files" section, as the plugins engine specifically searches for these files and their extensions.
If the name of a file or directory is changed, the plugin won't be able to be deployed.
Though this file is only relevant when using Cron and Webhook type plugins, it still must contain valid placeholder data to deploy the plugin.
The form to display its required parameters is created using view_widget.xml, not the view.xml file.
For example, suppose that you are creating a widget that uses HighCharts to plot data, for that reason, the widget requires the following information from the user :
Variable label
Title
Subtitle
X axis label
Y axis label
Series name
A form containing those fields might look like this:
The form above can be built using the view_widget.xml as:
All of these parameters in the form are accessible to the widget.js script using the Ubidots JavaScript class.
Refer to Private Plugins page to get detailed information:
Aside from previously mentioned manifest components common to all plugin types, the following ones are specific to Widget type plugin:
[settings.widget]
name
Any string
This is the name that the Widget will display on the plugins drawer
[settings.widget]
js_thirdparty_libraries*
A list of valid CDN URL
This is the list of libraries that the widget will import to be used on its logic
[settings.widget]
css_thirdparty_libraries*
A list of valid CDN URL
This is the list of libraries that the widget will import to be used on its styling
[settings.widget]
enable_lazy_load
true or false
Enables or disables lazy load for the widget's visual components
With this in mind, a typical Widget plugin manifest file looks like:
The keys marked with a * in the table, are not mandatory to be set, that is, you are not complied to import either JS or CSS libraries, however, you should define the key as an empty list.
For instance, if no JS or CSS libraries want to be imported, the manifest will look like:
