Issue with Dashboard UI. Generating UI elements with subflows

Dashboard
,
1

Using latest versions.

image
image1177Ă—409 17.2 KB

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.

image
image1015Ă—343 10.4 KB 

[
    {
        "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
    }
]
2

Welcome to community :slightly_smiling_face:

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

1 Like
3

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

1 Like
4

What about flex-dash? Worth looking into?

1 Like
5

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/

2 Likes
6

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.

7

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

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.

8

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...

9

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

10

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

11

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:

  1. 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.
1 Like
12

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.

1 Like
13

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.

1 Like
14

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