[{"data":1,"prerenderedAt":313},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2":3,"blog-all-for-related":312},{"id":4,"title":5,"authors":6,"body":8,"cta":282,"date":286,"description":287,"extension":288,"image":289,"lastUpdated":290,"meta":291,"navigation":297,"path":298,"seo":299,"sitemap":300,"stem":301,"subtitle":302,"tags":303,"tldr":309,"video":310,"__hash__":311},"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 (2026)",[7],"sumit-shinde",{"type":9,"value":10,"toc":272},"minimark",[11,15,24,29,32,40,49,53,60,64,67,82,89,98,102,105,116,123,141,148,155,167,171,174,185,192,196,203,217,220,227,234,238,241],[12,13,14],"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.",[12,16,17,18,23],{},"If you're new to Dashboard 2.0, refer to our blog post ",[19,20,22],"a",{"href":21},"\u002Fblog\u002F2024\u002F03\u002Fdashboard-getting-started\u002F","Getting Started with Dashboard 2.0"," to install and get things started.",[25,26,28],"h2",{"id":27},"enabling-flowfuse-user-authentication","Enabling FlowFuse User Authentication",[12,30,31],{},"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.",[12,33,34,35,39],{},"For more information, refer to the ",[19,36,38],{"href":37},"\u002Fdocs\u002Fuser\u002Finstance-settings\u002F#flowfuse-user-authentication","documentation"," and ensure that it is enabled.",[12,41,42],{},[43,44],"img",{"alt":45,"dataZoomable":46,"src":47,"title":48},"\"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",[25,50,52],{"id":51},"exploring-flowfuse-multiuser-addon","Exploring FlowFuse Multiuser Addon",[12,54,55,56],{},"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 ",[19,57,59],{"href":58},"\u002Fblog\u002F2024\u002F04\u002Fdisplaying-logged-in-users-on-dashboard\u002F#enabling-flowfuse-user-authentication","Exploring the FlowFuse User Addon ",[25,61,63],{"id":62},"storing-a-list-of-admin-users","Storing a list of Admin users",[12,65,66],{},"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.",[68,69,70,74],"ol",{},[71,72,73],"li",{},"Drag an inject node onto the canvas.",[71,75,76,77,81],{},"Drag the 'change' node onto the canvas and set ",[78,79,80],"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.",[12,83,84],{},[43,85],{"alt":86,"dataZoomable":46,"src":87,"title":88},"\"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",[68,90,92,95],{"start":91},3,[71,93,94],{},"Connect the inject node’s output to the change node’s input.",[71,96,97],{},"To store the list in a global context, click the inject node’s button once you've deployed the flow.",[25,99,101],{"id":100},"building-an-admin-only-page","Building an Admin-only page",[12,103,104],{},"Now, let's proceed with the practical steps to implement the admin-only page:",[68,106,107,110,113],{},[71,108,109],{},"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.",[71,111,112],{},"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",[71,114,115],{},"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.",[12,117,118],{},[43,119],{"alt":120,"dataZoomable":46,"src":121,"title":122},"\"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",[68,124,126],{"start":125},4,[71,127,128,129,132,133,136,137,140],{},"Drag two change nodes onto the canvas, Configure the first change node to show the admin page by setting ",[78,130,131],{},"msg.payload"," as ",[78,134,135],{},"{\"pages\":{\"show\":[\"Admin View\"]}}",", and the second change node to hide the admin page by setting the payload as: ",[78,138,139],{},"{\"pages\":{\"hide\":[\"Admin View\"]}}",".",[12,142,143],{},[43,144],{"alt":145,"dataZoomable":46,"src":146,"title":147},"\"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",[12,149,150],{},[43,151],{"alt":152,"dataZoomable":46,"src":153,"title":154},"\"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",[68,156,158,161,164],{"start":157},5,[71,159,160],{},"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.",[71,162,163],{},"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.",[71,165,166],{},"Finally, connect both change node’s outputs to the ui-control’s input.",[25,168,170],{"id":169},"hidding-admin-only-page-by-default","Hidding Admin only page by default",[12,172,173],{},"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.",[68,175,176,179,182],{},[71,177,178],{},"Go to the Dashboard 2.0 sidebar, and select the layout tab.",[71,180,181],{},"Locate the admin-only page and click on the edit icon next to it.",[71,183,184],{},"Set visibility as \"hidden\".",[12,186,187],{},[43,188],{"alt":189,"dataZoomable":46,"src":190,"title":191},"\"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",[25,193,195],{"id":194},"deploying-the-flow","Deploying the flow",[12,197,198],{},[43,199],{"alt":200,"dataZoomable":46,"src":201,"title":202},"\"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",[68,204,205,208,214],{},[71,206,207],{},"With your flow updated to include the above, click the \"Deploy\" button in the top-right of the Node-RED Editor.",[71,209,210,211,140],{},"Navigate to ",[78,212,213],{},"https:\u002F\u002F\u003Cyour-instance-name>.flowfuse.cloud\u002Fdashboard",[71,215,216],{},"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.",[12,218,219],{},"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.",[12,221,222],{},[43,223],{"alt":224,"dataZoomable":46,"src":225,"title":226},"\"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",[12,228,229],{},[43,230],{"alt":231,"dataZoomable":46,"src":232,"title":233},"\"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",[25,235,237],{"id":236},"next-step","Next step",[12,239,240],{},"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.",[242,243,244,251,258,265],"ul",{},[71,245,246,250],{},[19,247,249],{"href":248},"\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.",[71,252,253,257],{},[19,254,256],{"href":255},"\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.",[71,259,260,264],{},[19,261,263],{"href":262},"\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.",[71,266,267,271],{},[19,268,270],{"href":269},"\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":46,"searchDepth":125,"depth":125,"links":273},[274,276,277,278,279,280,281],{"id":27,"depth":275,"text":28},2,{"id":51,"depth":275,"text":52},{"id":62,"depth":275,"text":63},{"id":100,"depth":275,"text":101},{"id":169,"depth":275,"text":170},{"id":194,"depth":275,"text":195},{"id":236,"depth":275,"text":237},{"type":283,"title":284,"description":285},"sign-up","Build Secure Admin Dashboards with Node-RED and FlowFuse","FlowFuse makes it simple to secure Node-RED dashboards with user authentication, role-based access control, and multi-user support, so you can control exactly who sees what in your production dashboards.","2024-04-08","Discover step-by-step instructions for developing an admin-only page in Node-RED Dashboard 2.0 using the FlowFuse Multiuser addon. Additionally, learn how to secure Dashboard 2.0 and explore the features of the FlowFuse multiuser addon.","md","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fadmin-dashboard.png","2026-06-03",{"keywords":292,"excerpt":293},"node-red admin dashboard, admin panel node-red dashboard 2, admin-only page node-red, flowfuse multiuser dashboard, role-based access node-red dashboard",{"type":9,"value":294},[295],[12,296,14],{},true,"\u002Fblog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2",{"title":5,"description":287},{"loc":298},"blog\u002F2024\u002F04\u002Fbuilding-an-admin-panel-in-node-red-with-dashboard-2","A guide to building an Admin Dashboard in Node-RED with Dashboard 2.0",[304,305,306,307,308],"posts","dashboard 2.0","admin dashboard","admin-only page","how-to","This guide shows how to build a secure admin-only page in Node-RED Dashboard 2.0 using FlowFuse user authentication and the Multiuser Addon. By storing admin usernames in global context and wiring a ui-event through a switch node to a ui-control widget, you can dynamically show or hide the admin page based on the logged-in user's role, while keeping the page hidden by default for all other users.",null,"VE5U-g4zYnxr4fBzQA5JFFNCQEAgcTNN2mMu1ArJOCw",[],1785528690626]