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.

Back to Blog Posts
Image representing null

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-worldmap, 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 ui-template

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:

  • Custom Dependencies - Injection of external widget dependencies (e.g. other JavaScript libraries) via <head>.
  • On Input - onInput defines behaviour of the widget in Dashboard when it receives a message in Node-RED.
  • On Load - onMounted defines 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 send function 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-example node 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.

Written By:

Head of UX & Design

Published on:

Related Articles:

Sign up for updates