Can't edit ui-group and ui-page names

NPM 11.16.0 node-Red 5.0.1
I can't edit the ui-group and ui-page names
To reproduce:

  1. New Flow
  2. Install dashboard 2.0 nodes
  3. drag a ui button onto the workspace
  4. open the button and edit the ui-group properties


6. Update and deploy
7. Name is still Page 1
8.

        "id": "a7f0eb917a56c60e",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "79cb7343240aa9ac",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "24ec05fefed07f54",
        "breakpoints": \[
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        \],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "4fee709f680737f2",
        "type": "ui-group",
        "name": "Page 1",
        "page": "a7f0eb917a56c60e",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
 

Welcome to the forum @olTechie

After changing the group name (and/or the page name in the page config) then you have to click the Update button and then the Deploy button for those changes to take effect. The blue dot on the node should then disappear.

In Node-red 4, the Deploy button was slightly greyed-out when a node's config dialog was open.

Now in v5 the mouse pointer should change to a red circle with a diagonal bar. (Stretching my mind back to the Highway Code, I'd say it's a No Waiting sign)

Can you confirm if you see this?

Colin, the blue dot disappears. But the page is still called Page 1, not Test.

jbudd, yes the mouse pointer changes while the mouse is in the config pane. Changes back to normal when you edit the config panel. I can edit the name but the actual configuration setting doesn't change and the title on the tab remains Page 1.

Update: I tried manually editing the flow.json file and the names did change, both in the config tab and on the dashboard page. So the issue is in the configuration edit page.

Apologies if I'm misunderstanding, but "Page 1" is the name of the ui-page not the ui-group. You have to dive one level deeper into the config.

jbudd, you're right. It would normally be necessary to create a new group and then add the new page to the new group. The steps I show are a bit oversimplified. But I also tried that and the names still don't change.


The dialog you show is the old one before version 5. I suspect the issue is with the new version.

The one you have just posted is for adding a new page not editing an existing one. You need to click the pen symbol next to the page to edit it.

If that is what you are doing then open the browser tools developer console and see if any errors appear there.

Colin, I've tried every possible combination. Finally I loaded a new copy of Trixie on a new card, reinstalled, full update/upgrade, install node red newly using the script Running on Raspberry Pi : Node-RED
It still says version 5.0.1 but now it works.

For others doing this, adding a tab is a little convoluted, especially if you are used to the old dashboard.

  1. Install Dashboard 2
  2. Drag a button onto the workspace
  3. Double-click to open configuration panel
  4. Group shows in red with "none"
  5. Hit +
  6. Opens the Add a new ui-group config node, also red
  7. Hit +
  8. Opens the Add new ui-page config node. The UI drop-down is red. YOU DO NOT WANT TO CREATE A NEW UI. No more + clicks.
  9. Hit the drop-down arrow to select the default UI, My Dashboard[/dashboard]
  10. Select a Theme
  11. Enter a name for the page
  12. Click Add
  13. Back to Add a new ui-group node
  14. Enter a name for the group
  15. Click Add
  16. Make the settings you need on the button or other dashboard node
  17. Click Done
  18. When you add more nodes, select the page and group you want using the drop-down

Warning, don't know if this is related, but at one point in the adventure I accidentally installed the old deprecated dashboard. It was not possible to remove it. I'm pretty sure it was after the issue with disappearing names showed up. In this situation, save your project by downloading it and reinstall node red using the script. When you import the download, be sure to reject any old dashboard nodes when asked to install nodes.

A comment about your Point 3, etc.
When I open the config panel for the button on a new Node-red installation the group field shows [Page 1] Group 1 rather than "none"
For some reason I am getting presented with a default ui-base, ui-page, ui-theme and ui-group. In this case I can use the pencil button to edit rather than creating a new group etc.
You do need to deploy the ui-base, theme, page and group before the button will work.

About Dashboard 1
It is possible to uninstall this, either from the palette manager or the command line.
If you experience difficulty, have you already dragged a node onto the editor? Unused configuration nodes might have been created, and they may have to be deleted in Node-red before uninstalling (I have not tried so not 100% sure).
In any case, there is no harm having both dashboards installed together, they do not interfere with each other.

Two common issues with the dashboard setup:

  • You import a flow and end up with two ui-pages which have the same path defined - eg /page1. You have to change or delete one of them
  • A page must have a theme. Don't omit to choose a theme from the dropdown.

Was there anything in the browser developer tools console?

This error popped up as soon as I double-clicked on the ui-table node (dashboard 2.0). No idea what it means.

Debugging steps since last post:

  1. Reload Node-red on a new instance of Trixie.
  2. As noted earlier, labelling the groups and pages seems to work
  3. Installed Box64, MariaDB in a docker dock and STM32CubeProgrammer
  4. Imported an older version of the main node-red flows.json
  5. Now I can't change group and page labels from defaults.
  6. Tried reinstalling node red using the Raspberry PI script. Notice this did not remove the palette nodes.
  7. Imported the same version.
  8. Still can't change group and page names on a newly inserted dashboard 2 node.

The old groups and pages I did some time ago still have the names I assigned them. Just can't add a new page with non-default names.
I probably should note that I use an Edge browser on a Windows 11 machine to develop on the little Pi. A seven-inch screen doesn't cut it for development. Everything is up to latest revisions.

Sadly I am restricted from providing a copy of the actual flows, NDA. But the issue persists even with the simple example I started with, leading me to suspect one of the nodes is at fault.

Here are the nodes:
drwxr-xr-x 5 testset testset 4096 Jul 14 10:22 node-red-contrib-buffer-parser
drwxr-xr-x 4 testset testset 4096 Jul 14 12:17 node-red-contrib-config
drwxr-xr-x 4 testset testset 4096 Jul 14 10:22 node-red-contrib-play-audio
drwxr-xr-x 4 testset testset 4096 Jul 14 12:17 node-red-contrib-sqlbuilder
drwxr-xr-x 2 testset testset 4096 Jul 14 12:17 node-red-contrib-xterm
drwxr-xr-x 3 testset testset 4096 Jul 14 12:17 node-red-node-mysql
drwxr-xr-x 3 testset testset 4096 Jul 14 10:22 node-red-node-pi-gpio
drwxr-xr-x 3 testset testset 4096 Jul 14 10:22 node-red-node-ping
drwxr-xr-x 3 testset testset 4096 Jul 14 10:22 node-red-node-random
drwxr-xr-x 3 testset testset 4096 Jul 14 10:22 node-red-node-serialport
drwxr-xr-x 3 testset testset 4096 Jul 14 10:22 node-red-node-smooth
drwxr-xr-x 5 testset testset 4096 Jul 14 12:17 node-red-node-sqlite
plus @flowfuse/node-red-dashboard, node-red, somehow these don't show in a grep node-red in the .node-red/node_modules folder.

It is nothing. It is inconsequential.

Can you show me? Make sure your screenshots show the full edit panel. And keep an eye on the developer console.

Additionally, if you have a different browser, try that too. Just in case some plugins or something is messing up.

Steve-Mcl, I tried it on the Chrome browser on the actual Raspberry PI. Same issue.





The Page field shows "Page Name" instead of "Database". If you click update all the way out you get the Pages information as shown in Step 1, same as before. With a clean install you can change the page and group names using the same procedure.

Works fine here

chrome_Yo4iPpYdNR


Are there errors on console?


Can you list nodes installed (as text) with version numbers? Simplest way is via Action named "System Info"

chrome_E8a4gwjA72


Did you try another browser? Perhaps on another computer?

Steve-Mcl - no errors shown in the Console.

Nodes:
"node-red": "5.0.1",
"node-red-contrib-buffer-parser": "3.2.2",
"node-red-contrib-play-audio": "2.5.0",
"node-red-node-pi-gpio": "2.0.7",
"node-red-node-ping": "0.3.3",
"node-red-node-random": "0.4.1",
"node-red-node-serialport": "2.0.3",
"node-red-node-smooth": "0.1.2",
"@flowfuse/node-red-dashboard": "1.30.2",
"node-red-node-sqlite": "2.0.1",
"node-red-contrib-xterm": "1.0.1",
"node-red-node-mysql": "3.0.0",
"node-red-contrib-config": "1.2.1",
"node-red-contrib-sqlbuilder": "1.1.0"

I tried the Chrome browser on the Raspberry PI and the Edge browser in Windows 11 over the network.