# Checkbox in template node

**URL:** <https://discourse.nodered.org/t/checkbox-in-template-node/685>\
**Category:** Dashboard\
**Created:** [8 June 2018 04:41 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685 "2018-06-08T04:41:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [8 June 2018 04:41 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/1 "2018-06-08T04:41:17Z")

</div>

Hi there, i have added a checkbox in my editable table, and im successfully sending its status to mysql database via the msg.payload path.  
what i need now is for the checkbox status to be altered by data from mysql if it gets changed from say another page or so

{{x.intervall}} 

any idea where i can add the {{x.box1}} in the checkbox?

Best regards  
Karl

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [8 June 2018 09:43 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/2 "2018-06-08T09:43:42Z")

</div>

I you get some fancy way to do it let me know, I was trying to get a checkbox from monday to friday where you can choose one o several days and be also status updated in case is changed anywhere else change it or after restart and finally did it with switches because did not found any example on template that helps me considering my low knowledge, result from now was:

Any cases dropdwown or switch have capabilities up today to feed status in, checkbox standard node not

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/fc6ba7c344c86debc8055e3eeea0d18d5446ca67.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [8 June 2018 11:11 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/3 "2018-06-08T11:11:59Z")

</div>

@karlbo - can you supply your existing flow to be looked at?

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [8 June 2018 12:07 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/4 "2018-06-08T12:07:49Z")

</div>

There are standard dashboad switch nodes or drop down the only is that with the out of the switch I set a global variable, like this could be accesed at any flow, I set the status of the switch based on the input of this node and pull the status of the variable, like this if anywhere else the variable is changed the switch will also show the change.

You can make it more nice with a function node combining all the switches as an object for instance.

Regards

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [8 June 2018 12:42 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/5 "2018-06-08T12:42:26Z")

</div>

here is how i made it function

this one will follow the input from mysql, and update mysql provided you put a rbe node infront of the ui\_template node

Karl

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [10 June 2018 07:52 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/6 "2018-06-10T07:52:12Z")

</div>

@zenofmud will post sample flow tomorrow.

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [11 June 2018 05:11 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/7 "2018-06-11T05:11:09Z")

</div>

@zenofmud

`[{"id":"88193368.dd5cd","type":"inject","z":"de18d8cb.8dd2f8","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":281.0173645019531,"y":216.00000762939453,"wires":[["305d8483.926bac"]]},{"id":"305d8483.926bac","type":"function","z":"de18d8cb.8dd2f8","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"bbb\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},{ \"value1\": \"ccc\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":502.1840591430664,"y":217.0000581741333,"wires":[["1aef1ad8.bd9045"]]},{"id":"1aef1ad8.bd9045","type":"ui_template","z":"de18d8cb.8dd2f8","group":"90d32b18.7d9558","name":"Data-table","order":1,"width":"24","height":"5","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>value16</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\" tr ondblclick=\"myFunction(this)\">\n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td contenteditable=\"true\">{{row.value2}}</td>\n <td contenteditable=\"true\">{{row.value3}}</td>\n <td contenteditable=\"true\">{{row.value4}}</td>\n <td contenteditable=\"true\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td contenteditable=\"true\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td contenteditable=\"true\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td contenteditable=\"true\">{{row.value14}}</td>\n <td contenteditable=\"true\">{{row.value15}}</td>\n <td>\n<md-switch ng-model=\"valgt\" ng-change=\"send({payload : {valgt:valgt}})\" ng-checked=\"row.value16==='true'\" >\n </md-switch>\n</td> \n<td>\n <md-button tr ng-click=\"sendRow(row)\">Save</md-button>\n <!--md-button ng-click=\"send({payload: (row)})\">Save</md-button-->\n </tr>\n </tbody>\n</table>\n\n\n\n<script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n //$scope.send({ \"payload\": obj });\n //$scope.send({ \"payload\": (document.getElementById(\"table1\").click() });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerText) });\n };\n})(scope);\n</script>\n<script>\nfunction myFunction(x) {\n alert(document.getElementById(\"table1\").rows[x.rowIndex].innerText);\n}\n</script>\n\n\n<!--script>\n(function($scope) {\n $scope.sendRow = function(obj) {\n $scope.send({ \"payload\": obj });\n $scope.send({ \"payload\": (document.getElementById(\"table1\").rows[1].innerHTML) });\n };\n})(scope);\n</script-->","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":732.0173263549805,"y":213.00006484985352,"wires":[["4a939cbd.fb3b24"]]},{"id":"4a939cbd.fb3b24","type":"debug","z":"de18d8cb.8dd2f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1028.0172958374023,"y":187.0000123977661,"wires":[]},{"id":"90d32b18.7d9558","type":"ui_group","z":"","name":"Group 1","tab":"c62b1524.4771a8","order":1,"disp":true,"width":"24","collapse":false},{"id":"c62b1524.4771a8","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]`

here is my flow containing editable rows, tickswitch, and button  
i changed the alert to dblclick as it was annoying when it kept popping up every time i tried new code 🙂  
hope someone can help me with merging the myfunction and scope function  
Thanks

Best regards  
Karl

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [11 June 2018 18:31 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/8 "2018-06-11T18:31:58Z")

</div>

I hate to tell you but…  
If you change a value on the first row and click the save in that row, it returns the updated value  
But…  
If you change a value in the third row and press the save on the third row, it returns the first row.

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [11 June 2018 19:17 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/9 "2018-06-11T19:17:07Z")

</div>

@zenofmud  
you are absolutly right.  
and that is excactly my problem, i need it to dynamically choose the row i click on, same like the notify code does.  
ill work some more on it tomorrow, think i have it sorted now using $index in the angular ref

best regards  
Karl

---

<div class="post-metadata">

**Author:** ![karlbo](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/karlbo/32/68793_2.png) [@karlbo](https://discourse.nodered.org/u/karlbo)\
**Post date:** [12 June 2018 19:08 UTC](https://discourse.nodered.org/t/checkbox-in-template-node/685/10 "2018-06-12T19:08:36Z")

</div>

so here it is. editable and with switch.  
`[{"id":"d263c630.adfb28","type":"inject","z":"f215cc82.b4d88","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"2","x":228.0173568725586,"y":116.00001907348633,"wires":[["443e4019.c5163"]]},{"id":"443e4019.c5163","type":"function","z":"f215cc82.b4d88","name":"dummyarray","func":"var myArray =[{ \"value1\": \"aaa\", \"value2\": \"A\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"bbb\", \"value2\": \"B\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"ccc\", \"value2\": \"C\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"ddd\", \"value2\": \"D\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"eee\", \"value2\": \"E\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"},\n{ \"value1\": \"fff\", \"value2\": \"F\", \"value3\": \"bbb\",\n\"value6\": \"B\", \"value4\": \"ccc\", \"value5\": \"C\", \"value7\": \"aaa\", \"value8\": \"A\",\n\"value9\": \"bbb\",\"value10\": \"B\", \"value11\": \"ccc\", \"value12\": \"C\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":456.18408203125,"y":112.00007629394531,"wires":[["44ec155b.1f113c"]]},{"id":"44ec155b.1f113c","type":"ui_template","z":"f215cc82.b4d88","group":"524b6528.fbf1ec","name":"Data-table","order":1,"width":"24","height":"6","format":"<style>\n th {\n text-decoration: underline;\n }\n .numeric {\n text-align: right;\n padding-right: 15px;\n }\n</style>\n\n\n<table cellpadding=\"1\" border=\"1\" id=\"table1\" class=\"table-hover\" style=\"width: 100%;\">\n <thead>\n <tr>\n <th>value1</th> \n <th>value2</th>\n <th>value3</th>\n <th>value4</th>\n <th>value5</th>\n <th>value7</th>\n <th>value8</th>\n <th>value9</th>\n <th>value10</th>\n <th>value11</th>\n <th>value12</th>\n <th>value13</th>\n <th>value14</th>\n <th>value15</th>\n <th>value16</th>\n <th>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ondblclick=\"myFunction(this)\">\n \n <td class=\"numeric\" bgcolor=gray>{{row.value1}}</td>\n <td id=\"value2\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value2}}</td>\n <td id=\"value3\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value3}}</td>\n <td id=\"value4\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value4}}</td>\n <td id=\"value5\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value5}}</td>\n <td bgcolor=gray>{{row.value7}}</td>\n <td id=\"value8\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value8}}</td>\n <td bgcolor=gray>{{row.value9}}</td>\n <td bgcolor=gray>{{row.value10}}</td>\n <td id=\"value11\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value11}}</td>\n <td bgcolor=gray>{{row.value12}}</td>\n <td bgcolor=gray>{{row.value13}}</td>\n <td id=\"value14\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value14}}</td>\n <td id=\"value15\" contenteditable=\"true\" onclick = \"this.contentEditable = true;\">{{row.value15}}</td>\n <td>\n<md-switch aria-label=\"knapp\" ng-model=\"valgt\" ng-change=\"send({payload : {row:$index, enabled:valgt}})\" ng-checked=\"row.value16==='true'\" >\n </md-switch>\n</td> \n<td>\n <md-button tr ng-click=\"sendRow($index+1)\">save</md-button>\n </tr>\n </tbody>\n</table>\n\n\n\n<script>\n(function($scope) {\n$scope.sendRow = function(obj) {\n$scope.send({ \"payload\": (document.getElementById(\"table1\").rows[obj].innerText) });\n};\n})(scope);\n</script>\n\n<script>\nfunction myFunction(x) {\n alert(document.getElementById(\"table1\").rows[x.rowIndex].innerText);\n}\n</script>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":657.0172271728516,"y":116.0000991821289,"wires":[["21aa3aac.1fe4a6"]]},{"id":"524b6528.fbf1ec","type":"ui_group","z":"","name":"Group 1","tab":"dea6695d.1700f8","order":1,"disp":true,"width":"24","collapse":false},{"id":"dea6695d.1700f8","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":5}]`

Best regards  
Karl