# Nodered 4 beta and Dashboard 2 subflow with ui elements

**URL:** <https://discourse.nodered.org/t/nodered-4-beta-and-dashboard-2-subflow-with-ui-elements/88100>\
**Category:** Dashboard\
**Created:** [19 May 2024 13:42 UTC](https://discourse.nodered.org/t/nodered-4-beta-and-dashboard-2-subflow-with-ui-elements/88100 "2024-05-19T13:42:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RedTom](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/redtom/32/88014_2.png) [@RedTom](https://discourse.nodered.org/u/RedTom)\
**Post date:** [19 May 2024 13:42 UTC](https://discourse.nodered.org/t/nodered-4-beta-and-dashboard-2-subflow-with-ui-elements/88100/1 "2024-05-19T13:42:20Z")

</div>

Hi,

i needed some time to find out how to setup ui elements in subflows  
and using environment variable to setup the instances (ui group and e.g. label)

maybe this helps others

create subflow  
edit subflow properties  
add environment variable  
expand view of variable with „\>“  
enter label e.g „Group“  
select input type „config node“ (left dropdown)  
select „ui-group“ (right dropdown)

![Screenshot-subflow-properties](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d59515a0a19d0c59f8b44db4ecdc111e9421b70.jpeg)

add a text node into subflow  
set Group and label

 ![Screenshot-sublow-textnode-properties](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b3800e36fe4e170d80c4b8741484f3732d30da99.jpeg)

add instance of subflow to main flow  
and set ui-group and label for this instance

![Screenshot-subflow-instance-properties](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4de63b85df8df4c6e83024f9f47c91cf6de95737.jpeg)

example flow

```auto
[
    {
        "id": "e8ca8049cd496ea3",
        "type": "subflow",
        "name": "Subflow Test",
        "info": "",
        "category": "",
        "in": [
            {
                "x": 360,
                "y": 120,
                "wires": [
                    {
                        "id": "2532ec4ca4c88878"
                    }
                ]
            }
        ],
        "out": [],
        "env": [
            {
                "name": "Group",
                "type": "ui-group",
                "value": "",
                "ui": {
                    "type": "conf-types"
                }
            },
            {
                "name": "label",
                "type": "str",
                "value": ""
            }
        ],
        "meta": {},
        "color": "#DDAA99"
    },
    {
        "id": "2532ec4ca4c88878",
        "type": "ui-text",
        "z": "e8ca8049cd496ea3",
        "group": "${Group}",
        "order": 0,
        "width": 0,
        "height": 0,
        "name": "",
        "label": "${label}",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "className": "",
        "x": 520,
        "y": 120,
        "wires": []
    },
    {
        "id": "acc817798721e82c",
        "type": "tab",
        "label": "main Flow",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "e80183e7a5a3314f",
        "type": "subflow:e8ca8049cd496ea3",
        "z": "acc817798721e82c",
        "name": "",
        "env": [
            {
                "name": "Group",
                "value": "0789716f7ee3c76d",
                "type": "conf-type"
            },
            {
                "name": "label",
                "value": "textlabel 1",
                "type": "str"
            }
        ],
        "x": 270,
        "y": 120,
        "wires": []
    },
    {
        "id": "c25723148517697e",
        "type": "subflow:e8ca8049cd496ea3",
        "z": "acc817798721e82c",
        "name": "",
        "env": [
            {
                "name": "Group",
                "value": "04d9338bfa8cb2c4",
                "type": "conf-type"
            },
            {
                "name": "label",
                "value": "textlabel 2",
                "type": "str"
            }
        ],
        "x": 270,
        "y": 200,
        "wires": []
    }
]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 June 2024 13:42 UTC](https://discourse.nodered.org/t/nodered-4-beta-and-dashboard-2-subflow-with-ui-elements/88100/2 "2024-06-18T13:42:33Z")

</div>

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