# 2 questions in one post:) - ui messages and code

**URL:** https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875
**Category:** Dashboard
**Created:** [18 August 2021 12:50 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875 "2021-08-18T12:50:48Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![paulalsmith1000](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@paulalsmith1000](https://discourse.nodered.org/u/paulalsmith1000)
#### Post date: [18 August 2021 12:50 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/1 "2021-08-18T12:50:48Z")

</div>

Hi everyone/anyone (especially E1cid)

Could someone possibly give me a very basic example of how to listen for messages in the ui template using 'scope.$watch'- there is an example in the help section of the node, but I can't quite understand it, which gives you some idea of who your're dealing with!

Something as simple as when a message payload is received a script is triggered and the value from the payload is passed into it.

The second question is I don't understand a lot of the answers on the forum, that is some of the answers/code provided are in recognisable html/javascript, but a lot are like this [{"id": "4e34........etc]. I know this is a stupid question, but what is this?

Kind regards and thanks for your time

Paul

---

<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: [18 August 2021 16:03 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/2 "2021-08-18T16:03:51Z")

</div>

Here is an example the complete msg is sent to the script, in the script scope.$value is set to msg.payload times 10.  
this is shown in the div using {{$value}}.  
Hope it helps

```auto
[{"id":"6567d73c.b95a18","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*500)","payloadType":"jsonata","x":220,"y":1340,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":8,"width":0,"height":0,"format":"<div>--{{$value}}--</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n \n $(scope.$value = msg.payload * 100);\n }\n });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":345,"y":1340,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":470,"y":1240,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

The second question

> [@paulalsmith1000](#):
>
> [{"id": "4e34........etc].

this is a json [json - Google Search](https://www.google.com/search?q=json&oq=json&aqs=chrome..69i57j0i433i512j69i60l3.1445j0j7&client=ms-unknown&sourceid=chrome-mobile&ie=UTF-8) . It is the import/export format of a flow or node/s

---

<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: [18 August 2021 16:15 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/3 "2021-08-18T16:15:52Z")

</div>

Hi @paulalsmith1000

when you see some code that looks like `[{"id": "4e34........etc]`, you are looking at Node-RED flow JSON. That is how node-red flows are encoded.

You can copy that JSON and import it into your own Node-RED instance by opening the Import Dialog (Ctrl-I, or the Import menu option).

---

<div class="post-metadata">

### Author: ![paulalsmith1000](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@paulalsmith1000](https://discourse.nodered.org/u/paulalsmith1000)
#### Post date: [18 August 2021 18:25 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/4 "2021-08-18T18:25:04Z")

</div>

Hello again

Perfect, thank you so much. Its all becoming clear!

If I could just ask 1 more question I should be able to find my own way for a while.

Could you tell me what is wrong with the below? When I inject a number I expect the picture to rotate, but alas nothing happens:

```auto
<div>
    
  <img id="img" src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" />  
    
</div>

<script>
        
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      
      $(scope.$value = msg.payload);
    }
  });
})(scope);

document.querySelector("#img").style.transform = {{$value}};
</script>

```

Thanks again

Paul

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 August 2021 19:00 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/5 "2021-08-18T19:00:51Z")

</div>

If you put `console.log("some message")` at various places you will see the code in `if(msg){...}` Runs each time a message arrives where as the `document.querySelector` code only runs once.

Move the `document.querySelector` code inside the if(msg){...} part.

---

<div class="post-metadata">

### Author: ![paulalsmith1000](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@paulalsmith1000](https://discourse.nodered.org/u/paulalsmith1000)
#### Post date: [19 August 2021 07:18 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/6 "2021-08-19T07:18:18Z")

</div>

Hi Steve

Thanks for your reply, I thought that might be the case, I tried it like this:-

```auto
[{"id":"6567d73c.b95a18","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$ceil($random()*500)","payloadType":"jsonata","x":220,"y":1340,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"b779de97.b1b46","group":"8b5cde76.edd58","name":"","order":8,"width":0,"height":0,"format":"<div>--{{$value}}--</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n \n $(scope.$value = msg.payload * 100);\n }\n });\n})(scope);\n</script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":345,"y":1340,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"b779de97.b1b46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":470,"y":1240,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

It still doesn't work though sadly?

Kind regards

Paul

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [19 August 2021 07:38 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/7 "2021-08-19T07:38:37Z")

</div>

> [@paulalsmith1000](#):
>
> It still doesn't work though sadly?

It wont, you arent doing anything with the payload...

```auto
<div>--{{$value}}--</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      
      $(scope.$value = msg.payload * 100); // << where is the document.querySelector code?
    }
  });
})(scope);
</script>

```

Try changing it to...

```auto
<div>
  <img id="img" src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" />  
</div>
<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg && msg.topic == "rotate") {
      // Do something when msg arrives with topic "rotate"
      document.getElementById("img").style.transform = "rotate(" + msg.payload + "deg)";
    }
  });
})(scope);
</script>

```

Demo flow...

```auto
[{"id":"6567d73c.b95a18","type":"inject","z":"5e6c8b.7f38b374","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"rotate","payload":"$ceil($random()*500)","payloadType":"jsonata","x":738,"y":1808,"wires":[["27576b17.de0624"]]},{"id":"27576b17.de0624","type":"ui_template","z":"5e6c8b.7f38b374","group":"8b5cde76.edd58","name":"","order":8,"width":"12","height":"9","format":"<div>\n <img id=\"img\" src=\"http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png\" /> \n</div>\n<script>\n(function(scope) {\n scope.$watch('msg', function(msg) {\n if (msg && msg.topic == \"rotate\") {\n // Do something when msg arrives with topic \"rotate\"\n document.getElementById(\"img\").style.transform = \"rotate(\" + msg.payload + \"deg)\";\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":863,"y":1808,"wires":[["efa8201a.f96fc8"]],"l":false},{"id":"efa8201a.f96fc8","type":"debug","z":"5e6c8b.7f38b374","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":998,"y":1808,"wires":[]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/0/f0a9cf63377178c5d84b31e5d419b84f81298a94.jpeg)

---

<div class="post-metadata">

### Author: ![paulalsmith1000](https://avatars.discourse-cdn.com/v4/letter/p/d07c76/32.png) [@paulalsmith1000](https://discourse.nodered.org/u/paulalsmith1000)
#### Post date: [19 August 2021 07:53 UTC](https://discourse.nodered.org/t/2-questions-in-one-post-ui-messages-and-code/49875/8 "2021-08-19T07:53:23Z")

</div>

Hi Steve

Wow thank you very much, that's brilliant.

(And from earlier in the thread I now know how to import the JSON)

Kindest regards and thanks for everyones help

Paul