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

Dashboard
1

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

(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!

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

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

3

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

4

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

[{"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.

1 Like
5

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

6

Try

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>`
1 Like
7

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

8

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