[{"data":1,"prerenderedAt":291},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2":3},{"id":4,"title":5,"body":6,"description":12,"extension":280,"meta":281,"navigation":286,"path":287,"seo":288,"stem":289,"__hash__":290},"blog\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2.md","How to Build an Admin Dashboard with Node-RED Dashboard 2.0",{"type":7,"value":8,"toc":270},"minimark",[9,13,22,27,30,38,47,51,58,62,65,80,87,96,100,103,114,121,139,146,153,165,169,172,183,190,194,201,215,218,225,232,236,239],[10,11,12],"p",{},"Managing and analyzing increasing amounts of data becomes crucial for organizations. Dashboard 2.0 and Node-RED help organizations access the data, normalize it, and visualize it. But what about controlling who can access what data? That's where an admin-only page comes in. Now With Node-RED Dashboard 2.0, we can also create robust and secure admin-only pages easily. In this guide, we'll provide you with step-by-step instructions to Build an Admin-only page with Node-RED Dashboard 2.0.",[10,14,15,16,21],{},"If you're new to Dashboard 2.0, refer to our blog post ",[17,18,20],"a",{"href":19},"\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started\u002F","Getting Started with Dashboard 2.0"," to install and get things started.",[23,24,26],"h2",{"id":25},"enabling-flowfuse-user-authentication","Enabling FlowFuse User Authentication",[10,28,29],{},"Before proceeding further, let’s enable FlowFuse user authentication. This step adds an extra layer of protection to our dashboard by adding a login page that restricts access exclusively to registered FlowFuse users. Additionally, it further simplifies the process for the FlowFuse Multiuser addon to track and access logged-in user's data on the dashboard.",[10,31,32,33,37],{},"For more information, refer to the ",[17,34,36],{"href":35},"\u002Fdocs\u002Fuser\u002Finstance-settings\u002F#flowfuse-user-authentication","documentation"," and ensure that it is enabled.",[10,39,40],{},[41,42],"img",{"alt":43,"dataZoomable":44,"src":45,"title":46},"\"Screenshot displaying the configuration settings within the FlowFuse instance, enabling user authentication for enhanced security.\n\"","","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-flowfuse-instance-setting.png","Screenshot displaying the configuration settings within the FlowFuse instance, enabling user authentication for enhanced security.\n",[23,48,50],{"id":49},"exploring-flowfuse-multiuser-addon","Exploring FlowFuse Multiuser Addon",[10,52,53,54],{},"The FlowFuse Multiuser Addon is a plugin developed for Dashboard 2.0 to access logged-in user data on the dashboard. To install and understand how the FlowFuse Multiuser Addon works, refer to ",[17,55,57],{"href":56},"\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F#enabling-flowfuse-user-authentication","Exploring the FlowFuse User Addon ",[23,59,61],{"id":60},"storing-a-list-of-admin-users","Storing a list of Admin users",[10,63,64],{},"Before we start building the admin-only page We need to store a list of admin users somewhere so that we can later display the admin-only page to those users only, For this guide we will store the admin list in the global context.",[66,67,68,72],"ol",{},[69,70,71],"li",{},"Drag an inject node onto the canvas.",[69,73,74,75,79],{},"Drag the 'change' node onto the canvas and set ",[76,77,78],"code",{},"global.admins"," to a JSON array containing the usernames of admin users. This will store the created admin list in our Node-RED global context.",[10,81,82],{},[41,83],{"alt":84,"dataZoomable":44,"src":85,"title":86},"\"Screenshot displaying the change node which which stores list of admins username in global context\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-change-node-for-storing-adminlist-to-global-contenxt.png","Screenshot displaying the change node which which stores list of admins username in global context",[66,88,90,93],{"start":89},3,[69,91,92],{},"Connect the inject node’s output to the change node’s input.",[69,94,95],{},"To store the list in a global context, click the inject node’s button once you've deployed the flow.",[23,97,99],{"id":98},"building-an-admin-only-page","Building an Admin-only page",[10,101,102],{},"Now, let's proceed with the practical steps to implement the admin-only page:",[66,104,105,108,111],{},[69,106,107],{},"Create a new page in Dashboard 2.0, where we will display sensitive data that we want to hide from regular users, this page will be our admin page.",[69,109,110],{},"Drag an event node on the canvas, then click on it, and select the UI base that contains your all pages including the admin page",[69,112,113],{},"Drag a switch node on the canvas, and add two conditions, one to check whether the user’s username is contained in the admin list or a second for otherwise, see the below image.",[10,115,116],{},[41,117],{"alt":118,"dataZoomable":44,"src":119,"title":120},"\"Screenshot displaying the switch node which checks whether the logged-in user's username is contained in the admin list or not\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-switch-node-checking-page-viewer-isadmin.png","Screenshot displaying the switch node which checks whether the logged-in user's username is contained in the admin list or not",[66,122,124],{"start":123},4,[69,125,126,127,130,131,134,135,138],{},"Drag two change nodes onto the canvas, Configure the first change node to show the admin page by setting ",[76,128,129],{},"msg.payload"," as ",[76,132,133],{},"{\"pages\":{\"show\":[\"Admin View\"]}}",", and the second change node to hide the admin page by setting the payload as: ",[76,136,137],{},"{\"pages\":{\"hide\":[\"Admin View\"]}}",".",[10,140,141],{},[41,142],{"alt":143,"dataZoomable":44,"src":144,"title":145},"\"Screenshot displaying the change node which contains payload to show admin page\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-change-node-for-showing-page.png","Screenshot displaying the change node which contains payload to show admin page",[10,147,148],{},[41,149],{"alt":150,"dataZoomable":44,"src":151,"title":152},"\"Screenshot displaying the change node which contains payload to hide admin page\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-change-node-for-hidding-page.png","Screenshot displaying the change node which contains payload to display admin page",[66,154,156,159,162],{"start":155},5,[69,157,158],{},"Connect the first change node's input to the switch node's first output and the second change node's input to the switch node's second output.",[69,160,161],{},"Drag a ui-control widget onto the canvas, then click on it and select ui-base which includes all your pages including the admin page.",[69,163,164],{},"Finally, connect both change node’s outputs to the ui-control’s input.",[23,166,168],{"id":167},"hidding-admin-only-page-by-default","Hidding Admin only page by default",[10,170,171],{},"To hide an admin-only page by default to ensure regular users don't accidentally land on the admin-only page the following steps are needed.",[66,173,174,177,180],{},[69,175,176],{},"Go to the Dashboard 2.0 sidebar, and select the layout tab.",[69,178,179],{},"Locate the admin-only page and click on the edit icon next to it.",[69,181,182],{},"Set visibility as \"hidden\".",[10,184,185],{},[41,186],{"alt":187,"dataZoomable":44,"src":188,"title":189},"\"Screenshot displaying admin-only page configuration\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-admin-only-page-configuration.png","Screenshot displaying admin-only page configuration",[23,191,193],{"id":192},"deploying-the-flow","Deploying the flow",[10,195,196],{},[41,197],{"alt":198,"dataZoomable":44,"src":199,"title":200},"\"Screenshot displaying the FlowFuse Editor with flow of admin-only page\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-flowfuse-editior.png","Screenshot displaying the FlowFuse Editor with flow of admin-only page",[66,202,203,206,212],{},[69,204,205],{},"With your flow updated to include the above, click the \"Deploy\" button in the top-right of the Node-RED Editor.",[69,207,208,209,138],{},"Navigate to ",[76,210,211],{},"https:\u002F\u002F\u003Cyour-instance-name>.flowfuse.cloud\u002Fdashboard",[69,213,214],{},"When you visit the page for the first time, you'll need to log in with your FlowFuse username and password or through Single-Sign on.",[10,216,217],{},"Now, if your username is added to the list of admin usernames stored in the global context, you will be able to see the admin-only page.",[10,219,220],{},[41,221],{"alt":222,"dataZoomable":44,"src":223,"title":224},"\"Screenshot displaying the Dashboard view of normal users\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-dashboard-view-for-normal-users.png","Screenshot displaying the Dashboard view of normal users",[10,226,227],{},[41,228],{"alt":229,"dataZoomable":44,"src":230,"title":231},"\"Screenshot displaying the Dashboard view of admin users\"","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fbuilding-admin-panel-node-red-dashboard-2-dashboard-view-for-admin-users.png","Screenshot displaying the Dashboard view of admin users",[23,233,235],{"id":234},"next-step","Next step",[10,237,238],{},"If you want to learn more about FlowFuse multiuser addon and personalize the multiuser dashboard. we do have many other resources, please refer to them to learn more.",[240,241,242,249,256,263],"ul",{},[69,243,244,248],{},[17,245,247],{"href":246},"\u002Fwebinars\u002F2024\u002Fnode-red-dashboard-multi-user\u002F","Webinar"," - This webinar provides an in-depth discussion of the Personalised Multi-User Dashboards feature and offers guidance on how to get started with it.",[69,250,251,255],{},[17,252,254],{"href":253},"\u002Fblog\u002F2024\u002F01\u002Fdashboard-2-multi-user\u002F","Personalised Multi-user Dashboards with Node-RED Dashboard 2.0"," - This article explores the process of building multi-user Dashboards secured with FlowFuse Cloud.",[69,257,258,262],{},[17,259,261],{"href":260},"\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F","Displaying logged-in users on Dashboard 2.0"," - This detailed guide demonstrates how to display logged-in users on Dashboard 2.0 which using the FlowFuse Multiuser addon and FlowFuse.",[69,264,265,269],{},[17,266,268],{"href":267},"\u002Fblueprints\u002Fflowfuse-dashboard\u002Fmulti-user-dashboard\u002F","Multi-User Dashboard for Ticket\u002FTask Management"," blueprint, which allows you to utilize templates to develop Personalize multi-user dashboard quickly.",{"title":44,"searchDepth":271,"depth":271,"links":272},2,[273,274,275,276,277,278,279],{"id":25,"depth":271,"text":26},{"id":49,"depth":271,"text":50},{"id":60,"depth":271,"text":61},{"id":98,"depth":271,"text":99},{"id":167,"depth":271,"text":168},{"id":192,"depth":271,"text":193},{"id":234,"depth":271,"text":235},"md",{"navTitle":5,"excerpt":282},{"type":7,"value":283},[284],[10,285,12],{},true,"\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2",{"title":5,"description":12},"blog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2","OOoS9T0dX51laOhqk1vHSesBVPpR3BW19JvH6Sg7fwk",1780070551651]