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