Multiple UI pages

Dashboard
1

Node Red is simply awesome. Been work with it and very impressed.
I did run into a problem and not sure where to search.
Here is what we are looking to do:

  1. UI Page 1: We want a UI Page where users can enter names into some TEXT Inputs
    On this UI Page, only the User Input fields are visible.

  2. UI Page 2:This page would show the Buttons with the Labels as the Users Input on Page 1

We have updated the button label with the {{msg.payload}} and the update label works.

However we would like to have the UI pages ā€˜separateā€™ so
Page 1 = USER INPUTS ( via text inputs)
Page 2 = Buttons

ANy hing would be appreciated.

2

This can certainly be done with Dashboard.

Just note that you are not really getting separate pages, rather tabs that look like pages. So all tabs are loaded into the client at load time.

This doesnā€™t generally matter unless your Dashboard output is relatively complex.

As an alternative, you can use something like node-red-contrib-uibuilder which does let you build many separate pages at the cost of you having to do more of the work in building the ui.

3

Thank you. I got up to speed on GROUPS and TABS. THen I was able to do what we wanted.
This video clarified it. Hope it will help others

1 Like
4

Hi, I would take advance of the full screen to show many sliders I have, for this reason I removed the tabs bar. Anyway I would like to add a page to monitor raspberry resouces, and switch on it without tabs. Any way to do it?
Maybe a different URL or a buttn on both dashboards to switch the content.
Thank you for answers

5

The tabs are numbered, 0, 1,...
Make a button with payload a digit and feed the output into a ui-control node

[
    {
        "id": "f6cf2d6ef0609762",
        "type": "ui_button",
        "z": "8fd97ac5c417d418",
        "name": "",
        "group": "a6e358b.672ffa8",
        "order": 5,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "Tab 0",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "0",
        "payloadType": "num",
        "topic": "topic",
        "topicType": "msg",
        "x": 160,
        "y": 420,
        "wires": [
            [
                "e584f414a6d43c9d"
            ]
        ]
    },
    {
        "id": "e584f414a6d43c9d",
        "type": "ui_ui_control",
        "z": "8fd97ac5c417d418",
        "name": "",
        "events": "change",
        "x": 350,
        "y": 420,
        "wires": [
            []
        ]
    },
    {
        "id": "a6e358b.672ffa8",
        "type": "ui_group",
        "name": "Demo",
        "tab": "4e528085.a1bfa",
        "order": 1,
        "disp": true,
        "width": "20",
        "collapse": false
    },
    {
        "id": "4e528085.a1bfa",
        "type": "ui_tab",
        "name": "Demo",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
3 Likes
6

Simply great! Thank you :))