Issue with Dashboard UI. Generating UI elements with subflows

HerrTuulik · 8 December 2022 12:34

Using latest versions.

I have a subflow that generates UI elements for a device.
heartbeat and relay status for some reason aren't displayed like the others. I can't figure out what is causing this. Each variable type has its own group in the same tab. Layout schemes appear identical to the other nodes.
If i import the ui nodes themselves to a fresh nodered, put them in a subflow and create instances, it displays it properly.

[
    {
        "id": "67e6135eefb495ae",
        "type": "ui_text",
        "z": "2243e6e3e8fee3db",
        "group": "4c980b53c453676d",
        "order": 1,
        "width": 2,
        "height": 2,
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "className": "",
        "x": 1370,
        "y": 420,
        "wires": []
    },
    {
        "id": "16561f74cc4d2532",
        "type": "ui_text",
        "z": "2243e6e3e8fee3db",
        "group": "7b5fc41e18f7a120",
        "order": 1,
        "width": 2,
        "height": 2,
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "className": "",
        "x": 810,
        "y": 440,
        "wires": []
    },
    {
        "id": "75ccc538d6cfb036",
        "type": "ui_text",
        "z": "2243e6e3e8fee3db",
        "group": "edfd3428f698f8f3",
        "order": 1,
        "width": 2,
        "height": 2,
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 810,
        "y": 400,
        "wires": []
    },
    {
        "id": "b66f5fbbceb06eb0",
        "type": "ui_text",
        "z": "2243e6e3e8fee3db",
        "group": "6c2e1a94e1faf88d",
        "order": 1,
        "width": 2,
        "height": 2,
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 810,
        "y": 360,
        "wires": []
    },
    {
        "id": "b8797a32923fc7a6",
        "type": "ui_gauge",
        "z": "2243e6e3e8fee3db",
        "name": "",
        "group": "dc6e68a66952f64c",
        "order": 1,
        "width": 2,
        "height": 2,
        "gtype": "gage",
        "title": "",
        "label": "Watts",
        "format": "{{value}}",
        "min": 0,
        "max": "1000",
        "colors": [
            "#00b500",
            "#e6e600",
            "#ca3838"
        ],
        "seg1": "",
        "seg2": "",
        "className": "",
        "x": 810,
        "y": 320,
        "wires": []
    },
    {
        "id": "e8cfcf8803914ccd",
        "type": "ui_text",
        "z": "2243e6e3e8fee3db",
        "group": "b456e7b1c267ea12",
        "order": 1,
        "width": 2,
        "height": 2,
        "name": "",
        "label": "",
        "format": "{{msg.payload}}",
        "layout": "row-spread",
        "className": "",
        "x": 810,
        "y": 280,
        "wires": []
    },
    {
        "id": "4c980b53c453676d",
        "type": "ui_group",
        "z": "2243e6e3e8fee3db",
        "name": "Heartbeat",
        "tab": "39e42669641ae361",
        "order": 7,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "7b5fc41e18f7a120",
        "type": "ui_group",
        "z": "2243e6e3e8fee3db",
        "name": "Relay Status",
        "tab": "39e42669641ae361",
        "order": 6,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "edfd3428f698f8f3",
        "type": "ui_group",
        "name": "Comment",
        "tab": "39e42669641ae361",
        "order": 3,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "6c2e1a94e1faf88d",
        "type": "ui_group",
        "name": "IP",
        "tab": "39e42669641ae361",
        "order": 5,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "dc6e68a66952f64c",
        "type": "ui_group",
        "name": "Usage",
        "tab": "39e42669641ae361",
        "order": 1,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "b456e7b1c267ea12",
        "type": "ui_group",
        "name": "Device",
        "tab": "39e42669641ae361",
        "order": 2,
        "disp": true,
        "width": 2,
        "collapse": false,
        "className": ""
    },
    {
        "id": "39e42669641ae361",
        "type": "ui_tab",
        "name": "Shelly list",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

hotNipi · 8 December 2022 13:00

Welcome to community

Sadly you can't do it. It is just not supported.
Many threads here about the thing.
https://discourse.nodered.org/search?q=dashboard%20subflow

TotallyInformation · 8 December 2022 17:30

There are, of course, other UI nodes that might be more helpful. Or I probably should have said UI frameworks.

HerrTuulik · 8 December 2022 19:29

What about flex-dash? Worth looking into?

hotNipi · 8 December 2022 20:04

You'll need to try cos every touch of it will make step forward to make it better and close to the release.

Not sure if it is close to your target but maybe ...

https://flexdash.github.io/docs/using-flexdash/array-widgets/

HerrTuulik · 8 December 2022 20:13

Reading from their docs:
"The main limitations are: - it is not possible to nest subflows, i.e., FlexDash widget nodes cannot be placed into a subflow that is instantiated in another subflow."- this might be a deal-breaker unfortunately.

TotallyInformation · 8 December 2022 20:17

I was more thinking of something closer to my heart - I just don't like to push it over other people's work

uibuilder now lets you build UI's using some JSON configuration that you simply send to a uibuilder instance. It isn't as pretty or as hand-holdy as other options but it should work from sub-flows just fine.

tve · 8 December 2022 20:18

Yup. It could be implemented, it's the same machinery as for one level of subflows, but someone has to look into the details, make the changes, test them, and document them...

HerrTuulik · 8 December 2022 20:21

I haven't found many other alternatives so i'll take what i can get. I'll give it a look. Thanks.

tve · 8 December 2022 20:25

Can you describe the nesting you're trying to implement?

HerrTuulik · 8 December 2022 21:03

I've got about a dozen subflows, half of them are based around generating and parsing info of different devices. The other half is orchestration. The orchestrator subflows may use device subflows in them. orchestrator and device subflows may both have ui elements generated.
For example: I've got a smart-plug that gives me power readings and has a relay, a fan that is controlled with esp32relay_board, a basic sonoff with temp,hum sensors.
To illustrate:

Subflow of fan orcherstrator with more complex logic, schedulers, etc
1.1 Subflow of esp32
1.2 Subflow of smart-plug
1.3 Subflow of sonoff
Most of it is already finished and functional, despite dashboard not supporting what i'm trying to do. But it's random, like shown above.
So if i can get something to reliably and dynamically generate tabs that look neat and consolidated, i'd be very happy.

tve · 8 December 2022 23:01

If using FlexDash you'd have to build the UI in the fan orchestrator subflow. Then you can instantiate that multiple times.

In UI builder you get to put it all together yourself :-). The difficult part is to figure out what nesting you have on the NR side and then construct the corresponding nesting of components on the UI side plus somehow connect inputs/outputs between NR and the UI.

TotallyInformation · 8 December 2022 23:07

If you are looking at uibuilder, this is the documentation for the data-driven UI config: Using the modern front-end client (totallyinformation.github.io).

Basically, you are defining your HTML using a standardised JSON config. Just make sure that you apply HTML ID's to key elements. That way you can easily add/remove/change elements from Node-RED.

You can, as usual with uibuilder, also use any front-end framework you like - the config driven JSON doesn't care.

system · 7 January 2023 23:08

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Subflow - UI Group Dashboard	12	90	30 October 2024
Layout order in subflows General node-red-dashboard	5	260	2 October 2023
Subflow ui elements General node-red-dashboard	3	392	27 December 2021
New 1.4.0 Release - Node-RED Dashboard 2.0 Dashboard dashboard-2	13	2247	12 April 2024
Dashboard 2, ui-node in subflow, unable to position widget in group Dashboard dashboard-2	3	158	26 April 2024

Issue with Dashboard UI. Generating UI elements with subflows

Related topics