Integrate your own widgets with Dashboard 2.0
With the 0.6.0 Release of Dashboard 2.0, we now support third-party widget integration. Read more in this deep dive.
With a new release, comes new features for Dashboard 2.0, and the focus of this release has been on improving the developer experience for those building third-party widgets for Dashboard 2.0.
Dashboard 1.0 had a hugely popular ecosystem of third party widgets (e.g.
ui-svg) and something we've been keen to support is a platform where these widgets (and more) can be built and used within Dashboard 2.0 too.
Whilst we can't support the existing Dashboard 1.0 extensions directly (given that we're now VueJS-based, rather than AngularJS), we hope that the framework, documentation and this article, will help springboard the community to build new (and transfer over old) widgets for Dashboard 2.0.
# Building from
As with Dashboard 1.0, we've utilised the flexibility of our
ui-template node here to enable third-party integrations.
If you're used the new
ui-template in Dashboard 2.0 already, you'll know that you can provide raw Vue (HTML) content and it'll render that into your Dashboard. In 0.6.0, we've added a lot of new functionality to the guts of
ui-template, which we can then extend with our third-party widgets.
This new functionality includes:
- On Input -
onInputdefines behaviour of the widget in Dashboard when it receives a message in Node-RED.
- On Load -
onMounteddefines functionality when a widget first loads in Dashboard.
- Custom Functions - Define general functions that can be called from within your widget at any point of your choosing
- Extend Built-In Events - Our built in
sendfunction can be called within your widget's template, and will send a message back to Node-RED, with any content of your choosing.
- Custom SocketIO Event Handlers - If you want to extend the communication between Dashboard and Node-RED, you can emit your own SocketIO events from Dashboard, and have respective handlers for those events in Node-RED.
We also have plans to expose more of this new functionality to the
ui-template interface itself within Node-RED, but for now it's mostly available when developing third-party widgets.
# Useful Resources
If you're interested in building integrations, then we've also built a couple of resources to help you get started:
- Widget Development Guide - A guide for how to structure your own widgets, and
- Example Integration (Repo) - We've open sourced a very simple
ui-examplenode that demonstrates how you can build your own widget for Dashboard 2.0, that utilises all of the features highlighted above.
# What else is new in 0.6.0?
Whilst we focussed this article on the third-party integrations, we did also squeeze quite a lot more into the 0.6.0 release too with plenty other fixes and improvements, including the separation of the Dash oard 2.0 nodes into a new "Dashboard 2" category in the Node-RED palette.
As always, thanks for reading and your interested in Dashboard 2.0. If you have any feature requests, bugs/complaints or general feedback, please do reach out, and raise issues on our relevant GitHub repository.
- Building a Custom Video Player in Dashboard 2.0
- Beyond Automation - AI Use Cases that are shaping the next manufacturing frontier
- Deploying the FlowFuse Device Agent via Balena
- Overhauling the Dashboard 2.0 Build Pipeline
- Integrate with ChatGPT Assistants with Node-RED