☰

Widget Structure

A widget is made up of these files:

File Required Description
widget.js Yes Holds the widget definition
widget.png Yes The preview image of the widget in the widgets catalog
backend.js No A widget backend that allows widget frontend code to use backend services
widget.html No A widget template file that is relevant only when you write a widget in plain JavaScript with an HTML template
widget.css No The CSS file that the widget uses
README.md No A widget help ReadMe file in Markdown format

Let’s say you want to create a widget my-widget.

ReactJS

If you want to write your widget in ReactJS (recommended), you must put your widget.js file (and optionally backend.js file) into the src directory along with any other required files. In the widget.js file, you can use import to include the additional files. You can split the widget into a number of files. You can also use ES6 features.

In this method, the widget directory structure will look as follows:

/widgets   
   /my-widget   
      /src   
         widget.js
         backend.js   // Optional
      widget.js       // File generated by build system
      backend.js      // Optional. File generated by build system
      widget.html     // Optional
      widget.png
      widget.css      // Optional
      README.md       // Optional

Plain JavaScript

If you use Plain JavaScript the widget directory structure looks like this:

/widgets   
   /my-widget
      widget.js
      backend.js   // Optional
      widget.html  // Optional
      widget.png
      widget.css   // Optional
      README.md    // Optional