Using an HTML form in a Dashboard Template node

Dashboard
1

Hi,

I’ve got an application where I need to pre-load a form so I can use it to edit existing data, or create new data. The Form node currently doesn’t provide an input.

As a result, my approach was to build an HTML form in a Template Node. I’ve got it done, pre-populating, and working. The Template node displays the form in the dashboard alongside other dashboard nodes.

Now I’m realizing I wasn’t thinking about how I was going to get the data into msg.payload on a SUBMIT. I’m thinking now that I shouldn’t have gone down this path, since I’m still trying to use the dashboard at this point.

Really what I wanted to do was simply pre-load the Form Node. Then take the results and use them to do the rest of my processing. I suppose I could use dashboard Text inputs instead of a form.

My question, is… Can someone help me figure out how to go from a custom HTML form inside the dashboard within a Template Node to data inside the msg object?

I’m kind of stumped?. Thanks in advance for your help.

1 Like
2

this is as close as you can get right now.
help me figure out the save function please

[{"id":"328a7269.1b93de","type":"ui_template","z":"48f8ead.7e90014","group":"1bdd63f2.633acc","name":"Data-table","order":3,"width":"24","height":"14","format":"<style>\n    th {\n        text-decoration: underline;\n    }\n    .numeric {\n        text-align: right;\n        padding-right: 15px;\n    }\n</style>\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>save</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\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\n    <md-button ng-click=\"sendRow(row)\">Set</md-button>\n        </tr>\n    </tbody>\n</table>\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":565.0173492431641,"y":546.0104064941406,"wires":[["fc73bfc8.3103e"]]},{"id":"1bdd63f2.633acc","type":"ui_group","z":"","name":"Grafer","tab":"1cbf6c09.5ae5d4","order":1,"disp":true,"width":"32","collapse":false},{"id":"1cbf6c09.5ae5d4","type":"ui_tab","z":"","name":"Statistikk/Log","icon":"dashboard","order":1}]
1 Like
3

I tried to paste your flow, but it had an error that wouldn’t allow it to be pasted.

I ended up going down this route from what I can see in your posting.

4

Have wrapped the flow in the previous post with ``` so it gets displayed properly and its quotes don’t get replaced with smart quotes - which breaks the JSON importing.

5

Nick,

Thanks for all your work on this. I actually went down this road almost exactly.

I actually built a very similar solution to your example a few days ago to create a table with rows that can be selected, and when selected push out a msg.payload. I’ve got a bunch of stuff in there for all the edge cases, but it works similarly to your example.

One difference was that I put the send on “tr”
<tr ng-repeat="option in msg.payload" ng-click="send({payload: option.value})">

Generally, this was spot on. I’ve posted a new question related to this same component where I need to cause this component to reload when new data comes into the UI Template

Thanks again.

6

Hi, did you actually get it to work so when you click the button it sends the edited value?

Karl

7

Here is another version im working on, however, now i cant even catch the injected values from mysql, let alone the edited values ;:slight_smile: this is really doing my head in.

Karl

[{"id":"767444a.f296fbc","type":"inject","z":"536107f9.eb5358","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":290.0173645019531,"y":684.0104370117188,"wires":[["55f33c7c.c0eb34"]]},{"id":"55f33c7c.c0eb34","type":"function","z":"536107f9.eb5358","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\": \"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\": \"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\"}];\nmsg.payload = myArray;\nreturn msg;","outputs":1,"noerr":0,"x":493.18408203125,"y":697.0104722976685,"wires":[["7933f1d5.93e56"]]},{"id":"7933f1d5.93e56","type":"ui_template","z":"536107f9.eb5358","group":"71c8d46f.362c8c","name":"Data-table","order":3,"width":"24","height":"14","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>save</th>\n </tr>\n </thead>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\" ng-dblclick=\"sendRow(row)\">\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\n <md-button ng-click=\"sendRow(row)\">Set</md-button>\n </tr>\n </tbody>\n</table>\n\n<script>\n(function($scope) {\n var array = [];\nvar table = document.querySelector(\"table tbody\");\nvar rows = table.children;\nfor (var i = 0; i < rows.length; i++) {\n\tvar fields = rows[i].children;\n var rowArray = [];\n for (var j = 0; j < fields.length; j++){\n rowArray.push(fields[j].innerHTML);\n }\n array.push(rowArray);\n} \n $scope.sendRow = function(obj) {\n$scope.send({ \"payload\": array });\n }; \n})(scope);\n</script>\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":700.0173568725586,"y":701.0104732513428,"wires":[["3cadbc3.fed4144"]]},{"id":"3cadbc3.fed4144","type":"debug","z":"536107f9.eb5358","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":929.0173416137695,"y":696.0104455947876,"wires":[]},{"id":"71c8d46f.362c8c","type":"ui_group","z":"","name":"Group 1","tab":"d8af7578.1019a8","order":1,"disp":true,"width":"32","collapse":false},{"id":"d8af7578.1019a8","type":"ui_tab","name":"Tab 6","icon":"dashboard","order":1}]