# Node-red dashboard ui template : How to update the value of ui template html label

**URL:** <https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035>\
**Category:** Dashboard\
**Created:** [3 March 2023 04:33 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035 "2023-03-03T04:33:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nightmareside15](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nightmareside15/32/56176_2.png) [@nightmareside15](https://discourse.nodered.org/u/nightmareside15)\
**Post date:** [3 March 2023 04:33 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/1 "2023-03-03T04:33:24Z")

</div>

Hello. Recently I tried to use ui template in addition to my usual dashboard feature, then I came across  
this material

> [@Dynamically display multiple output text nodes](https://discourse.nodered.org/t/dynamically-display-multiple-output-text-nodes/31014/2):
>
> You could do this all in html using the template a simple example [{"id":"9c0950b1.c61b1","type":"inject","z":"4484ee28.caa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"chart1","payload":"[\"text1\",\"text2\"]","payloadType":"json","x":140,"y":320,"wires":[["4bc18ffc.98da38"]]},{"id":"de1cd353.5326c","type":"inject","z":"4484ee28.caa3c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","cro…

(many thanks to @E1cid !!!)  
I tried to send a payload from the html back to node-red but it seems I don't know how to updates the value itself. The sent payload still send me "text1" which is the initial payload I sent to the html, even tho I have changed it to other string. Could someone tell me how to update those value? Many thanks!

```auto
[
    {
        "id": "9c0950b1.c61b1",
        "type": "inject",
        "z": "54a8ecc484312545",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "chart1",
        "payload": "[\"text1\"]",
        "payloadType": "json",
        "x": 180,
        "y": 620,
        "wires": [
            [
                "4bc18ffc.98da38"
            ]
        ]
    },
    {
        "id": "4bc18ffc.98da38",
        "type": "function",
        "z": "54a8ecc484312545",
        "name": "",
        "func": "var sendButton = \" <script> var value = document.getElementById(\\\"w0\\\").value; this.scope.action = function() { return value; } </script> <md-button ng-click= \\\"send({ payload: action() })\\\"> Click here to send the data </md-button>\"\n\n\n\nvar html = \"\";\nfor (var i in msg.payload){\n html = html + '<label for=\"w' + i + '\">A title ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\n\n\nmsg.template = html + sendButton ;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 450,
        "y": 680,
        "wires": [
            [
                "2b69d2df.753636",
                "2442314b13d75244"
            ]
        ]
    },
    {
        "id": "2b69d2df.753636",
        "type": "ui_template",
        "z": "54a8ecc484312545",
        "group": "165e1e1a.e752fa",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 630,
        "y": 680,
        "wires": [
            [
                "ea3caac460682f1b"
            ]
        ]
    },
    {
        "id": "2442314b13d75244",
        "type": "debug",
        "z": "54a8ecc484312545",
        "name": "debug 5",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "template",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 620,
        "y": 620,
        "wires": []
    },
    {
        "id": "ea3caac460682f1b",
        "type": "debug",
        "z": "54a8ecc484312545",
        "name": "debug 4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 820,
        "y": 680,
        "wires": []
    },
    {
        "id": "165e1e1a.e752fa",
        "type": "ui_group",
        "name": "Default",
        "tab": "f9b58883.fa613",
        "order": 1,
        "disp": true,
        "width": "12",
        "collapse": false
    },
    {
        "id": "f9b58883.fa613",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1,
        "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:** [3 March 2023 07:41 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/2 "2023-03-03T07:41:19Z")

</div>

Had a quick look, not got a lot of time this morning, but i will take a look this evening.

---

<div class="post-metadata">

**Author:** ![nightmareside15](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nightmareside15/32/56176_2.png) [@nightmareside15](https://discourse.nodered.org/u/nightmareside15)\
**Post date:** [4 March 2023 02:42 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/3 "2023-03-04T02:42:21Z")

</div>

Thank you! Im kinda confused on how this function work out lol

---

<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:** [4 March 2023 08:45 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/4 "2023-03-04T08:45:18Z")

</div>

Made some slight changes in the button and deselected two opitions in the template config.  
This is sending for me

```auto
[{"id":"9c0950b1.c61b1","type":"inject","z":"eb90474bf03634f2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"chart1","payload":"[\"text1\"]","payloadType":"json","x":120,"y":120,"wires":[["4bc18ffc.98da38"]]},{"id":"4bc18ffc.98da38","type":"function","z":"eb90474bf03634f2","name":"","func":"var sendButton = '<script> this.scope.action = function() {var value = document.getElementById(\"w0\").value; return value; } </script> <md-button ng-click=\"send({ payload: action() })\"> Click here to send the data </md-button>'\n\n\n\nvar html = \"\";\nfor (var i in msg.payload){\n html += '<label for=\"w' + i + '\">A title ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\n\n\nmsg.template = html + sendButton ;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":180,"wires":[["2b69d2df.753636","2442314b13d75244"]]},{"id":"2b69d2df.753636","type":"ui_template","z":"eb90474bf03634f2","group":"165e1e1a.e752fa","name":"","order":2,"width":0,"height":0,"format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":570,"y":180,"wires":[["ea3caac460682f1b"]]},{"id":"2442314b13d75244","type":"debug","z":"eb90474bf03634f2","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"template","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":120,"wires":[]},{"id":"ea3caac460682f1b","type":"debug","z":"eb90474bf03634f2","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":760,"y":180,"wires":[]},{"id":"165e1e1a.e752fa","type":"ui_group","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

[edit] Miss read question.  
your issue is the getElementById() is not inside the callback function. Edited example above.

---

<div class="post-metadata">

**Author:** ![nightmareside15](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nightmareside15/32/56176_2.png) [@nightmareside15](https://discourse.nodered.org/u/nightmareside15)\
**Post date:** [6 March 2023 01:01 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/5 "2023-03-06T01:01:52Z")

</div>

Thanks! That solve everything! I'm sorry but, could you also tell me how to include two tab contents in the payload ? I tried to use document.querySelectorAll() to include both w0 and w1 for example but the payload give me unidentified payload. I might be missing something.

the flow i've tried :

`[{ "id": "2b69d2df.753636", "type": "ui_template", "z": "58de72f1d81d5e3d", "group": "165e1e1a.e752fa", "name": "", "order": 1, "width": 0, "height": 0, "format": "", "storeOutMessages": false, "fwdInMessages": false, "resendOnRefresh": true, "templateScope": "local", "className": "", "x": 920, "y": 260, "wires": [ [ "ea3caac460682f1b"] ] }, { "id": "ea3caac460682f1b", "type": "debug", "z": "58de72f1d81d5e3d", "name": "debug 4", "active": true, "tosidebar": true, "console": false, "tostatus": false, "complete": "false", "statusVal": "", "statusType": "auto", "x": 1120, "y": 140, "wires": [] }, { "id": "4b876e71e6de9cde", "type": "inject", "z": "58de72f1d81d5e3d", "name": "", "props": [{ "p": "payload" }, { "p": "topic", "vt": "str" }], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "chart1", "payload": "[\"text1\", \"text2\"]", "payloadType": "json", "x": 380, "y": 260, "wires": [[ "d9ade26944d4ae16"] ] }, { "id": "d9ade26944d4ae16", "type": "function", "z": "58de72f1d81d5e3d", "name": "", "func": "var sendButton = '<script> this.scope.action = function() {var value = document.querySelector(\"#w1\").value; return value; } </script> <md-button ng-click=\"send({ payload: action() })\"> Click here to send the data </md-button>'\n\n\n\nvar html = \"\";\nfor (var i in msg.payload){\n html += '<label for=\"w' + i + '\">Kolom ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\n\n\nmsg.template = html + sendButton ;\nreturn msg;", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 600, "y": 260, "wires": [[ "2b69d2df.753636"] ] }, { "id": "fa1ebd61fb906691", "type": "function", "z": "58de72f1d81d5e3d", "name": "", "func": "var sendButton = '<script> this.scope.action = function() {var value = document.querySelector(\"#w0\").value; return value; } </script> <md-button ng-click=\"send({ payload: action() })\"> Click here to send the data </md-button>'\n\n\n\nvar html = \"\";\nfor (var i in msg.payload){\n html += '<label for=\"w' + i + '\">Kolom ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\n\n\nmsg.template = html + sendButton ;\nreturn msg;", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 600, "y": 200, "wires": [[] ] }, { "id": "f010527b6888f444", "type": "function", "z": "58de72f1d81d5e3d", "name": "", "func": "var sendButton = '<script> this.scope.action = function() {var value = document.querySelectorAll(\"#w0, w1\").value; return value; } </script> <md-button ng-click=\"send({ payload: action() })\"> Click here to send the data </md-button>'\n\n\n\nvar html = \"\";\nfor (var i in msg.payload){\n html += '<label for=\"w' + i + '\">Kolom ' + i + '</label><textarea id=\"w' + i + '\" name=\"w' + i + '\" rows=\"4\" cols=\"50\">' + msg.payload[i] + '</textarea>';\n}\n\n\nmsg.template = html + sendButton ;\nreturn msg;", "outputs": 1, "noerr": 0, "initialize": "", "finalize": "", "libs": [], "x": 600, "y": 320, "wires": [[] ] }, { "id": "165e1e1a.e752fa", "type": "ui_group", "name": "Default", "tab": "f9b58883.fa613", "order": 1, "disp": false, "width": 12, "collapse": false, "className": "" }, { "id": "f9b58883.fa613", "type": "ui_tab", "name": "Home", "icon": "dashboard", "order": 1, "disabled": false, "hidden": false } ]`

The first fuction return w0, (using document.querySelector("#w0").value)  
The 2nd function return w1, (using document.querySelector("#w1").value)  
The 3rd function should be returning both w0 and w1, but it doesn't work as intended. ( using document.querySelectorAll("#w0, w1").value)  
[edit]  
Inserting the node code and output description

---

<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:** [6 March 2023 08:09 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/6 "2023-03-06T08:09:38Z")

</div>

Try

```auto
var sendButton = `<script> 
this.scope.action = function() {
  
  var value = document.querySelectorAll("#w0,#w1"); 
  value = Object.values(value).map(element => element.value)
  return value; } 
</script> 
<md-button ng-click="send({ payload: action() })"> Click here to send the data </md-button>`

```

---

<div class="post-metadata">

**Author:** ![nightmareside15](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nightmareside15/32/56176_2.png) [@nightmareside15](https://discourse.nodered.org/u/nightmareside15)\
**Post date:** [7 March 2023 00:31 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/7 "2023-03-07T00:31:32Z")

</div>

A perfect artwork. Thank you very much. I hope you have a good day!

---

<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:** [21 March 2023 00:32 UTC](https://discourse.nodered.org/t/node-red-dashboard-ui-template-how-to-update-the-value-of-ui-template-html-label/76035/8 "2023-03-21T00:32:02Z")

</div>

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