# Issue with Dashboard UI. Generating UI elements with subflows
**URL:** https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862
**Category:** Dashboard
**Tags:** node-red-dashboard, ui-widgets
**Created:** [8 December 2022 12:34 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862 "2022-12-08T12:34:23Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@HerrTuulik](https://discourse.nodered.org/u/HerrTuulik)
#### Post date: [8 December 2022 12:34 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/1 "2022-12-08T12:34:23Z")
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.
```auto
[
{
"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
}
]
```
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 December 2022 13:00 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/2 "2022-12-08T13:00:06Z")
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](https://discourse.nodered.org/search?q=dashboard%20subflow)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [8 December 2022 17:30 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/3 "2022-12-08T17:30:59Z")
There are, of course, other UI nodes that might be more helpful. Or I probably should have said UI frameworks.
---
### Author:  [@HerrTuulik](https://discourse.nodered.org/u/HerrTuulik)
#### Post date: [8 December 2022 19:29 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/4 "2022-12-08T19:29:20Z")
What about flex-dash? Worth looking into?
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [8 December 2022 20:04 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/5 "2022-12-08T20:04:10Z")
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/](https://flexdash.github.io/docs/using-flexdash/array-widgets/)
---
### Author:  [@HerrTuulik](https://discourse.nodered.org/u/HerrTuulik)
#### Post date: [8 December 2022 20:13 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/6 "2022-12-08T20:13:01Z")
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.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [8 December 2022 20:17 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/7 "2022-12-08T20:17:12Z")
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.
---
### Author:  [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [8 December 2022 20:18 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/8 "2022-12-08T20:18:20Z")
> [@HerrTuulik](#):
>
> The main limitations are:
>
> - it is not possible to nest subflows
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...
---
### Author:  [@HerrTuulik](https://discourse.nodered.org/u/HerrTuulik)
#### Post date: [8 December 2022 20:21 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/9 "2022-12-08T20:21:00Z")
I haven't found many other alternatives so i'll take what i can get. I'll give it a look. Thanks.
---
### Author:  [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [8 December 2022 20:25 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/10 "2022-12-08T20:25:41Z")
Can you describe the nesting you're trying to implement?
---
### Author:  [@HerrTuulik](https://discourse.nodered.org/u/HerrTuulik)
#### Post date: [8 December 2022 21:03 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/11 "2022-12-08T21:03:23Z")
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.
---
### Author:  [@tve](https://discourse.nodered.org/u/tve)
#### Post date: [8 December 2022 23:01 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/12 "2022-12-08T23:01:36Z")
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.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [8 December 2022 23:07 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/13 "2022-12-08T23:07:23Z")
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)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uibuilder.module?id=dynamic-data-driven-html-content-1).
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.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [7 January 2023 23:08 UTC](https://discourse.nodered.org/t/issue-with-dashboard-ui-generating-ui-elements-with-subflows/71862/14 "2023-01-07T23:08:00Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.