Skip to main content

Custom Widget Overview

Custom Widgets are flexible components that let you build any interface or visualization needed for your application. They can be created with plain web technologies (HTML, CSS, and JavaScript) or with client-side frameworks, provided the final build outputs HTML, CSS, and JavaScript.

The widget must include at least some JavaScript functionality provided via our library (our library).

Supported technologies​

  • HTML, CSS, JavaScript (minimum requirement: include JavaScript from our library)
  • Client-side frameworks (e.g., React, Vue, Angular) are supported as long as the framework outputs HTML, CSS, and JavaScript in the build process

Examples​

Below are example outputs from Custom Widgets (charts and a map) to illustrate what you can build:

Hexbin chart example

Polar / flower chart example

Map with markers and popups example

Custom widget example 5

Custom widget example 6

Notes​

  • Ensure your widget bundle includes any required JavaScript and CSS files so the widget works when embedded.
  • If you use a framework, configure the build process to produce static HTML/CSS/JS assets that the TagoIO widget loader can consume.

Creating your own​

The sky's the limit when using this widget. You can build your widget using Angular, React, Vue.js, or even plain old JavaScript. To understand how to write the code for your Custom Widget, click here.

To create one from a written description, see Building Custom Widgets with TagoAI. For a supervisory screen with operator commands and alarms, see Building SCADA-style HMIs with Custom Widgets.

Data Sources​

Due to their versatility, Custom Widgets allow you to use data from different sources in TagoIO.

You can use data stored in your device's variables by configuring your devices and the variables in the Data Sources section of the widget's configuration.

You can also use data from resources such as devices and users, just like on the Device List and User List widgets, by configuring the tag filters in the Device Filters and/or User Filters sections of the widget's configuration. It's possible to build your custom logic by mixing data from different data sources, such as getting data from variables and combining them with Devices/User.

Main Configuration​

After you've coded your Custom Widget, you need to host it and provide a link to the location where you've hosted it. You can also select Upload source in the URL and parameters section to upload a single .tsx, .jsx, or .html file. The platform bundles React sources when you save the widget.

tip

You can use our TagoIO Files to host your custom Widget.

Hosting example

Parameters​

Parameters allow you to send a list of keys and values to your Custom widget.

One use of these parameters is to change the way your code behaves. You can have two widgets pointing to the same link, but exhibiting different behaviors.

Parameter example

Read more about Custom Widget Parameter.

Options​

You may choose to run an Analysis once you send data from your widget. To do so, select the desired Analysis in the Run analysis when sending data field of the Options section.

Options section with the Run analysis when sending data field