# How to make the checkBox working?

**URL:** <https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951>\
**Category:** Dashboard\
**Created:** [27 February 2024 10:42 UTC](https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951 "2024-02-27T10:42:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![JanIwnl](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@JanIwnl](https://discourse.nodered.org/u/JanIwnl)\
**Post date:** [27 February 2024 10:42 UTC](https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951/1 "2024-02-27T10:42:39Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0f15e58a31e0ece21c7e14e56b88067d769c1b2.png)  
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:

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

```

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [27 February 2024 11:02 UTC](https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951/2 "2024-02-27T11:02:41Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![JanIwnl](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@JanIwnl](https://discourse.nodered.org/u/JanIwnl)\
**Post date:** [27 February 2024 11:16 UTC](https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951/3 "2024-02-27T11:16:03Z")

</div>

Thank you, i found what i nedeed.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [12 March 2024 11:16 UTC](https://discourse.nodered.org/t/how-to-make-the-checkbox-working/85951/4 "2024-03-12T11:16:55Z")

</div>

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