Nodered 4 beta and Dashboard 2 subflow with ui elements

[RedTom]

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)

add a text node into subflow
set Group and label

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

example flow

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