Access msg.payload in script tag

Dashboard
1

Hello, I am new to node-red. so i don't know i am asking the right question or not. But what i want to do is- after getting data from sqlite database i want to access it in the script tag of template node. I have tried this code.

<h3>Testing dynamic scripts with Dashboard 2.0</h3>
{{msg.payload}}
<script>
    (function(scope) {
        console.log('Position 1');
        console.dir(scope);
        scope.$watch('msg.payload', function(data) {
            console.log('Position 2');
            console.dir(data);
        });
    })(scope);
</script>

but it gives me error-
Uncaught ReferenceError: scope is not defined just above the closing script tag

node-red
node-red.PNG953×388 29.7 KB

Here is my flow:

[{"id":"e44146f7.ae2598","type":"function","z":"8ffa2bf7.aaabf8","name":"query","func":"if(msg.payload.hasOwnProperty('email'))\n{\n var id=2;\n msg.topic='insert into masteruser (id, email) values(2,"anshul60198@gmail.com")';\n return msg;\n}\nelse{\n if(msg.payload.name.substring(0,4)=="save")\n {\n var id=msg.payload.name.substring(4,msg.payload.name.length);\n msg.topic='INSERT INTO tempp (id, lable, name) VALUES ("'+id+'","'+msg.payload.labelvalue+'","'+msg.payload.namevalue+'")';\n return msg;\n }\n if(msg.payload.name.substring(0,6)=="delete")\n {\n var id=msg.payload.name.substring(6,msg.payload.name.length);\n msg.topic='delete from tempp where id="'+id+'"';\n return msg;\n }\n}\nreturn msg;\n//return msg;\n\n\n\n","outputs":1,"noerr":0,"x":243.5,"y":151,"wires":[["365472fc.87c2ce"]]}]

Please help!!!

2

I had problems with that too.
I resolved that issue by generating the content of the template node in a function. Copy all contents into a string and set the string to msg.template.
For me it looked like this:

var max_width = '280px'

var htmlstart = '<div class="dropdown"><div id="myDropdownC3" class="dropdown-contentC3"> <input type="text" placeholder="Search.." id="myInputC3" onkeyup="filterFunctionC31()">';
var htmlend = '</div></div>';
var style = '<style>.dropbtn { background-color: #0094ce; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;}.dropbtn:hover, .dropbtn:focus { background-color: #00A6E8;}#myInputC3 { border-box: box-sizing; background-image: url("https://www.w3schools.com/howto/searchicon.png"); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd;}#myInputC3:focus {outline: 3px solid #ddd;}.dropdown { position: relative; display: inline-block;}.dropdown-contentC3 {  position: absolute; background-color: #f6f6f6; min-width: 100px; max-width: ' + max_width + '; overflow: auto; border: 1px solid #ddd; z-index: 1;}.dropdown-contentC3 a { color: black; padding: 12px 16px; text-decoration: none; display: block;}.dropdown a:hover {background-color: #ddd;}.show {display: block;}</style>';
var script = '<script>/* When the user clicks on the button,toggle between hiding and showing the dropdown content */function myFunctionC3() { document.getElementById(\"myDropdownC3\").classList.toggle(\"show\");}function filterFunctionC31() { var input, filter, ul, li, a, i; input = document.getElementById(\"myInputC3\"); filter = input.value.toUpperCase(); div = document.getElementById(\"myDropdownC3\"); a = div.getElementsByTagName(\"a\"); for (i = 0; i < a.length; i++) { if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) { a[i].style.display = \"\"; } else { a[i].style.display = \"none\"; } }}</script>';
var vals = "";

var length = msg.options.length;
for(var i = 0; i < length; i++){
    var obj = msg.options[i];
    var name = Object.keys(obj)[0];
    var value = obj[Object.keys(obj)[0]];
    vals += '<a ng-click="send({payload: ' + value + '})" onclick="myFunctionC3()" >'+name+'</a>';
}
msg.template = style + htmlstart + vals + htmlend+script;
return msg;
3

Hi,

please read this post about how to properly share flows in the forum - How to share code or flow json

You are getting the core Template mixed up with the Node-RED Dashboard UI-Template node.

The core Template node uses the mustache syntax to generate text based on the message passed to the node. You are returning that text in response to an HTTP request. So the browser will handle that response as HTML and display it - but there is no special link between what is in that page and the flow.

The sort of syntax you are trying to use is what you would use in the Node-RED Dashboard UI Template node in order to handle messages passed to that node. This node can only be used in the context of Node-RED Dashboard - you can't use it in your own page outside of the dashboard.

If you want to generate a page that can send/receive messages from a Node-RED flow, without using Node-RED Dashboard, (or any of the other dashboard modules such as ui-builder), then you'll have to create the comms link between the page and node-red yourself, such as with a WebSocket connect.

4

Thank you very much for the reply, i have tried webSocket connect and the flow is working fine now.