Visibility of individual elements based on dropdown

Dashboard
1

Hello!

I am working on a project in Node-RED (latest version) Dashboard 2.0 (from flowfuse) and I am running into a problem.

I would like to be able to turn the visibility of individual elements (such as text fields or buttons) on or off, for example based on a dropdown selection. But it seems that you can only hide or show entire groups or pages.

Is it possible to hide or show individual elements, and if so, how do I do that?

Thanks in advance for your help!

2

It is very easy to do so if you use templates define the UI objects in Vue or HTML, and then manipulate in the script area of the template

If you want to use the core stock UI nodes, then use ui_update messages with appropriate CSS.

3

Thanks for your response!
I can do something with this.
Can I also find an example flow somewhere?

4

Here is an example to show/hide a button from a selection list, in both methods

    {
        "id": "c410ff3cd747e1fa",
        "type": "ui-button",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "name": "button-1",
        "label": "Button-1",
        "order": 2,
        "width": "2",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 480,
        "y": 520,
        "wires": [
            []
        ]
    },
    {
        "id": "fe7ea034bcab2c8d",
        "type": "ui-template",
        "z": "c13589f7d02d4ffe",
        "group": "",
        "page": "c81900ecf6761ebb",
        "ui": "",
        "name": "Button-1 classes",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".omri-hide {\n    visibility:hidden !important;\n}\n.omri-show {\n    visibility:visible !important;\n}\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "page:style",
        "className": "",
        "x": 210,
        "y": 480,
        "wires": [
            []
        ]
    },
    {
        "id": "5a9e54d33537ae7d",
        "type": "ui-template",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "page": "",
        "ui": "",
        "name": "Hide with Template",
        "order": 4,
        "width": "8",
        "height": "3",
        "head": "",
        "format": "<template>\n    <div>\n        <br>\n        <select id=\"visibilityStatus\" class=\"selection-class\" onChange=\"showHide()\" value=\"show\">\n            <option value='show'>Show</option>\n            <option value='hide'>Hide</option>\n        </select>\n        <button class=\"button-class\" id=\"button-2\">Button-2</button>\n    </div>\n</template>\n<script type=\"text/javascript\" src=\"/NR_WebRoot/tabulator-tables/dist/js/tabulator.min.js\"></script>\n\n<script>\nwindow.showHide = function() {\n    const btn = document.getElementById(\"button-2\");\n    const sel = document.getElementById(\"visibilityStatus\");\n    const selIndex = sel.selectedIndex;\n    if (sel.options[selIndex].value === \"hide\")\n        btn.style.visibility = \"hidden\";\n    else\n        btn.style.visibility = \"visible\";}\n</script>\n\n<style>\n    .selection-class {\n        border: 1px solid black;\n        padding:10px;\n    }\n    .button-class {\n    background:#009999;\n    color:white;\n    width:150px;\n    padding:10px;\n    margin-left:10px;\n    border-radius: 4px;\n    }\n</style>\n",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 210,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "dc74881d4ba3f647",
        "type": "ui-dropdown",
        "z": "c13589f7d02d4ffe",
        "group": "be4cdfe0774dbbc6",
        "name": "",
        "label": "Show/Hide-1",
        "tooltip": "",
        "order": 1,
        "width": "2",
        "height": "1",
        "passthru": false,
        "multiple": false,
        "chips": false,
        "clearable": false,
        "options": [
            {
                "label": "Show",
                "value": "omri-show",
                "type": "str"
            },
            {
                "label": "hide",
                "value": "omri-hide",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "topic",
        "topicType": "msg",
        "className": "",
        "typeIsComboBox": true,
        "msgTrigger": "onChange",
        "x": 190,
        "y": 520,
        "wires": [
            [
                "a6f79843990993b6"
            ]
        ]
    },
    {
        "id": "a6f79843990993b6",
        "type": "function",
        "z": "c13589f7d02d4ffe",
        "name": "function 4",
        "func": "msg.ui_update = {\n        class: msg.payload\n    };\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 340,
        "y": 520,
        "wires": [
            [
                "c410ff3cd747e1fa"
            ]
        ]
    },
    {
        "id": "be4cdfe0774dbbc6",
        "type": "ui-group",
        "name": "Group 1",
        "page": "c81900ecf6761ebb",
        "width": "4",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "c81900ecf6761ebb",
        "type": "ui-page",
        "name": "Test",
        "ui": "b7fd8a2cce8052cc",
        "path": "/test",
        "icon": "home",
        "layout": "grid",
        "theme": "b7b1935fbb33bbc8",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "b7fd8a2cce8052cc",
        "type": "ui-base",
        "name": "ui7",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-dropdown",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "b7b1935fbb33bbc8",
        "type": "ui-theme",
        "name": "Default theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
5

Thank you very much! This is indeed the solution to the problem!

6

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