After many tries and hours of research in the Internet (ok, I am new to HTML/Javascript), I manage to code the Node-Red UI-Dashboard template below in a way that, when different values of msg.payload are sent, the HTML is updated and a the value of variable value can be passed on as a mmessage to another node. However I noticed that when a message with a different structure (msg.host for example) is sent and the UI-Dashboard is refreshed in the browser, variable value is gone. So, how can I fix ist value, so that only when a new msg.payload comes in the variable value is updated?
<div>{{value}}</div><br>
<md-button ng-click="send({payload:action()})">
Click me to send a message
</md-button>
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload) {
scope.value = msg.payload;
}
scope.action = function() {
return scope.value;
}
});
})(scope);
</script>Any help would be much appretiatted! Here is the Node-Red flow:
[{"id":"3f23f703.42bea8","type":"ui_template","z":"66b95f66.704eb","group":"b95933b3.c8423","name":"","order":0,"width":"6","height":"3","format":"<div>{{value}}</div><br>\n\n<md-button ng-click=\"send({payload:action()})\">\n Click me to send a message\n</md-button>\n\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg.payload) {\n\t scope.value = msg.payload;\n\t}\n scope.action = function() {\n return scope.value;\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":320,"y":1440,"wires":[["2c92bfb9.3b913"]]},{"id":"2c92bfb9.3b913","type":"debug","z":"66b95f66.704eb","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":490,"y":1440,"wires":[]},{"id":"52897833.650b18","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"boat","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1440,"wires":[["3f23f703.42bea8"]]},{"id":"b4427fff.dd20b","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"house","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1480,"wires":[["3f23f703.42bea8"]]},{"id":"505e7106.a90bc","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"car","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1520,"wires":[["3f23f703.42bea8"]]},{"id":"f0f33fe9.21da5","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"500","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":1560,"wires":[["3f23f703.42bea8"]]},{"id":"f857f83f.7d2108","type":"function","z":"66b95f66.704eb","name":"test msg","func":"var servers = {\n host: 'localhost',\n port: 6680,\n};\nreturn [servers];","outputs":1,"noerr":0,"x":320,"y":1380,"wires":[["3f23f703.42bea8"]]},{"id":"1ee40d04.3106d3","type":"inject","z":"66b95f66.704eb","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":1380,"wires":[["f857f83f.7d2108"]]},{"id":"b95933b3.c8423","type":"ui_group","z":"","name":"Group 2","tab":"f04b5dc7.38763","order":2,"disp":false,"width":"6","collapse":false},{"id":"f04b5dc7.38763","type":"ui_tab","z":"66b95f66.704eb","name":"New Test","icon":"dashboard"}]
After some more research I found was I was looking for to retain the values of variables after getting new messages or browser refresh:localStorage. Here is the updated <script>:
`<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg.payload.image) {
localStorage.setItem("image", msg.payload.image);
}
if (msg.payload.text) {
localStorage.setItem("text", msg.payload.text);
}
if (msg.payload.volume) {
localStorage.setItem("volume", msg.payload.volume);
}
scope.action = function() {
return [value, host];
}
scope.image = localStorage.getItem("image");
scope.text = localStorage.getItem("text");
scope.volume = localStorage.getItem("volume");
});
})(scope);
</script>`
The correct way to do this is to filter the input to the template node so it's internal state doesn't get reset by a message without a msg.payload value.
If you still need to consume these other messages downstream of the template node then you can use something like a switch node to route the message round the template node.
Also context is for the server side not the browser side, it will not work in the Angular/HTML/CSS space.