Custom widgets

A custom widget is a type of screen object that displays an external, HTML5-compliant webpage within a frame in a project screen. The widget can do anything that the webpage could normally do when viewed in a browser. Custom widgets are always rendered on top of any objects on the screen.

Custom widgets are a platform-agnostic alternative to ActiveX and .NET controls, which are supported only on Microsoft Windows. In fact, each widget is essentially a small, embedded browser window that loads a specified webpage. Also in contrast to ActiveX and .NET controls, these webpages do not need to be compiled, installed, or registered on a computer before they can be used. They are included with the rest of the project files when you download your project to a target device.

Note: In the Viewer, custom widgets are displayed with Microsoft WebView2. The Microsoft WebView2 Runtime must be present on the computer (most computers already have it). Widgets that you create with the standard files (index.html, custom_widget.js and proxy.js) require no changes. Refer to the Microsoft WebView2 Runtime section in Install the full software for details.

You can create a library of custom widgets for your project, and then you can reuse those widgets as many times as you want in any of your project screens. Each instance of a widget is a discrete screen object with its own object properties.

When you create a new widget (or edit an existing widget), you can define properties and events for that widget:

• Properties are used to exchange data between the webpage and the rest of your project. They are similar to memory registers in a PLC: you can associate them with project tags, and then you can read/write them when their values change.

• Events are used to trigger actions in your project. Depending on how it is designed and used, the webpage can send events through the widget to your project, and then those events cause scripts to be executed in your project.

All instances of a custom widget have the same basic properties and events, because those instances are simply copies of the master in the library, but you can configure the object properties of each instance in order to associate different tags and attach different scripts.

As for the webpage itself, you can develop it to do anything you want using HTML5, CSS, and JavaScript. Studio will automatically create the web files in your project folder, when you create the new widget and add it to your project's library, but after that you can freely edit the the files.

Note: If you will use Microsoft Edge to browse web thin client projects that include custom widgets, change the Microsoft Edge security settings as described in Configure Microsoft Edge to view custom widgets.