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
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 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 ...Icons Widget
With icons, the user can create very personalized widgets for their applications, and the result can look like the ones shown below, but the possibilities are endless. Users can add up to 9 variables in this widget, and each variable will show its ...Display Widget
Display is a widget that displays the last value of a variable, regardless of the format of the value (string or number). You can pick the variables, and each one of them will have its own box as well as simultaneously having the values shown. This ...