Introduction

Widgets are JavaScript components that render visual content inside a HTML element. They are all built on top of the Widget Base, which provides the common functionality for widgets. On this page, we describe how to create your own widgets to expand the functionality of your dashboards.

You can drag widgets onto your dashboard from the Widget Library in the dashboard editor. The sources for the widgets are loaded dynamically, on-demand. The widget's size and position are controlled by the dashboard's layout. A dashboard can contain many widgets, and multiple instances of the same widget. Each of these instances has its own individual configuration, modifiable by the user, that is saved in the dashboard.

Widgets can interact with other widgets through an API.

Concepts

Components

In the ABB Ability™ History client, components are serializable objects that contain properties. Widgets themselves are a type of component.

A component class can be added to the component registry with the method Components.Add. The Add method has two mandatory parameters:

• First, the class implementing the component
• Second, a string value containing a unique name for the component.

When a dashboard is loaded, each widget and component on it is instantiated using the information in the component registry.

Properties

A component can contain properties. Properties have values, as well as attributes such as Name and Type. In addition to values of common native types such as string and boolean, properties can also contain other components, references to widgets, arrays or dictionary objects. Properties' values can be serialized and stored along with the dashboard configuration.

Tutorials

We have prepared separate tutorials for developing and configuring widgets and data within.

The tutorials may be found under Developing Widgets tutorials.