Child Menu in nodered dashboard

How can we create a child menu in the node-red dashboard? In this picture, those ID11,12,13 are tab names. But I want to show a single ID in the menu and those 3 will be the child menu.
Is it possible using node-red dashboard?

sidebar

Have a look at this example.

@Paul-Reed @BartButenaers , After going through documents of ui-contextmeu here, I have created menu and sub menu like this.

image

I need to add below changes for my dashboard.

  1. When I click any of the menu or sub menu, it disappears from my node read dashboard.
  2. Instead of hovering, I am expecting that when I click a menu and then only the sub menu will be displayed.

Please provide your suggestions.

@Talkatoo,

The node-red-contrib-ui-contextmenu node is based on the contextmenujs library from Dan Saul. However he has removed the library from Github already a few years ago. So there won't be any updates anymore...

The contextmenu node contains an old version of that library, and you can see (here in its css file) the sub-menu items (which are li elements) become visible when hoovering the parent menu item.

However I am not a css specialist. So I am not going to change that css to make it adjustable (from the node's config screen) whether the child menu items should open at hoovering or clicking the parent menu item. But if you (or someone else with css knowledge) want to create a pull request, please be my guest! Of course the current way of working (with hoovering) should still be functional.

Bart

Does it 'disappear' because you have navigated to a different dashboard tab?
If so, that's expected, as you need to install a ui-context node for each menu location.
To avoid duplicating the menu config, save it to context, and allow all of the ui-context nodes to share the single context data (like in this example) .

@BartButenaers Thanks for info

@Paul-Reed , As per your suggestion, I have made like this ,

[
    {
        "id": "8aa048584367ab63",
        "type": "inject",
        "z": "e1fde12c.9db918",
        "name": "Inject menu",
        "props": [
            {
                "p": "menu",
                "v": "[{\"text\":\"Fermenter\",\"icon\":\"fa-button\",\"sub\":[{\"text\":\"Tank1\",\"icon\":\"fa-edit\",\"topic\":\"edit\",\"payload\":[1,2,3,4,5],\"payloadType\":\"JSON\",\"outputField\":\"editArray\"},{\"text\":\"Tank2\",\"icon\":\"fa-cut\",\"enabled\":true,\"topic\":\"cut\",\"payload\":\"true\",\"payloadType\":\"bool\"}]},{\"text\":\"---\"},{\"text\":\"Bright Brine\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"BBT Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"BBT Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Hot Water\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Hot Water Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Hot Water Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Laugtering & Mashing\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Laugtering Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Laugtering Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Brew Kettle\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Brew Kettle Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Brew Kettle Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Chill Brine\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Chill Brine Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Chill Brine Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"RO Tank\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"RO Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"RO Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"---\"}]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 570,
        "y": 620,
        "wires": [
            [
                "657cfee2c0762166"
            ]
        ]
    },
    {
        "id": "657cfee2c0762166",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow",
                "dc": true
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 780,
        "y": 620,
        "wires": [
            [
                "d12b38b9080cae23"
            ]
        ]
    },
    {
        "id": "d12b38b9080cae23",
        "type": "ui_context_menu",
        "z": "e1fde12c.9db918",
        "group": "42bf18c96b5ef14e",
        "order": 5,
        "width": 0,
        "height": -1,
        "fontSize": 16,
        "inputPositionXField": "position.x",
        "inputPositionXType": "msg",
        "inputPositionYField": "position.y",
        "inputPositionYType": "msg",
        "outputField": "payload",
        "inputMenuField": "menu",
        "inputMenuType": "msg",
        "menuItems": [],
        "colors": "theme",
        "textColor": "#000000",
        "backgroundColor": "#ffffff",
        "borderColor": "#626262",
        "intervalLength": "0",
        "intervalUnit": "secs",
        "startTimerAtOpen": false,
        "startTimerAtLeave": true,
        "stopTimerAtEnter": true,
        "name": "",
        "x": 1000,
        "y": 620,
        "wires": [
            [
                "0cbb9bac216b12bc"
            ]
        ]
    },
    {
        "id": "0cbb9bac216b12bc",
        "type": "debug",
        "z": "e1fde12c.9db918",
        "name": "debug 31",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1240,
        "y": 620,
        "wires": []
    },
    {
        "id": "42bf18c96b5ef14e",
        "type": "ui_group",
        "name": "Tank1",
        "tab": "c07e0049.90e8a",
        "order": 1,
        "disp": true,
        "width": 20,
        "collapse": false,
        "className": ""
    },
    {
        "id": "c07e0049.90e8a",
        "type": "ui_tab",
        "name": "Lautering_Mashing_Tank",
        "icon": "dashboard",
        "order": 19,
        "disabled": false,
        "hidden": false
    }
]

But still it is disappearing.

Your flow...

  • is not saving the object to context, so it could not be retrieved
  • doesn't included the position.y & position.x in the change node
  • is missing a ui-control node
  • has defined the msg.menu payloadType as a number instead of a string
  • the msg.menu payload's are all set as 12, instead of the respective name of the dashboard tab that should be opened

example

I've corrected most of the above in this flow, but you now need to change all of the other payload's & payloadType's in your context object, to str and the name of the tab that it should then be directed to.

[{"id":"8aa048584367ab63","type":"inject","z":"f19cb5c2277da725","name":"Inject menu","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"text\":\"Fermenter\",\"icon\":\"fa-button\",\"sub\":[{\"text\":\"Tank1\",\"icon\":\"fa-edit\",\"topic\":\"edit\",\"payload\":[1,2,3,4,5],\"payloadType\":\"JSON\",\"outputField\":\"editArray\"},{\"text\":\"Tank2\",\"icon\":\"fa-cut\",\"enabled\":true,\"topic\":\"cut\",\"payload\":\"true\",\"payloadType\":\"bool\"}]},{\"text\":\"---\"},{\"text\":\"Bright Brine\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"BBT Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"BBT Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Hot Water\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Hot Water Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Hot Water Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Laugtering & Mashing\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Laugtering Tank1\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank1\",\"payloadType\":\"str\"},{\"text\":\"Laugtering Tank2\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank2\",\"payloadType\":\"str\"}]},{\"text\":\"Brew Kettle\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Brew Kettle Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Brew Kettle Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"Chill Brine\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"Chill Brine Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"Chill Brine Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"RO Tank\",\"icon\":\"fa-adobe\",\"sub\":[{\"text\":\"RO Tank1\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"},{\"text\":\"RO Tank2\",\"enabled\":true,\"payload\":\"12\",\"payloadType\":\"num\"}]},{\"text\":\"---\"}]","payloadType":"json","x":140,"y":85,"wires":[["56099b20abe38758"]]},{"id":"657cfee2c0762166","type":"change","z":"f19cb5c2277da725","name":"","rules":[{"t":"set","p":"menu","pt":"msg","to":"menu","tot":"flow"},{"t":"set","p":"position","pt":"msg","to":"{\"x\":100,\"y\":150}","tot":"json"},{"t":"set","p":"position.x","pt":"msg","to":"event.bbox[2]-9","tot":"jsonata"},{"t":"set","p":"position.y","pt":"msg","to":"event.bbox[3]+18","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":135,"wires":[["d12b38b9080cae23"]]},{"id":"d12b38b9080cae23","type":"ui_context_menu","z":"f19cb5c2277da725","group":"42bf18c96b5ef14e","order":5,"width":0,"height":-1,"fontSize":16,"inputPositionXField":"position.x","inputPositionXType":"msg","inputPositionYField":"position.y","inputPositionYType":"msg","outputField":"payload","inputMenuField":"menu","inputMenuType":"msg","menuItems":[],"colors":"theme","textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#626262","intervalLength":"0","intervalUnit":"secs","startTimerAtOpen":false,"startTimerAtLeave":true,"stopTimerAtEnter":true,"name":"","x":470,"y":135,"wires":[["09f23bab5f034b33"]]},{"id":"56099b20abe38758","type":"change","z":"f19cb5c2277da725","name":"","rules":[{"t":"set","p":"menu","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":335,"y":85,"wires":[[]]},{"id":"4c448194718b064b","type":"ui_button","z":"f19cb5c2277da725","name":"","group":"42bf18c96b5ef14e","order":11,"width":"1","height":"1","passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-bars","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":130,"y":135,"wires":[["657cfee2c0762166"]]},{"id":"09f23bab5f034b33","type":"ui_ui_control","z":"f19cb5c2277da725","name":"","events":"change","x":640,"y":135,"wires":[[]]},{"id":"42bf18c96b5ef14e","type":"ui_group","name":"Tank1","tab":"c07e0049.90e8a","order":1,"disp":true,"width":20,"collapse":false,"className":""},{"id":"c07e0049.90e8a","type":"ui_tab","name":"Lautering_Mashing_Tank","icon":"dashboard","order":19,"disabled":false,"hidden":false}]

@Paul-Reed . Thanks for your help.
I have changed my code as per your feedback.
Instead of clicking the button and then displaying a list of tanks. I need to display the list of tanks as the main menu and don't want it to be a sub menu.

Is there any workaround is available for it ?

The menu hierarchy is fully configurable, just spend a bit of time looking at the structure of msg.menu, and change it to however you want.

Ok.. I modified by like this,

    {
        "id": "71fd6ef73c6b07a2",
        "type": "ui_context_menu",
        "z": "e1fde12c.9db918",
        "group": "42bf18c96b5ef14e",
        "order": 43,
        "width": 5,
        "height": 1,
        "fontSize": 16,
        "inputPositionXField": "position.x",
        "inputPositionXType": "msg",
        "inputPositionYField": "position.y",
        "inputPositionYType": "msg",
        "outputField": "payload",
        "inputMenuField": "menu",
        "inputMenuType": "msg",
        "menuItems": [],
        "colors": "theme",
        "textColor": "#000000",
        "backgroundColor": "#ffffff",
        "borderColor": "#626262",
        "intervalLength": "0",
        "intervalUnit": "secs",
        "startTimerAtOpen": false,
        "startTimerAtLeave": true,
        "stopTimerAtEnter": true,
        "name": "",
        "x": 740,
        "y": 1400,
        "wires": [
            [
                "0cb601c3612ee033"
            ]
        ]
    },
    {
        "id": "dce929bc5e53c329",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 1,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": " Fermentor",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 1300,
        "wires": [
            [
                "e95914cc0f51ca9d"
            ]
        ]
    },
    {
        "id": "0cb601c3612ee033",
        "type": "ui_ui_control",
        "z": "e1fde12c.9db918",
        "name": "",
        "events": "change",
        "x": 940,
        "y": 1400,
        "wires": [
            []
        ]
    },
    {
        "id": "51311e3778238645",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 5,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "BBT  Tank",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 100,
        "y": 1360,
        "wires": [
            [
                "695cc9f5846d57e6"
            ]
        ]
    },
    {
        "id": "9be0231e54b7de56",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 7,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "Hot Water ",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 100,
        "y": 1420,
        "wires": [
            [
                "f8c0f61a650895b1"
            ]
        ]
    },
    {
        "id": "56978eb2bf5d3517",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 480,
        "y": 1360,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "7a6ff531f4355344",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 480,
        "y": 1420,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "6c969ae553db33d7",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 480,
        "y": 1300,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "f8c0f61a650895b1",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"Hot Water Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"Hot Water Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 280,
        "y": 1420,
        "wires": [
            [
                "7a6ff531f4355344"
            ]
        ]
    },
    {
        "id": "695cc9f5846d57e6",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"BBT Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"BBT Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 280,
        "y": 1360,
        "wires": [
            [
                "56978eb2bf5d3517"
            ]
        ]
    },
    {
        "id": "e95914cc0f51ca9d",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"Fermentor Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"Fermentor Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 280,
        "y": 1299,
        "wires": [
            [
                "6c969ae553db33d7"
            ]
        ]
    },
    {
        "id": "b60bb36f75a4f790",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 9,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "L & M Tank",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 110,
        "y": 1500,
        "wires": [
            [
                "c46a52fbe74e0f55"
            ]
        ]
    },
    {
        "id": "4f05f3f8dca721e1",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 480,
        "y": 1500,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "c46a52fbe74e0f55",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"Lautering_Mashing_Tank 1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"Lautering_Mashing_Tank 2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 280,
        "y": 1500,
        "wires": [
            [
                "4f05f3f8dca721e1"
            ]
        ]
    },
    {
        "id": "20bf471657f4cd1b",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 11,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "Brew Kettle",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 160,
        "y": 1603,
        "wires": [
            [
                "80104e6a0c88efc6"
            ]
        ]
    },
    {
        "id": "f87d7fb1820a2639",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 550,
        "y": 1603,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "80104e6a0c88efc6",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"Brew Kettle Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"Brew Kettle Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 350,
        "y": 1603,
        "wires": [
            [
                "f87d7fb1820a2639"
            ]
        ]
    },
    {
        "id": "2e1824e855082ddf",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 13,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "Chill Brine",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 130,
        "y": 1680,
        "wires": [
            [
                "b2cd0b5e817f23a2"
            ]
        ]
    },
    {
        "id": "168cfefcceaaa93b",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 520,
        "y": 1680,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "b2cd0b5e817f23a2",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"Chill Brine Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"Chill Brine Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 320,
        "y": 1680,
        "wires": [
            [
                "168cfefcceaaa93b"
            ]
        ]
    },
    {
        "id": "d2d07b9f3e694e93",
        "type": "ui_button",
        "z": "e1fde12c.9db918",
        "name": "",
        "group": "42bf18c96b5ef14e",
        "order": 16,
        "width": 3,
        "height": 1,
        "passthru": false,
        "label": "RO Water Tank",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "fa-bars",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 140,
        "y": 1780,
        "wires": [
            [
                "4b0199365f2718b7"
            ]
        ]
    },
    {
        "id": "dae79f62ef141593",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "msg",
                "to": "menu",
                "tot": "flow"
            },
            {
                "t": "set",
                "p": "position",
                "pt": "msg",
                "to": "{\"x\":100,\"y\":150}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "position.x",
                "pt": "msg",
                "to": "event.bbox[2]-1",
                "tot": "jsonata"
            },
            {
                "t": "set",
                "p": "position.y",
                "pt": "msg",
                "to": "event.bbox[3]+18",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 520,
        "y": 1780,
        "wires": [
            [
                "71fd6ef73c6b07a2"
            ]
        ]
    },
    {
        "id": "4b0199365f2718b7",
        "type": "change",
        "z": "e1fde12c.9db918",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "menu",
                "pt": "flow",
                "to": "[{\"text\":\"RO Water Tank1\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"},{\"text\":\"---\"},{\"text\":\"RO Water Tank2\",\"icon\":\"fa-adobe\",\"enabled\":true,\"payload\":\"Lautering_Mashing_Tank\",\"payloadType\":\"str\"}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 320,
        "y": 1780,
        "wires": [
            [
                "dae79f62ef141593"
            ]
        ]
    },
    {
        "id": "42bf18c96b5ef14e",
        "type": "ui_group",
        "name": "Tank1",
        "tab": "c07e0049.90e8a",
        "order": 1,
        "disp": true,
        "width": 24,
        "collapse": false,
        "className": ""
    },
    {
        "id": "c07e0049.90e8a",
        "type": "ui_tab",
        "name": "Lautering_Mashing_Tank",
        "icon": "dashboard",
        "order": 19,
        "disabled": false,
        "hidden": false
    }
]

image

Or. I need to use Fixed layout in msg.menu for listing the menus.

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