Checkbox in template node

[karlbo]

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

[davidcgu]

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

[zenofmud]

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

[davidcgu]

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

[karlbo]

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

[karlbo]

@zenofmud will post sample flow tomorrow.

[karlbo]

@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

[zenofmud]

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.

[karlbo]

@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

[karlbo]

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