Introduction to web widgets

The web widget is a self-contained code block that slots into a website without changing its features. It is a small web component that extends the functionality of a webpage or website. You can import a widget for a standalone or managed application. You can use different widgets through the AVEVA Work Tasks widget control. A widget control is a container that holds the actual widget and serves as the parent widget. This means that the same widget control container can host any web widget, which can be configured depending on how you want to use them. Each instance of a web widget needs its own widget control.

A widget has two parts: the actual widget within the widget control (or container) and the widget configuration file. The actual widget can have multiple configurations to pick from. For example, you can have a configuration file to set up your connection to a database lookup. Or, you can have a configuration file that contains sample data that you can use to test the widget.

Configuration file

A configuration file (<WidgetConfigName>_conf.js) is a Javascript file that can have cwidget functions that monitor the widget's input and output data processes. It can contain widget parameters that you can modify based on your project requirements. It can also have settings that include different widget properties and events. These settings can control its behavior and the way it is rendered when used in a form or container.

However, maintaining and monitoring the configuration file for the purpose of defining properties, events, and behavior requires a deeper understanding of HTML 5, especially if you have multiple configuration files that you need to link together. For this reason, we recommend that you refer to the provided configuration files, and either just use them to call the cwidget function or include sample data to test the widget in your application.

The widgets delivered with the MES model-driven application may include, but are not limited to, the following configuration files:

• <WidgetConfigName>_conf.js - This is the main configuration file that you can use during design time, which contains the standard function for a specific widget.

• <WidgetConfigName>_SampleData_conf.js - This is the configuration file that you can use if you want to test the widget using sample data.

The configuration files are displayed as options for the Configuration property under the Basic tab of the widget control's Properties window.

Important: If you would need to customize or update these configuration files, we recommend that you create your own version using the provided files as your template. Do not modify the actual configuration file. For detailed steps, see Create your own configuration file.

You can access these files together with the other widget files in their respective widget folders:

<Drive>\Program Files\AVEVA\Work Tasks\Web\BPMUITemplates\Default\NextGenForms\custom\Widgets

For a list of configuration files that comes with the widgets, see Configuration files delivered with the widgets.

Dynamic widget properties and wjson file

The widgets support dynamic properties and events. To support dynamic properties and events, a wjson file is used to define the properties and events. Defining properties and events in this file allows the application to pick them up and display them on the Advanced and Scripts tabs of the Properties page. In addition, it exposes them for scripting.

The available properties for each widget may vary depending on the widget. You can use the dynamic properties as a communication tool between the widget and other controls. For a list of properties that the widgets currently support, see the widgets' corresponding Properties section.

Example wjson file

The following example file is for the Split widget. The Properties page displays the names of the properties and events as they are defined in the <widgetname>.wjson file. The numbers that come with each listed property and event in this file correspond to the order in which they are displayed in the application interface. The property with the lowest number is shown on top of the form, arranged in ascending order.

Each widget has its own .wjson file. This file is in the same location as the other widget files in its specific widget folder.

Note: Modifying the wjson file is not recommended. We do not support modified versions of this file.

Known issue

Changes to the configuration file that affect the widget's visual representation are not immediately reflected in the widget when using Embedded as the widget type property on the Widget control's Properties page due to the cached configuration file. To resolve this issue, you need to explicitly refresh the page using SHIFT+CTRL+R.