[Dashboard 1.18.0 Blog Tile] Hi All, just wanted to make you aware of the new update for Dashboard. In particular, I think the new Group "type" property will be really useful/popular, as it makes it very easy to render content into a Dialog/Modal. Full Article: Dialogs, Customizable Icons and Histograms Now Available in FlowFuse Dashboard • FlowFuse Dialog Docs: Config: UI Group ui-group | Node-RED Dashboard 2.0

Was there an issue with groups showing empty when they only had templates on them? Or something like that.

There is this one, but it just requires a browser page refresh to make it go away. Some page returns an "unused" alert, however it is being used opened 07:29AM - 04 Aug 24 UTC (UTC) [andrea-tomassi] andrea-tomassi bug needs-triage ### Current Behavior ![image](https://github.com/user-attachments/assets/c5cc8f…e6-454a-467c-8148-3ec5ee9f179f) ### Expected Behavior If a page is being displyed, has groups inside etc should not trigger the "unused config" warning. ### Steps To Reproduce [ { "id": "3140cec2229a8dbf", "type": "tab", "label": "Flow 2", "disabled": false, "info": "", "env": [] }, { "id": "e3d02b48248a803b", "type": "ui-template", "z": "3140cec2229a8dbf", "group": "ab6b14b45fd0dfb3", "page": "", "ui": "", "name": "", "order": 1, "width": 0, "height": 0, "head": "", "format": " Send Hello World ", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 420, "y": 240, "wires": [ [ "e234badbeb740e49" ] ] }, { "id": "10b81341399afe1a", "type": "ui-template", "z": "3140cec2229a8dbf", "group": "324574385995bc1d", "page": "", "ui": "", "name": "", "order": 1, "width": 0, "height": 0, "head": "", "format": " \n \n Latest msg received: \n {{ msg }} \n \n ", "storeOutMessages": true, "passthru": true, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 420, "y": 160, "wires": [ [] ] }, { "id": "0837ece1c6cd2f9f", "type": "inject", "z": "3140cec2229a8dbf", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "Hellooooo!", "payload": "iso", "payloadType": "date", "x": 180, "y": 120, "wires": [ [ "10b81341399afe1a", "53c9f9f3ee1b6e4b" ] ] }, { "id": "e234badbeb740e49", "type": "debug", "z": "3140cec2229a8dbf", "name": "debug 63", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 800, "y": 220, "wires": [] }, { "id": "53c9f9f3ee1b6e4b", "type": "ui-notification", "z": "3140cec2229a8dbf", "ui": "08f25dbd54afd079", "position": "top right", "colorDefault": true, "color": "#000000", "displayTime": "3", "showCountdown": true, "outputs": 1, "allowDismiss": true, "dismissText": "Close", "raw": false, "className": "", "name": "", "x": 450, "y": 80, "wires": [ [] ] }, { "id": "cd532b802ed99edb", "type": "function", "z": "3140cec2229a8dbf", "name": "auth", "func": "// Assuming msg._client.user.email contains the authenticated user's email\nconst userEmail = msg._client.user.email;\n\n// Define the pages and groups to hide\nconst pagesToHide = ['Homepage', 'Page 2']; // Replace with your actual page names\n\n// Prepare the payload to show/hide pages and groups\nmsg.payload = {\n pages: {\n show: [], // Add any pages you want to show\n hide: pagesToHide // Pages to hide\n }\n};\n\n// Log the action for debugging\nnode.log(`Hiding pages: ${JSON.stringify(pagesToHide)}`);\n\nreturn msg;", "outputs": 1, "timeout": 0, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 410, "y": 320, "wires": [ [ "b3f8da232ad49630" ] ] }, { "id": "b3f8da232ad49630", "type": "ui-control", "z": "3140cec2229a8dbf", "name": "", "ui": "08f25dbd54afd079", "events": "all", "x": 640, "y": 320, "wires": [ [ "860583c48051155c" ] ] }, { "id": "860583c48051155c", "type": "debug", "z": "3140cec2229a8dbf", "name": "debug 64", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 840, "y": 320, "wires": [] }, { "id": "bd6b4ab764694470", "type": "ui-control", "z": "3140cec2229a8dbf", "name": "", "ui": "08f25dbd54afd079", "events": "all", "x": 160, "y": 320, "wires": [ [ "cd532b802ed99edb" ] ] }, { "id": "d4522e1cfe42ef45", "type": "ui-chart", "z": "3140cec2229a8dbf", "group": "8c88e7c22290f648", "name": "", "label": "chart", "order": 1, "chartType": "line", "category": "topic", "categoryType": "msg", "xAxisLabel": "", "xAxisProperty": "", "xAxisPropertyType": "property", "xAxisType": "time", "xAxisFormat": "", "xAxisFormatType": "auto", "yAxisLabel": "", "yAxisProperty": "", "ymin": "", "ymax": "", "action": "append", "stackSeries": false, "pointShape": "circle", "pointRadius": 4, "showLegend": true, "removeOlder": 1, "removeOlderUnit": "3600", "removeOlderPoints": "", "colors": [ "#0095ff", "#ff0000", "#ff7f0e", "#2ca02c", "#a347e1", "#d62728", "#ff9896", "#9467bd", "#c5b0d5" ], "textColor": [ "#666666" ], "textColorDefault": true, "gridColor": [ "#e5e5e5" ], "gridColorDefault": true, "width": 6, "height": 8, "className": "", "x": 410, "y": 420, "wires": [ [] ] }, { "id": "ab6b14b45fd0dfb3", "type": "ui-group", "name": "G2", "page": "bcc422e05bf17807", "width": "4", "height": "3", "order": 2, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "324574385995bc1d", "type": "ui-group", "name": "G1", "page": "bcc422e05bf17807", "width": "4", "height": "3", "order": 1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "08f25dbd54afd079", "type": "ui-base", "name": "UI Name", "path": "/dashboard", "includeClientData": true, "acceptsClientConfig": [ "ui-notification", "ui-control", "ui-template", "ui-markdown", "ui-form", "ui-text-input", "ui-file-input", "ui-button", "ui-button-group", "ui-dropdown", "ui-radio-group", "ui-slider", "ui-switch", "ui-text", "ui-table", "ui-chart", "ui-gauge", "ui-tabulator" ], "showPathInSidebar": false, "showPageTitle": true, "navigationStyle": "icon", "titleBarStyle": "default" }, { "id": "8c88e7c22290f648", "type": "ui-group", "name": "My Group", "page": "d1b4fa02ddfafd2b", "width": "6", "height": "1", "order": 1, "showTitle": true, "className": "", "visible": "true", "disabled": "false" }, { "id": "bcc422e05bf17807", "type": "ui-page", "name": "Homepage", "ui": "08f25dbd54afd079", "path": "/home", "icon": "home", "layout": "grid", "theme": "b7b1935fbb33bbc8", "order": 1, "className": "", "visible": true, "disabled": false }, { "id": "d1b4fa02ddfafd2b", "type": "ui-page", "name": "Page 2", "ui": "08f25dbd54afd079", "path": "/page2", "icon": "home", "layout": "grid", "theme": "b7b1935fbb33bbc8", "order": 2, "className": "", "visible": "true", "disabled": "false" }, { "id": "b7b1935fbb33bbc8", "type": "ui-theme", "name": "def theme", "colors": { "surface": "#ffffff", "primary": "#0094ce", "bgPage": "#eeeeee", "groupBg": "#ffffff", "groupOutline": "#cccccc" }, "sizes": { "pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px" } } ] ### Environment - Dashboard version: 1.14.0 - Node-RED version: 4.0.2 - Node.js version: 20.x - npm version: - Platform/OS: Ubuntu - Browser: Chrome ### Have you provided an initial effort estimate for this issue? I have provided an initial effort estimate

Starting from nothing - drag button into, it is preconfigured. [image] It creates 4 config nodes [image] Everything seems really ok But if you deploy [image] [image] It renders on dashboard but unused configs still exist on every deploy. And there's no clue what the user should do with them.

This, thanks i had to find some screenshots, but you were faster :wink: Is it a capitalization issue (page vs Page ?)

Is that the issue I linked to? Does it recover if you refresh the browser?

Hmmm, that geels like an underlying Node-RED bug. They are all used. The group is used by the newly created Button, page by the group, theme by the page, and base by the page. Can you open a GH issue please, and we can investigate.

[image] joepavitt: new Group "type" property will be really useful/popular, as it makes it very easy to render content into a Dialog/Modal. @joepavitt Stupid question: is such a dialog group an alternative for a ui-form node in some way?

[image] BartButenaers: Stupid question: is such a dialog group an alternative for a ui-form node in some way? A form can be put onto a dialog (as can any other controls). Think of the dialog as any other group that has widgets except is is not shown until you tell it to show via a message. Probably easier to play with it than explain it. There is a copyable demo on this page: Config: UI Group ui-group | Node-RED Dashboard 2.0

Not limited to forms, although rendering a form into a Dialog/Modal will probably be the most common use case, I suspect.

Node-RED

Node-RED Forum

Dashboard Updates: Dialogs, Customisable Application Icon, Histograms + More

Dashboard

bakman2 16 October 2024 04:48 17

I think you even show the same issue in your own youtube video ?

Topic		Replies	Views
Can't edit ui-group and ui-page names Dashboard dashboard-2	25	4628	16 July 2026
Latest Dashboard 2.0 Release - v1.23.0 Dashboard dashboard-2	15	985	15 April 2025
UI Group showing as "unused" despite the fact it's not (subflow) Dashboard	4	144	3 January 2025
Dashboard 2.0 Pre-Alpha Available General dashboard-2	314	9615	9 December 2023
Latest Dashboard 2.0 Release - Tabs, Number Input & New Gauges Dashboard dashboard-2	30	1049	5 September 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Dashboard Updates: Dialogs, Customisable Application Icon, Histograms + More

Related topics