New online demos available.  

Widgets Reference

A widget is small UI element which can be inserted into a left, main or bottom panel (or in a special Group widget). This section describes supported widgets, what settings they have and how to work with them.

Anatomy of widgets

Each widget consists of the following elements:

  1. A widget header or a title
  2. A hint explaining what the user is supposed to do with it or a prompt.
  3. An additional description which appears as a tooltip or a description.
  4. A widget body.

Widget anatomy

In JSON structure, each widget contains the following properties:

  • name - a unique widget name (in a scope of one config) which you use to refer this widget in expressions.
  • type - a widget type
  • params - widget settings which configure its behavior. See documentation for each widget for more details.

The following properties are optional. They have the same meaning as depicted on a figure above.

  • title
  • prompt
  • description

JSON example

A widget looks like this:

{
    "name": "stub",
    "title": "Hello world", 
    "prompt": "This is a concept that I had in mind for a long time and I am happy to share it.", 
    "description": "This is a concept that I had in mind for a long time and I am happy to share it.",
    "type": "static-text",
    "params": {
        "text": "Hello world"
     }
}

How to refer widgets inside config

In the dynamic expressions, you may refer widgets using the $. Note, it does not have anything to do with jQuery, it is just a shortcode. Alternatively, you may use such aliases as wig and widget.

Many widgets has some elements you may select. To refer a selected element of such a widget, you may use a selected property or its shorter version _.

For example, to get a title of a selected item of a widget called list, use the following expression:

$['list']._.title