[{"data":1,"prerenderedAt":561},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started":3},{"id":4,"title":5,"body":6,"description":12,"extension":546,"meta":547,"navigation":556,"path":557,"seo":558,"stem":559,"__hash__":560},"blog\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started.md","Getting Started with Node-RED Dashboard 2.0",{"type":7,"value":8,"toc":526},"minimark",[9,13,16,19,24,29,37,40,50,54,60,62,77,81,84,90,92,100,103,142,146,149,155,157,160,182,188,191,195,198,241,245,248,287,291,294,300,303,307,317,321,324,332,338,344,346,350,353,361,364,373,385,391,393,401,407,409,422,428,430,433,439,442,446,449,488,492,495,518],[10,11,12],"p",{},"With our latest release of Node-RED Dashboard 2.0, we've made some big improvements to the onboarding experience.",[10,14,15],{},"We're seeing over 2,000 people download Dashboard 2.0 per week, and are seeing a great buzz in the community of brand new Node-RED users, experienced Node-RED users that haven't explored a UI solution previously and existing users migrating from Dashboard 1.0.",[10,17,18],{},"So, with that in mind, we wanted to offer a new \"Getting Started\" guide that will help you get up and running with building custom user interfaces and data visualizations in Node-RED.",[20,21,23],"h2",{"id":22},"how-to-install-node-red-dashboard-20","How to Install Node-RED Dashboard 2.0",[25,26,28],"h3",{"id":27},"step-1-manage-palette","Step 1: \"Manage Palette\"",[10,30,31],{},[32,33],"img",{"alt":34,"dataZoomable":35,"src":36},"Screenshot to show where to find the \"Manage Palette\" option in Node-RED","","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-manage-palette.png",[38,39,34],"figcaption",{},[41,42,43,47],"ol",{},[44,45,46],"li",{},"Click the Node-RED Settings (top-right)",[44,48,49],{},"Click \"Manage Palette\"",[25,51,53],{"id":52},"step-2-search-install","Step 2: Search & \"Install\"",[10,55,56],{},[32,57],{"alt":58,"dataZoomable":35,"src":59},"Screenshot to show where to find the \"Install\" tab, and how to find @flowfuse\u002Fnode-red-dashboard","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-search-install.png",[38,61,58],{},[41,63,64,67,74],{},[44,65,66],{},"Switch to the \"Install\" tab",[44,68,69,70],{},"Search for ",[71,72,73],"em",{},"\"@flowfuse\u002Fnode-red-dashboard\"",[44,75,76],{},"Click \"Install\"",[20,78,80],{"id":79},"adding-your-first-widgets","Adding your first widgets",[10,82,83],{},"With the nodes installed, getting started is as easy as choosing a node from the Palette (the left-hand side list of nodes) in Node-RED, and dropping it onto your canvas.",[10,85,86],{},[32,87],{"alt":88,"dataZoomable":35,"src":89},"Screen recording to show how easy it is to deploy your first Dashboard 2.0 application.","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-add-widget.gif",[38,91,88],{},[10,93,94,95,99],{},"In this case, we drop in a ",[96,97,98],"code",{},"ui-button",", click \"Deploy\" and then can see the button running live in our user interface.",[10,101,102],{},"Notice too that Dashboard will automatically setup some underlying configurations for you (visible in the right-side menu):",[104,105,106,115,128,133],"ul",{},[44,107,108,111,112,114],{},[96,109,110],{},"ui-base",": Each instance of Node-RED that uses Dashboard 2.0 must have a single ",[96,113,110],{}," element (we're hoping to add support for multiple in the future). This element contains all of the global settings for your Dashboard instance.",[44,116,117,120,121,123,124,127],{},[96,118,119],{},"ui-page",": A single Dashboard (",[96,122,110],{},") can consist of multiple pages, and can be navigated to using the left-side sidebar. Each page is then responsible for displaying a collection of ",[96,125,126],{},"ui-group"," elements.",[44,129,130,132],{},[96,131,126],{},": Each group contains a collection of widgets, and can be used to organize your Dashboard into logical sections.",[44,134,135,138,139,141],{},[96,136,137],{},"ui-theme",": Each ",[96,140,119],{}," can be assigned a given theme. Your \"Themes\" provide control over the aesthetic of your Dashboard like color, padding and margins.",[20,143,145],{"id":144},"configuring-your-layout","Configuring your layout",[10,147,148],{},"Dashboard 2.0 adds a dedicated sidebar to Node-RED to provide a centralized view of your pages, groups and widgets. From here you can add new pages and groups, modify existing settings, and re-order content to your liking.",[10,150,151],{},[32,152],{"alt":153,"dataZoomable":35,"src":154},"Screenshot showing the Dashboard 2.0 sidebar in the Node-RED Editor.","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-sidebar.png",[38,156,153],{},[10,158,159],{},"When defining your layout options, we break the choice into two sections:",[104,161,162,173],{},[44,163,164,168,169,172],{},[165,166,167],"strong",{},"Page Layout:"," Controls how the ",[96,170,171],{},"ui-groups","'s are presented on a given page in your application.",[44,174,175,178,179,181],{},[165,176,177],{},"Navigation Sidebar:"," Defines the left-side navigation style, defined at the ",[96,180,110],{}," level.",[10,183,184],{},[32,185],{"alt":186,"dataZoomable":35,"src":187},"Example of a \"Grid\" page layout, with \"Collapsing\" sidebar navigation.","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-layout.png",[38,189,190],{},"Example of the \"Grid\" page layout, with \"Collapsing\" sidebar navigation.",[25,192,194],{"id":193},"page-layout","Page Layout",[10,196,197],{},"Currently, we have three different options for page layout:",[104,199,200,217,231],{},[44,201,202,205,206,213,214,216],{},[165,203,204],{},"Grid:"," (",[207,208,212],"a",{"href":209,"rel":210},"https:\u002F\u002Fdashboard.flowfuse.com\u002Flayouts\u002Ftypes\u002Fgrid.html",[211],"nofollow","docs",") This is the default layout for a page, and uses a 12-column grid system to layout your ",[96,215,171],{},". Widths of groups and widgets define the number of columns they will render in. So, a \"width\" of 6\" would render to 50% of the screen. Grid layouts are entirely responsive, and will adjust to the size of the screen.",[44,218,219,205,222,226,227,230],{},[165,220,221],{},"Fixed:",[207,223,212],{"href":224,"rel":225},"https:\u002F\u002Fdashboard.flowfuse.com\u002Flayouts\u002Ftypes\u002Ffixed.html",[211],") Each component will render at a ",[71,228,229],{},"fixed"," width, no matter what the screen size is. The \"width\" property is converted a fixed pixel value (multiples of 48px by default).",[44,232,233,205,236,240],{},[165,234,235],{},"Notebook:",[207,237,212],{"href":238,"rel":239},"https:\u002F\u002Fdashboard.flowfuse.com\u002Flayouts\u002Ftypes\u002Fnotebook.html",[211],") This layout will stretch to 100% width, up to a maximum width of 1024px, and will centrally align. It's particularly useful for storytelling (e.g. articles\u002Fblogs) or analysis type user interfaces (e.g. Jupyter Notebooks), where you want the user to digest content in a particular order through scrolling.",[25,242,244],{"id":243},"navigation-sidebar","Navigation Sidebar",[10,246,247],{},"Dashboard 2.0 offers various options on the appearance of the navigation sidebar:",[104,249,250,256,261,267,273],{},[44,251,252,255],{},[165,253,254],{},"Collapsing:"," When the sidebar is opened the page content will adjust with the width of the sidebar.",[44,257,258,260],{},[165,259,221],{}," The full sidebar will always be visible, and the page content will adjust to the width of the sidebar.",[44,262,263,266],{},[165,264,265],{},"Collapse to Icons:"," When minimized, users can still navigate between pages by clicking on the icons representing each page in the sidebar.",[44,268,269,272],{},[165,270,271],{},"Appear over Content:"," When the sidebar is opened, the page is given an overlay, and the sidebar sits on top.",[44,274,275,278,279,286],{},[165,276,277],{},"Always Hide:"," The sidebar will never show, and navigation between pages can instead be driven by ",[207,280,283],{"href":281,"rel":282},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-control.html",[211],[96,284,285],{},"ui-control",".",[25,288,290],{"id":289},"define-your-layout","Define Your Layout",[10,292,293],{},"In our example, we're going to switch to a \"Notebook\" layout, with a \"Collapse to Icons\" sidebar:",[10,295,296],{},[32,297],{"alt":298,"dataZoomable":35,"src":299},"Example of the \"Notebook\" layout and \"Collapse to icons\" sidebar","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-example.png",[38,301,302],{},"Example of the \"Notebook\" layout, with \"Collapse to Icons\" sidebar navigation.",[20,304,306],{"id":305},"adding-more-widgets","Adding More Widgets",[10,308,309,310,313,314,286],{},"Now, we're going to build a quick example to demonstrate how we can wire nodes together, and visualize the output from a ",[96,311,312],{},"ui-slider"," onto a ",[96,315,316],{},"ui-chart",[25,318,320],{"id":319},"adding-a-group","Adding a Group",[10,322,323],{},"In the Node-RED Editor's Dashboard 2.0 sidebar, we're going to then do the following things:",[41,325,326,329],{},[44,327,328],{},"Edit \"My Group\" and rename it to \"Controls\"",[44,330,331],{},"Create a new \"Group\" in your existing page called \"Data Visualization\"",[10,333,334,335,337],{},"You'll now see the two groups listed under \"Page 1\". \"Controls\" with a single ",[96,336,98],{}," and \"Data Visualization\" with no widgets.",[10,339,340],{},[32,341],{"alt":342,"dataZoomable":35,"src":343},"Screenshot of the modified and newly added groups","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-new-group.png",[38,345,342],{},[25,347,349],{"id":348},"connecting-new-nodes","Connecting New Nodes",[10,351,352],{},"Then, we're going to add two new widgets:",[104,354,355,358],{},[44,356,357],{},"UI Chart",[44,359,360],{},"UI Slider",[10,362,363],{},"Which we can do by dropping them from the left-side Palette and onto our canvas.",[10,365,366,367,369,370,372],{},"We'll need to double-click each new node and confirm which \"Group\" we want to add this node to. In this case, we'll add the ",[96,368,312],{}," to the \"Controls\" group, and the ",[96,371,316],{}," to the \"Data Visualization\" group.",[10,374,375,376,378,379,381,382,384],{},"We're also going to connect the output from both the ",[96,377,312],{}," and ",[96,380,98],{}," to the input of the ",[96,383,316],{},":",[10,386,387],{},[32,388],{"alt":389,"dataZoomable":35,"src":390},"Screenshot of the Node-RED Editor, showing the ui-slider and ui-button connected to our ui-chart","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-flow.png",[38,392,389],{},[10,394,395,396,398,399,384],{},"Now, when we view our Dashboard, we can see the ",[96,397,312],{}," output is def straight into our ",[96,400,316],{},[10,402,403],{},[32,404],{"alt":405,"dataZoomable":35,"src":406},"Screenshot of the Dashboard with all three widgets rendered","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-final.png",[38,408,405],{},[10,410,411,412,414,415,418,419,421],{},"The final step we're going to make is to modify our ",[96,413,98],{},". We're going to rename it to \"Clear\", and configure it's \"Payload\" option to send a JSON payload of ",[96,416,417],{},"[]",", which, when sent to the ",[96,420,316],{}," will clear the chart of all data.",[10,423,424],{},[32,425],{"alt":426,"dataZoomable":35,"src":427},"The ui-button configuration after setting it's payload and label","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-btn-config.png",[38,429,426],{},[10,431,432],{},"With all of this together, we have the following functional Dashboard:",[10,434,435],{},[32,436],{"alt":437,"dataZoomable":35,"src":438},"Short animation showing the final functional dashboard","\u002Fblog\u002F2024\u002F03\u002Fimages\u002Fdashboard-getting-started-final.gif",[38,440,441],{},"Short animation showing the final functional dashboard.",[20,443,445],{"id":444},"next-steps","Next Steps",[10,447,448],{},"Whilst this is just a simple introduction of Node-RED Dashboard 2.0, we do have many other articles and documentation that can help you get started with more advanced features.",[104,450,451,458,466,474,481],{},[44,452,453,457],{},[207,454,456],{"href":455},"\u002Fblog\u002Fdashboard\u002F","FlowFuse Dashboard Articles"," - Collection of examples and guides written by FlowFuse.",[44,459,460,465],{},[207,461,464],{"href":462,"rel":463},"https:\u002F\u002Fdashboard.flowfuse.com",[211],"Node-RED Dashboard 2.0 Documentation"," - Detailed information for each of the nodes available in Dashboard 2.0, as well as useful guides on building custom nodes and widgets of your own.",[44,467,468,473],{},[207,469,472],{"href":470,"rel":471},"https:\u002F\u002Fdiscourse.nodered.org\u002Ftag\u002Fdashboard-2",[211],"Node-RED Forums - Dashboard 2.0"," -  The Node-RED forums is a great place to ask questions, share your projects and get help from the community.",[44,475,476,480],{},[207,477,479],{"href":478},"\u002Febooks\u002Fbeginner-guide-to-a-professional-nodered\u002F","Beginner Guide to a Professional Node-RED"," - A free guide to an enterprise-ready Node-RED. Learn all about Node-RED history, securing your flows and dashboard data visualization.",[44,482,483,487],{},[207,484,486],{"href":485},"\u002Fcontact-us","FlowFuse - Book a Demo"," - FlowFuse provides a complete platform to scale your production Node-RED applications, increase developer velocity, and enhance security in order to accelerate innovation.",[20,489,491],{"id":490},"follow-our-progress","Follow our Progress",[10,493,494],{},"New features and improvements are coming to Node-RED Dashboard 2.0 every week, if you're interested in what we have lined up, or want to contribute yourself, then you can track the work we have lined up on our GitHub Projects:",[104,496,497,504,511],{},[44,498,499],{},[207,500,503],{"href":501,"rel":502},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[211],"Dashboard 2.0 Activity Tracker",[44,505,506],{},[207,507,510],{"href":508,"rel":509},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[211],"Dashboard 2.0 Planning Board",[44,512,513],{},[207,514,517],{"href":515,"rel":516},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F5",[211],"Dashboard 1.0 Feature Parity Tracker",[10,519,520,521,286],{},"If you have any feature requests, bugs\u002Fcomplaints or general feedback, please do reach out, and raise issues on our relevant ",[207,522,525],{"href":523,"rel":524},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[211],"GitHub repository",{"title":35,"searchDepth":527,"depth":527,"links":528},2,[529,534,535,540,544,545],{"id":22,"depth":527,"text":23,"children":530},[531,533],{"id":27,"depth":532,"text":28},3,{"id":52,"depth":532,"text":53},{"id":79,"depth":527,"text":80},{"id":144,"depth":527,"text":145,"children":536},[537,538,539],{"id":193,"depth":532,"text":194},{"id":243,"depth":532,"text":244},{"id":289,"depth":532,"text":290},{"id":305,"depth":527,"text":306,"children":541},[542,543],{"id":319,"depth":532,"text":320},{"id":348,"depth":532,"text":349},{"id":444,"depth":527,"text":445},{"id":490,"depth":527,"text":491},"md",{"navTitle":5,"excerpt":548},{"type":7,"value":549},[550,552,554],[10,551,12],{},[10,553,15],{},[10,555,18],{},true,"\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started",{"title":5,"description":12},"blog\u002F2024\u002F03\u002Fdashboard-getting-started","Bp3aNex5QyNcvW8dWvjrsaWuXGo1hCUDZxu0FIGEAs8",1780070551526]