Import HTML5 widgets

Widgets are small web components that can extend the functionality of a web page or website. Custom-built websites can also incorporate widgets, by using open-source code or frameworks to provide certain functionality in whole or in part. A widget is a self-contained code block that slots into a website without changing any of its features. Widgets are most frequently used to provide on-screen user interface elements that ingrate with other platforms and data sources. A widget can be run on any web page on a website, with consistent placement and user interface, for example, social media, weather, RSS or podcast widgets.

By default, the following widgets are available under the Widgets folder in the Visualization folder:

• Carousel

• Datagrid

• Map App

• QR Code Scanner

• Teamwork

• Web Browser

You can import a widget for a standalone and managed InTouch application, or for use in an AVEVA OMI ViewApp. The file format is Custom Widget Package (.cwp), which includes HTML5, CSS, and Javascript files.

Note: Widgets can also be imported and exported from a galaxy as objects. In this case, import/export the widget as an object (aaPKG file type).

Import HTML Widgets

1. From the ribbon, select Galaxy, then Import.

2. Select Visualization, then HTML5 Widget.

3. Browse to the correct folder, if necessary. Select a .cwp file.

4. Select Open.

   IMPORTANT! If your galaxy contains an older version of the widget you are importing:
   1. Delete the older version of the widget.
   2. Restart the IDE.
   3. Then, import the new widget.

The widget will appear in the Visualization folder.

After importing the widgets

5. Open a graphic or layout.

   • For graphics, embed the widget.

   • For layouts, navigate to the widget and drag it to a pane.

6. Set the widget properties as needed. To open object help for a widget, select the widget in the Visualization folder and press Ctrl + F1.

Insert the widget on a window

The widget can now be viewed on WindowViewer and any web browser. Depending on the properties set in the design time you can manipulate the widget in runtime. Scripts using Custom Properties under ‘Widget Properties’ to modify widgets are not supported.