[{"data":1,"prerenderedAt":208},["ShallowReactive",2],{"blog-\u002Fblog\u002F2023\u002F10\u002Fdashboard-integrations":3},{"id":4,"title":5,"body":6,"description":12,"extension":197,"meta":198,"navigation":203,"path":204,"seo":205,"stem":206,"__hash__":207},"blog\u002Fblog\u002F2023\u002F10\u002Fdashboard-integrations.md","Integrate your own widgets with Dashboard 2.0",{"type":7,"value":8,"toc":189},"minimark",[9,13,25,28,36,42,56,59,115,121,125,128,152,156,165,173],[10,11,12],"p",{},"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.",[10,14,15,16,20,21,24],{},"Dashboard 1.0 had a hugely popular ecosystem of third party widgets (e.g. ",[17,18,19],"code",{},"ui-worldmap",", ",[17,22,23],{},"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.",[10,26,27],{},"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.",[29,30,32,33],"h2",{"id":31},"building-from-ui-template","Building from ",[17,34,35],{},"ui-template",[10,37,38,39,41],{},"As with Dashboard 1.0, we've utilised the flexibility of our ",[17,40,35],{}," node here to enable third-party integrations.",[10,43,44,45,47,48,52,53,55],{},"If you're used the new ",[17,46,35],{}," 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 ",[49,50,51],"em",{},"a lot"," of new functionality to the guts of ",[17,54,35],{},", which we can then extend with our third-party widgets.",[10,57,58],{},"This new functionality includes:",[60,61,62,74,84,93,99,109],"ul",{},[63,64,65,69,70,73],"li",{},[66,67,68],"strong",{},"Custom Dependencies"," - Injection of external widget dependencies (e.g. other JavaScript libraries) via ",[17,71,72],{},"\u003Chead>",".",[63,75,76,79,80,83],{},[66,77,78],{},"On Input"," - ",[17,81,82],{},"onInput"," defines behaviour of the widget in Dashboard when it receives a message in Node-RED.",[63,85,86,79,89,92],{},[66,87,88],{},"On Load",[17,90,91],{},"onMounted"," defines functionality when a widget first loads in Dashboard.",[63,94,95,98],{},[66,96,97],{},"Custom Functions"," - Define general functions that can be called from within your widget at any point of your choosing",[63,100,101,104,105,108],{},[66,102,103],{},"Extend Built-In Events"," - Our built in ",[17,106,107],{},"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.",[63,110,111,114],{},[66,112,113],{},"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.",[10,116,117,118,120],{},"We also have plans to expose more of this new functionality to the ",[17,119,35],{}," interface itself within Node-RED, but for now it's mostly available when developing third-party widgets.",[29,122,124],{"id":123},"useful-resources","Useful Resources",[10,126,127],{},"If you're interested in building integrations, then we've also built a couple of resources to help you get started:",[60,129,130,140],{},[63,131,132,139],{},[133,134,138],"a",{"href":135,"rel":136},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002Fwidgets\u002Fthird-party.html",[137],"nofollow","Widget Development Guide"," - A guide for how to structure your own widgets, and",[63,141,142,147,148,151],{},[133,143,146],{"href":144,"rel":145},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard-example-node",[137],"Example Integration (Repo)"," - We've open sourced a very simple ",[17,149,150],{},"ui-example"," node that demonstrates how you can build your own widget for Dashboard 2.0, that utilises all of the features highlighted above.",[29,153,155],{"id":154},"what-else-is-new-in-060","What else is new in 0.6.0?",[10,157,158,159,164],{},"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 ",[133,160,163],{"href":161,"rel":162},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.6.0",[137],"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.",[10,166,167,168,73],{},"As always, thanks for reading and your interested in Dashboard 2.0. If you have any feature requests, bugs\u002Fcomplaints or general feedback, please do reach out, and raise issues on our relevant ",[133,169,172],{"href":170,"rel":171},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[137],"GitHub repository",[60,174,175,182],{},[63,176,177],{},[133,178,181],{"href":179,"rel":180},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[137],"Dashboard 2.0 Activity Tracker",[63,183,184],{},[133,185,188],{"href":186,"rel":187},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[137],"Dashboard 2.0 Planning Board",{"title":190,"searchDepth":191,"depth":191,"links":192},"",2,[193,195,196],{"id":31,"depth":191,"text":194},"Building from ui-template",{"id":123,"depth":191,"text":124},{"id":154,"depth":191,"text":155},"md",{"navTitle":5,"excerpt":199},{"type":7,"value":200},[201],[10,202,12],{},true,"\u002Fblog\u002F2023\u002F10\u002Fdashboard-integrations",{"title":5,"description":12},"blog\u002F2023\u002F10\u002Fdashboard-integrations","ujuewioxUThqvSiMVQtbidb-1DMiIJ4quSloq0iPoT0",1780070551071]