# Using an HTML form in a Dashboard Template node

**URL:** <https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114>\
**Category:** Dashboard\
**Created:** [11 May 2018 21:25 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114 "2018-05-11T21:25:12Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Grendel61](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grendel61/32/75_2.png) [@Grendel61](https://discourse.nodered.org/u/Grendel61)\
**Post date:** [11 May 2018 21:25 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/1 "2018-05-11T21:25:12Z")

</div>

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.

---

<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:** [29 May 2018 06:09 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/2 "2018-05-29T06:09:15Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Grendel61](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grendel61/32/75_2.png) [@Grendel61](https://discourse.nodered.org/u/Grendel61)\
**Post date:** [31 May 2018 14:01 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/3 "2018-05-31T14:01:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [31 May 2018 14:06 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/4 "2018-05-31T14:06:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Grendel61](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/grendel61/32/75_2.png) [@Grendel61](https://discourse.nodered.org/u/Grendel61)\
**Post date:** [31 May 2018 14:18 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/5 "2018-05-31T14:18:38Z")

</div>

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](https://discourse.nodered.org/t/cause-ui-template-node-to-reload/505?u=grendel61) related to this same component where I need to cause this component to reload when new data comes into the UI Template

Thanks again.

---

<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:** [1 June 2018 04:49 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/6 "2018-06-01T04:49:17Z")

</div>

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

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:** [1 June 2018 05:20 UTC](https://discourse.nodered.org/t/using-an-html-form-in-a-dashboard-template-node/114/7 "2018-06-01T05:20:23Z")

</div>

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

Karl

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

```