Widgets

A Widget is a special "sub-application" with a graphical user interface (GUI) defined by a number of widget components and their layout. Widgets are good for building custom data entry forms, charts and trends, dynamic maps and Human-Machine Interfaces (HMI). These forms and interfaces may be used to control, configure and monitor different hardware devices or system components.

Widgets may be grouped into a dashboard to act as a custom operator interface.

Widgets were designed to operate in the deprecated desktop software, Iotellect Client. There are several ways to operate widgets in a web browser (such as web widget player), but in recent versions of Iotellect web dashboards are fully substituting and even exceeding widgets by their functionality.

Please start building your UI using widgets only if you're purposely targeting desktop UI.

Widget components are tied to server and device data using data bindings. Bindings may also link components together and define different expression-based data conversion patterns. Bindings may be activated:

  • During widget startup

  • Upon server-side event or state change, e.g. when new device data arrives

  • Upon widget component event or state change, e.g. button click

  • Periodically

Scripts written in Java may be inserted into a widget if some data processing task cannot be performed using expressions.

Widgets may include many different components:

  • Text and Password Fields

  • Text and HTML Areas

  • Buttons and Toggle Buttons

  • Combo Boxes

  • Lists

  • Check Boxes and Radio Buttons

  • Sliders and Spinners

  • Date and Time Pickers

  • Progress Bars

  • Tables

  • Raster Images

  • Dynamic Vector Drawings

  • Charts

  • Dynamic Maps (roadmap/terrain/satellite)

  • Event Logs

  • System Trees

  • Gauges, Meters and LED Displays

  • Video Players

  • Topology Graphs

These components may be grouped in various containers:

  • Panels

  • Tabbed Panels

  • Split Panels

  • Layered Panels

  • Subwidgets

  • Popup Menus

Containers support two layouts:

  • Grid layout that auto-aligns components according to their size. It is especially good for building forms.

  • Absolute layout with strictly defined component positions and sizes. This layout is useful for building HMI-style custom screens, maps, plans, etc.

Containers with different layouts may be combined within one widget to build complex interfaces.

Widget UI components have thousands of editable properties. Some of them are shared between several component types, other are component-specific. Common properties include visibility, sizes, borders, fonts, colors, strokes, cursors, tooltips, focus properties, and more.

Before you begin: Widgets let you manipulate and view Iotellect data in various forms. To be effective in creating them, you should be familiar with References, Expressions and finally, Data Bindings. Please read these three topic before continuing.

Once you understand these topics, you can read all about the specific ways in which bindings apply to widgets in Widget Bindings.

Widgets are created in Widget editor, which is a part of Iotellect Client. The core of a widget is its template -- text in XML format, containing the layout and properties of its internal components along with relations between these components and the data model, i.e. data that comes from Iotellect Server contexts. These relations exist in the form of Widget Bindings and Widget Scripts.

Every widget may be launched in different Iotellect Server User Interfaces, e.g. in Iotellect Client. Its appearance will depend on the specific User Interface in which it runs, but its overall structure and behaviour will be similar.

Here is what a running widget may look like in Iotellect Client:

Related tutorials:

Administering Widgets

Two contexts are used to administer widgets: One is the general Widgets context, which serves as a container. The other is the Widget context, which holds the information for one widget.

Widget Global Settings

The below settings are available in Widgets plugin global settings:

  • Widgets Execution Mode. Defines how widgets are executed in Web UI: on the server (suitable for browsers with no Java support, creates additional server performance overhead) or in browsers (suitable for Java-enabled browsers).

  • Prohibit Server-side Script Execution. If enabled, widgets running on the server cannot use scripts. This is important if your widget designers are not trusted, since scripts in server-side widgets have full access to server data and full control over server behavior.

Built-in Widgets

Several widgets are built into Iotellect Server and appear under default administrator's user account:

  • Query Executor. This widget allows you to test and debug queries.

  • Daily Alerts. Contains a bar diagram displaying daily alert count and a table that lists alert instances once a certain bar is clicked on a diagram.

Was this page helpful?