Collapse/expand (open/close) group via ui_control

Dashboard
1

Hi,
I'm trying to use the newly added function (since dashboard version 2.20.0) to expand/collapse groups via open/close command with the similar syntax as used for show/hide.
(according to this post: https://discourse.nodered.org/t/collapse-group-using-ui-control/21997/5)

unfortunately it doesnt work for me.

hide/show is working with the JSON expression:

{"group":{"hide":["GER_ECH_E4-1.1"]}}

but open/close isnt working with:

{"group":{"close":["GER_ECH_E4-1.1"]}}

Any ideas? The help of the ui_control node doesnt mention the open/close feature, yet.

Following you can find a flow with an comparison of both (hide/show vs open/close)

 [
    {
        "id": "4aadf706.9cd248",
        "type": "function",
        "z": "d77ce098.e6c78",
        "name": "open / close",
        "func": "var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"close\": [\n            \"GER_ECH_E4-1.1\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"open\": [\n                \"GER_ECH_E4-1.1\"\n            ]\n        }}}  \n} \n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 2810,
        "y": 1620,
        "wires": [
            [
                "cf96440f.77d3f8"
            ]
        ]
    },
    {
        "id": "cf96440f.77d3f8",
        "type": "ui_ui_control",
        "z": "d77ce098.e6c78",
        "name": "",
        "events": "all",
        "x": 3200,
        "y": 1640,
        "wires": [
            []
        ]
    },
    {
        "id": "3ad49f49.3bef6",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 2590,
        "y": 1580,
        "wires": [
            [
                "4aadf706.9cd248"
            ]
        ]
    },
    {
        "id": "15821998.6f3486",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 2590,
        "y": 1620,
        "wires": [
            [
                "4aadf706.9cd248"
            ]
        ]
    },
    {
        "id": "4f957eae.6cdd2",
        "type": "function",
        "z": "d77ce098.e6c78",
        "name": "show / hide",
        "func": "var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"hide\": [\n            \"GER_ECH_E4-1.1\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"show\": [\n                \"GER_ECH_E4-1.1\"\n            ]\n        }}}  \n} \n\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "x": 2810,
        "y": 1680,
        "wires": [
            [
                "cf96440f.77d3f8"
            ]
        ]
    },
    {
        "id": "be94e4da.4d6ca8",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "1",
        "payloadType": "num",
        "x": 2590,
        "y": 1680,
        "wires": [
            [
                "4f957eae.6cdd2"
            ]
        ]
    },
    {
        "id": "48d0e960.f6d2c8",
        "type": "inject",
        "z": "d77ce098.e6c78",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "0",
        "payloadType": "num",
        "x": 2590,
        "y": 1720,
        "wires": [
            [
                "4f957eae.6cdd2"
            ]
        ]
    }
]

Node-Red V1.2.2
Dashboard V2.24.0

Thanks!
Marco

2

No idea?? Anyone??

3

i try your flow with little change and it's working but with issue :

ScreenRecorderProject6
ScreenRecorderProject6908×764 3.88 MB

  • if you close the group before hide it , then you show it , it can not be open .
  • you have to let it open before hide it

image

[{"id":"3dadcb0.fb1fa36","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"nodeRedButton","order":0,"width":"0","height":"0","format":"<!DOCTYPE html>\n<html>\n    <head>\n        <style>\n            .button {\n                background-color: #086A87;\n                border: none;\n                color: white;\n                padding: 16px 32px;\n                text-align: center;\n                text-decoration: none;\n                font-size: 16px;\n                margin: 3px 1px;\n                cursor: pointer;\n                border-radius: 4px;\n            }\n            .button_over:hover {\n                background-color: #187A97;\n                color: white;\n            }\n        </style>\n    </head>\n    <body>\n        <a href=\"https://nodered.org/\" target=\"_blank\" class=\"button button_over\">Node-Red Home</a>\n    </body>\n </html>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":1580,"wires":[["b698ed46.36f2a"]]},{"id":"9a129cc4.88c6d","type":"ui_button","z":"891d9857.40c7e8","name":"","group":"1d5d2d12.f1a4b3","order":0,"width":"0","height":"0","passthru":false,"label":"simpleButton","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":260,"y":1620,"wires":[[]]},{"id":"d448649b.2c87f8","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"youtube","order":0,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n<body>\n <iframe width=\"540\" height=\"400\"\nsrc=\"https://www.youtube.com/embed/Fl61uiyRQdM\">\n</iframe> \n</body>\n</html>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":90,"y":1610,"wires":[[]]},{"id":"71910f5a.de751","type":"comment","z":"891d9857.40c7e8","name":"========================== html button ==============================","info":"bouton perso et clic vers site web\n+ iframe d'une video youtube","x":300,"y":1540,"wires":[]},{"id":"947f0972.106f98","type":"function","z":"891d9857.40c7e8","name":"open / close","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"close\": [\n            \"testGroupOpenClose_myHtmlCodeExample\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"open\": [\n                \"testGroupOpenClose_myHtmlCodeExample\"\n            ]\n        }}}  \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1710,"wires":[["3af2f2a8.e10d5e"]]},{"id":"3af2f2a8.e10d5e","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"change","x":390,"y":1750,"wires":[[]]},{"id":"4a32a1ca.33e81","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1690,"wires":[["947f0972.106f98"]]},{"id":"252ab6ac.b090ba","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1730,"wires":[["947f0972.106f98"]]},{"id":"f8235f2e.7edc3","type":"function","z":"891d9857.40c7e8","name":"show / hide","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"hide\": [\n            \"testGroupOpenClose_myHtmlCodeExample\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"show\": [\n                \"testGroupOpenClose_myHtmlCodeExample\"\n            ]\n        }}}  \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1790,"wires":[["3af2f2a8.e10d5e"]]},{"id":"659fc171.c6ecd","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1770,"wires":[["f8235f2e.7edc3"]]},{"id":"fdcb725.b0f2b9","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1810,"wires":[["f8235f2e.7edc3"]]},{"id":"b698ed46.36f2a","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"all","x":260,"y":1580,"wires":[["287088db.0cb3a8"]]},{"id":"287088db.0cb3a8","type":"debug","z":"891d9857.40c7e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":380,"y":1580,"wires":[]},{"id":"4e669598.5ef6dc","type":"ui_group","name":"myHtmlCodeExample","tab":"cf789d38.b69fa","order":1,"disp":true,"width":"10","collapse":true},{"id":"1d5d2d12.f1a4b3","type":"ui_group","name":"nothingGroup","tab":"cf789d38.b69fa","order":2,"disp":true,"width":"8","collapse":true},{"id":"cf789d38.b69fa","type":"ui_tab","name":"testGroupOpenClose","icon":"face","order":14,"disabled":false,"hidden":false}]

@dceejay i use the last Dashboard v2.24.1 (i clean cache after updating)

4

feel free to raise an issue with the failing test case.

5

i will :wink:

6

Thanks for your input.

After your post, I tried it the same way and it wasnt working.
then I renamed my groups and found out it, is not working as long as there is a dot(.) in the group name.

so after renaming the groups is working as long as I first open/close (expand/collapse) the group manually on the UI.

7

Yes, as long as we don't hide the group, it works normally (while waiting for a next fix)

8

normally??

If I open a session to the UI via my browser the fist time, I've to manually open/close it once on the UI and then it ist also working via the editor (ui_control).
If I dont open/close it manually on the UI once the commands via ui_control arent working.

but thanks anyway..

9

Try to set your group size from Auto to 10 for example. For me it always works after this change (which will soon be corrected if the setting is on Auto).

[{"id":"3dadcb0.fb1fa36","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"nodeRedButton","order":1,"width":10,"height":"2","format":"<!DOCTYPE html>\n<html>\n        <style>\n            .button {\n                background-color: #086A87;\n                border: none;\n                color: white;\n                padding: 16px 32px;\n                text-align: center;\n                text-decoration: none;\n                font-size: 16px;\n                margin: 3px 1px;\n                cursor: pointer;\n                border-radius: 4px;\n            }\n            .button_over:hover {\n                background-color: #187A97;\n                color: white;\n            }\n        </style>\n        <a href=\"https://nodered.org/\" target=\"_blank\" class=\"button button_over\">Node-Red Home</a>\n </html>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":110,"y":1580,"wires":[["b698ed46.36f2a"]]},{"id":"9a129cc4.88c6d","type":"ui_button","z":"891d9857.40c7e8","name":"","group":"1d5d2d12.f1a4b3","order":1,"width":0,"height":0,"passthru":false,"label":"simpleButton","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":100,"y":1640,"wires":[[]]},{"id":"d448649b.2c87f8","type":"ui_template","z":"891d9857.40c7e8","group":"4e669598.5ef6dc","name":"youtube","order":2,"width":10,"height":6,"format":"<!DOCTYPE html>\n<html>\n <iframe width=\"540\" height=\"400\"\nsrc=\"https://www.youtube.com/embed/ksGeUD26Mw0?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6\">\n</iframe> \n</html>\n\n<!--\n\n<iframe width=\"725\" height=\"408\" src=\"https://www.youtube.com/embed/ksGeUD26Mw0?list=PLyNBB9VCLmo1hyO-4fIZ08gqFcXBkHy-6\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\n-->","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":90,"y":1610,"wires":[[]]},{"id":"947f0972.106f98","type":"function","z":"891d9857.40c7e8","name":"open / close","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"close\": [\n            \"testGroupOpenClose_myHtmlCodeExample\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"open\": [\n                \"testGroupOpenClose_myHtmlCodeExample\"\n            ]\n        }}}  \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1710,"wires":[["3af2f2a8.e10d5e"]]},{"id":"3af2f2a8.e10d5e","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"change","x":390,"y":1750,"wires":[[]]},{"id":"4a32a1ca.33e81","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1690,"wires":[["947f0972.106f98"]]},{"id":"252ab6ac.b090ba","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1730,"wires":[["947f0972.106f98"]]},{"id":"f8235f2e.7edc3","type":"function","z":"891d9857.40c7e8","name":"show / hide","func":"var load = msg.payload\nvar topic = msg.topic\n\n \nif (load === 0){\nmsg =\n    {\n    payload: {   \n    \"group\": {\n        \"hide\": [\n            \"testGroupOpenClose_myHtmlCodeExample\"   \n            ]\n        }}}\n}\nif (load === 1){\n  msg =\n    {\n    payload: {   \n        \"group\": {\n            \"show\": [\n                \"testGroupOpenClose_myHtmlCodeExample\"\n            ]\n        }}}  \n} \n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":220,"y":1790,"wires":[["3af2f2a8.e10d5e"]]},{"id":"659fc171.c6ecd","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":80,"y":1770,"wires":[["f8235f2e.7edc3"]]},{"id":"fdcb725.b0f2b9","type":"inject","z":"891d9857.40c7e8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":80,"y":1810,"wires":[["f8235f2e.7edc3"]]},{"id":"b698ed46.36f2a","type":"ui_ui_control","z":"891d9857.40c7e8","name":"","events":"all","x":260,"y":1580,"wires":[["287088db.0cb3a8"]]},{"id":"287088db.0cb3a8","type":"debug","z":"891d9857.40c7e8","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":380,"y":1580,"wires":[]},{"id":"4e669598.5ef6dc","type":"ui_group","name":"myHtmlCodeExample","tab":"cf789d38.b69fa","order":1,"disp":true,"width":"10","collapse":true},{"id":"1d5d2d12.f1a4b3","type":"ui_group","name":"nothingGroup","tab":"cf789d38.b69fa","order":2,"disp":true,"width":"10","collapse":true},{"id":"cf789d38.b69fa","type":"ui_tab","name":"testGroupOpenClose","icon":"face","order":14,"disabled":false,"hidden":false}]
10

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