Custom Widget
Custom Widgets are very versatile, allowing you to build whatever you need to suit your application’s needs.
The widget can be built with plain web technologies like HTML, CSS, and JavaScript, but keep in mind that at least some JavaScript is needed in form of our library.
You can go further by developing your custom widget with client-side web frameworks (e.g. React, Vue, Angular), as long as the framework outputs HTML, CSS, and JavaScript in its build process.
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.
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 from 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.
Tip: You can use our Files to host your custom Widget.
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.
Read more about Custom Widget Parameters.
User Control
You may choose to run an Analysis once you send data from your widget. To do so, inform the desired Analysis in the Run analysis when sending data field.
Check out our Module 202 in the Learning Center. It guides you in crafting custom widgets with ease. Access Learning Center now.
Related Articles
ECharts Custom Widget Tutorial
In this tutorial, we will guide you through the process of creating a Ring Gauge custom widget, which enables you to display multiple variables simultaneously in a interesting format. To achieve this, we will leverage the ECharts library, a robust ...Custom Widget 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. Each parameter ...Widget Cache system
The caching system optimizes the performance of your dashboards by storing widget data and any computations performed using Data Analytics. This allows future requests to be served faster by utilizing results from earlier requests, thereby speeding ...Widget Header
The widget header enables you to add customized buttons in the header of your widget in order to improve the flow of your dashboard. The widget header is enabled for all widgets. You can configure it by selecting the Header tab in your widget ...Pie Widget
Using data from multiples variables, the Pie widget automatically produces a Pie Chart, where each slice represents variable data. This widget also accepts features like metadata, that can be set in your variable data. Creating your own To add it to ...