[{"data":1,"prerenderedAt":163},["ShallowReactive",2],{"blueprint-\u002Fblueprints\u002Fgetting-started\u002Fdashboard":3},{"id":4,"title":5,"author":6,"blueprintId":7,"body":8,"description":151,"extension":152,"image":59,"meta":153,"navigation":154,"path":155,"seo":156,"stem":157,"tags":158,"updated":161,"__hash__":162},"blueprints\u002Fblueprints\u002Fgetting-started\u002Fdashboard.md","Getting Started with Dashboard",null,"d1PLQoN9ZE",{"type":9,"value":10,"toc":139},"minimark",[11,15,26,31,42,46,49,54,62,78,82,91,94,98,113,120,123,126,132],[12,13,14],"p",{},"A collection of small examples for how to use FlowFuse Dashboard (Node-RED Dashboard 2.0). Each example is rendered to a standalone page on Dashboard, which can be navigated to via the side menu.",[12,16,17,23],{},[18,19],"img",{"alt":20,"dataZoomable":21,"src":22},"Screenshot of the Node-RED flow used to generate the dashboard","","\u002Fblueprints\u002Fgetting-started\u002Fdashboard\u002Fimages\u002Fflow.png",[24,25,20],"em",{},[27,28,30],"h2",{"id":29},"setup","Setup",[12,32,33,34,41],{},"In order to show the logged in user, you should enable the \"",[35,36,40],"a",{"href":37,"rel":38},"https:\u002F\u002Fflowfuse.com\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F#enabling-flowfuse-user-authentication",[39],"nofollow","FlowFuse User Authentication","\" setting on your Instance.",[27,43,45],{"id":44},"examples","Examples",[12,47,48],{},"The examples included are as follows:",[50,51,53],"h3",{"id":52},"data-visualisation","Data Visualisation",[12,55,56,60],{},[18,57],{"alt":58,"dataZoomable":21,"src":59},"Screenshot of the Data Visualisation example","\u002Fblueprints\u002Fgetting-started\u002Fdashboard\u002Fimages\u002Fdashboard-demo-vis.png",[24,61,58],{},[12,63,64,65,69,70,73,74,77],{},"The example demonstrates how to use the ",[66,67,68],"code",{},"chart"," widget and ",[66,71,72],{},"gauge"," widget to render data. In this simple flow, a ",[66,75,76],{},"slider"," is connected to the respective elements to show how interactive and live data can be displayed.",[50,79,81],{"id":80},"data-entry-form","Data Entry Form",[12,83,84,88,90],{},[18,85],{"alt":86,"dataZoomable":21,"src":87},"Screenshot of the Data Entry Form example","\u002Fblueprints\u002Fgetting-started\u002Fdashboard\u002Fimages\u002Fdashboard-demo-data-entry.png",[24,89,86],{},"\nThe examples renders a form with text, number and switch data types. Upon submission, the form data is appended to a table.",[12,92,93],{},"The table has had its columns manually defined such that it renders the \"Remaining Stock\" column as a progress bar, and the \"Available\" column as a tick\u002Fcross.",[50,95,97],{"id":96},"user-tracking-audit-log","User Tracking & Audit Log",[12,99,100,104,106,107,112],{},[18,101],{"alt":102,"dataZoomable":21,"src":103},"Screenshot of the User Tracking & Audit Log example","\u002Fblueprints\u002Fgetting-started\u002Fdashboard\u002Fimages\u002Fdashboard-demo-audit.png",[24,105,102],{},"\nThis example demonstrates how you can track which user is interacting with a Dashboard, utilizing the ",[35,108,111],{"href":109,"rel":110},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard-2-user-addon",[39],"FlowFuse User Addon",".",[12,114,115,116,119],{},"The flow uses Dashboard's ",[66,117,118],{},"event"," node, which emits when user's view or leave pages in your Dashboard.",[27,121,30],{"id":122},"setup-1",[12,124,125],{},"In order to show the logged in user, you should enable the \"FlowFuse User Authentication\" setting on your Instance:",[12,127,128],{},[18,129],{"alt":130,"dataZoomable":21,"src":131},"Screenshot of the Instance settings","\u002Fblueprints\u002Fgetting-started\u002Fdashboard\u002Fimages\u002Fflowfuse-security.png",[12,133,134,135,138],{},"This will add a ",[66,136,137],{},"msg._client.user"," object to the global context, which can be accessed by your Dashboard. You will need to restart your Node-RED instance for this to take effect.",{"title":21,"searchDepth":140,"depth":140,"links":141},4,[142,144,150],{"id":29,"depth":143,"text":30},2,{"id":44,"depth":143,"text":45,"children":145},[146,148,149],{"id":52,"depth":147,"text":53},3,{"id":80,"depth":147,"text":81},{"id":96,"depth":147,"text":97},{"id":122,"depth":143,"text":30},"A collection of small examples for how to use FlowFuse Dashboard (Node-RED Dashboard 2.0).","md",{},true,"\u002Fblueprints\u002Fgetting-started\u002Fdashboard",{"title":5,"description":151},"blueprints\u002Fgetting-started\u002Fdashboard",[159,160],"blueprints","getting-started","2025-05-02 10:57:14 +0100","XpkXJqWGeBdTvnfSR_EoybqVMAz9Qkeb1FVC1VWzEFA",1789640807997]