Widget

Create the file structure

Create the directory containing all the required files:

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

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

Fill those files with the content that you require and according to the table below, then save them.

FilePurpose

widget.html

Define the Widget's components layout

widget.css

Define the Widget's components style

widget.js

Define the Widget's logic as well as dynamically modification of the Widget's style.

Populate view.xml file

For the moment given, this file is not fully implemented for Widget plugin, so it is not relevant at all for this plugin type, however it should contain dummy, albeit valid data so the plugin can be deployed, for this reason, you can use this view.xml file on your Widget plugin development as dummy file:

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

Populate view_widget.xml file

Fill this file with the contents that you require to be displayed when the user is creating the widget in the dashboard.

Populate the LICENSE and README.md files

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

Creating the manifest.toml file

Fill the contents of this file. According to the widget section within the Private Plugins page, the manifest.toml should look like:

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

Compressing the files

Compress the files in zip format from the root of the file structure, not the parent folder.

Last updated