How to make the checkBox working?

Dashboard
1

Hello, i'm trying to implement a checkBox in my dashobard that is hidding some columns from my table when is checked. I'm using a dokker with v3.0.2.
So far i implemented the checkBox using an ui-template

image
image764×95 3.95 KB

What i don't know is to implement the functionality to this checkBox to work with the ui-table, the data is extracted from a database.
Here is an example flow:

[
    {
        "id": "bc2ad47b2722272a",
        "type": "ui_template",
        "z": "f3462e3d13b09243",
        "group": "6681fc5131a55311",
        "name": "",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "    <div id=\"details\" class=\"more-details\">\n        <input type=\"checkbox\" id=\"detailsPressed\" >\n        <label for=\"detailsPressed\">More Details</label>\n    </div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 340,
        "y": 820,
        "wires": [
            [
                "2e7540fb6f461b93"
            ]
        ]
    },
    {
        "id": "f20347666e2d831e",
        "type": "ui_table",
        "z": "f3462e3d13b09243",
        "group": "6681fc5131a55311",
        "name": "",
        "order": 4,
        "width": 8,
        "height": 5,
        "columns": [
            {
                "field": "From Where",
                "title": "From Where",
                "width": "7px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "ORDER",
                "title": "ORDER",
                "width": "17px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            },
            {
                "field": "LOCKED_COLUMN",
                "title": "LOCKED_COLUMN",
                "width": "14px",
                "align": "center",
                "formatter": "plaintext",
                "formatterParams": {
                    "target": "_blank"
                }
            }
        ],
        "outputs": 0,
        "cts": false,
        "x": 730,
        "y": 820,
        "wires": []
    },
    {
        "id": "2e7540fb6f461b93",
        "type": "ui_ui_control",
        "z": "f3462e3d13b09243",
        "name": "",
        "events": "all",
        "x": 520,
        "y": 820,
        "wires": [
            [
                "f20347666e2d831e"
            ]
        ]
    },
    {
        "id": "180d56652ed28516",
        "type": "function",
        "z": "f3462e3d13b09243",
        "name": "",
        "func": "\nlet data = msg.payload.items\nlet randuri = []\n\ndata.forEach(item => {\n    randuri.push({\n        \"From Where\": item[\"from where\"],\n        \"ORDER\": item[\"order\"],\n        \"LOCKED_COLUMN\": item[\"locked_column\"]\n    })\n});\n\nmsg.payload = randuri;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 440,
        "y": 720,
        "wires": [
            [
                "f20347666e2d831e"
            ]
        ]
    },
    {
        "id": "6681fc5131a55311",
        "type": "ui_group",
        "z": "f3462e3d13b09243",
        "name": "KLT Table",
        "tab": "abdf2904c6495f75",
        "order": 2,
        "disp": true,
        "width": 8,
        "collapse": false,
        "className": "header"
    },
    {
        "id": "abdf2904c6495f75",
        "type": "ui_tab",
        "name": "KLT Dashboard",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]
2

You can use a ui-button instead of a checkbox also.

This may help untested as you supplied no data, you will need to edit field names etc in function node.

There are many examples in
import > examples > ui-table

[{"id":"bc2ad47b2722272a","type":"ui_template","z":"d1395164b4eec73e","group":"6681fc5131a55311","name":"","order":3,"width":0,"height":0,"format":"    <div id=\"details\" class=\"more-details\">\n        <input ng-change=\"send({payload:mycheckbox})\" \n            type=\"checkbox\" id=\"detailsPressed\" \n            ng-model=\"mycheckbox\">\n        <label for=\"detailsPressed\">More Details</label>\n    </div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":7340,"wires":[["59d5336ba3f342e5","56f90faaf2aca9c8"]]},{"id":"f20347666e2d831e","type":"ui_table","z":"d1395164b4eec73e","group":"6681fc5131a55311","name":"","order":4,"width":8,"height":5,"columns":[{"field":"From Where","title":"From Where","width":"7px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"ORDER","title":"ORDER","width":"17px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}},{"field":"LOCKED_COLUMN","title":"LOCKED_COLUMN","width":"14px","align":"center","formatter":"plaintext","formatterParams":{"target":"_blank"}}],"outputs":0,"cts":false,"x":930,"y":7340,"wires":[]},{"id":"59d5336ba3f342e5","type":"debug","z":"d1395164b4eec73e","name":"debug 2481","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":710,"y":7380,"wires":[]},{"id":"56f90faaf2aca9c8","type":"function","z":"d1395164b4eec73e","name":"function 155","func":"msg.ui_control = {\n    tabulator: {\n        columns: [       \n            {\n                \"field\": \"id\",\n                \"title\": \"id\",\n                \"visible\": msg.payload,\n                \"formatter\": \"plainText\"\n            }\n        ]\n    }\n}\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":710,"y":7340,"wires":[["f20347666e2d831e"]]},{"id":"6681fc5131a55311","type":"ui_group","z":"d1395164b4eec73e","name":"KLT Table","tab":"abdf2904c6495f75","order":2,"disp":true,"width":8,"collapse":false,"className":"header"},{"id":"abdf2904c6495f75","type":"ui_tab","name":"KLT Dashboard","icon":"dashboard","disabled":false,"hidden":false}]
3

Thank you, i found what i nedeed.

4

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