Widget

Learn the specifics of developing a widget plugin.

Create the file structure

Set up a directory structure with the following files:

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

widget.html, widget.css, and widget.js scripts

Fill these files with the content you need according to the table below, then save them.

File	Purpose
widget.html	Define the widget's component layout
widget.css	Define the widget's component styles
widget.js	Define the widget's logic and dynamically modify its styles.

Widgets execute in the user's web browser as client-side applications. Runtime selection only applies to the server-side scripts control, function, and user_code.

view.xml

At the moment, this file is not fully implemented for widget plugins, so it is not relevant to this plugin type. However, it must contain dummy but valid data so the plugin can be deployed. For this reason, you can use the following view.xml file as a dummy file during widget plugin development:

<form name="formName">
    <group name="ubidotsInformation">
        <group name="fieldToken">
            <label name="labelToken">Ubidots Token</label>
            <token name="token" placeholder="Select Token"/>
        </group>
    </group>
</form>

view_widget.xml

Fill this file with the content you want to display when the user creates the widget in the dashboard.

LICENSE and README.md

Write the contents of the README.md and LICENSE files.

manifest.toml

Fill this file according to the Widget section of the Private Plugins page. manifest.toml should look like this:

manifest_version = 2.0

[settings]
version = "1.1.1"
plugin_type = "widget_webhook"
license_name = "MIT license"
runtime = "python:3.11"
infrastructure = "aws"

[settings.webhook]
default_http_method = "POST"
allowed_http_methods =  ["POST"]

[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

Compressing the files

Compress the files into a ZIP archive from the root of the file structure, not the parent folder.