Widget Structure

A widget is made up of these files:

Let’s say you want to create a widget my-widget. You should 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 any additional files. You can split the widget into a number of files.

The widget directory structure will look as follows:

• Development package (only for development)

  with source code not bundled

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

• Output package (zipped can be installed in Cloudify Management Console application)

  with source code bundled to single file and backend code copied to main folder

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

In the output package (created archive after building), src directory and its content don’t have to be included.

my-widget/widget.js is a single JS bundle file created from my-widget/src/widget.js and contains all the code imported by my-widget/widget.js.

For real examples of widgets, see cloudify-stage/widgets.

For details about files content check Widget Definition page.