# Using the msg.payload to change ui template

**URL:** https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829
**Category:** Dashboard
**Created:** [4 September 2018 10:52 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829 "2018-09-04T10:52:50Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 10:52 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/1 "2018-09-04T10:52:50Z")

</div>

I am trying to use the msg.payload to draw circles on an image in the ui template. The image I have got below is not how its gonna look to its a basic concept. If I get data that says 'step 1' for example, I want a circle to turn green maybe at the top left corner, and if the msg.payload is 'step 2' I want another portion of the screen to turn green green while the previous one turns red. I have got it to work while using just variables in the script and then manually changing them.Right now, I am trying to change it based on the msg.payload coming in but this isn't working that is my code and my flow below... please any help would be much appreciated

```
[{"id":"8e1bd91f.0351b8","type":"inject","z":"60c4f4eb.03d874","name":"","topic":"","payload":"hey","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":390,"y":240,"wires":[["5a85126b.bb1f34"]]},{"id":"5a85126b.bb1f34","type":"ui_template","z":"60c4f4eb.03d874","group":"6e5e2fd4.bea84","name":"","order":1,"width":"23","height":"23","format":"&lt;!DOCTYPE
html&gt;\n\n&lt;html&gt;\n \n&lt;body&gt;\n&lt;div
ng-bind-html=\"msg.payload\"&gt;&lt;/div&gt;\n&lt;p&gt;Image to use:&lt;/p&gt;\n\n&lt;img
id=\"scream\" width=\"900\" height=\"800\"\nsrc=\"/route.png\"
alt=\"The Scream\"&gt;\n\n&lt;p&gt;Canvas:&lt;/p&gt;\n\n&lt;canvas id=\"myCanvas\"
width=\"1000\" height=\"950\"\nstyle=\"border:1px solid
#d3d3d3;\"&gt;\n\n&lt;/canvas&gt;\n&lt;script&gt;\n\nvar canvas =
document.getElementById(\"myCanvas\")\nvar ctx =
canvas.getContext(\"2d\")\nvar img =
document.getElementById(\"scream\")\n\nctx.drawImage(img,0,0);\n\nif(msg.payload
== 'hey'){\n ctx.beginPath();\n ctx.arc(30,30,30,0,2*Math.PI);\n
ctx.fillStyle = \"red\";\nctx.fill();\n
ctx.stroke();\n}\n&lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":720,"y":300,"wires":[["b283a520.d76fe"]]},{"id":"b283a520.d76fe","type":"debug","z":"60c4f4eb.03d874","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":900,"y":200,"wires":[]},{"id":"6e5e2fd4.bea84","type":"ui_group","z":"","name":"Route","tab":"f540ef38.3110e","disp":true,"width":"23","collapse":false},{"id":"f540ef38.3110e","type":"ui_tab","z":"","name":"Route","icon":"dashboard","order":2}]
```

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [4 September 2018 12:55 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/2 "2018-09-04T12:55:16Z")

</div>

May you surround your code with 3 backticks ``` so as we can import and try it ? Also a screenshot of your results will be helpful as we will not have how to test with the very same image you are using.

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 13:49 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/3 "2018-09-04T13:49:13Z")

</div>

![image1%20(5)](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3be1cb869cfc42e9c5d82bea5d68a9a1f4022fc9.jpeg)

Basically, the circle in the top left corner, I need that to appear when a specific payload comes in, and for it to be hidden when another payload comes in, I can get it to work by creating variables and inside the ui template node and forcing a value in, but I want to replace it with msg.payload instead. At the moment, when I use msg.payload, for the if function variable, nothing happens.

Also I'm not sure what you mean by the backticks, i think if you copy and paste the flow from the clipboard, it works

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [4 September 2018 13:51 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/4 "2018-09-04T13:51:24Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/4/40d01b7fbcaa43f229d3054d2eac8a61be49bbea.png)

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 13:57 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/5 "2018-09-04T13:57:50Z")

</div>

Done. Is that better?

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [4 September 2018 14:01 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/6 "2018-09-04T14:01:02Z")

</div>

Sorry - no - my fault ☹

Re-edit - delete orig paste

Then re-export from Node-RED - paste -then BEFORE you save - do the selection and press that button

Sorry for duff gen

Simon

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 14:07 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/7 "2018-09-04T14:07:45Z")

</div>

I have done that just now, it looks the exact same, is that working now?

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [4 September 2018 14:27 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/8 "2018-09-04T14:27:17Z")

</div>

mm - its not - at least I can't import it

Can you paste it to pastebin and give us the url to it?

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 14:35 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/9 "2018-09-04T14:35:56Z")

</div>

```auto
[{"id":"8e1bd91f.0351b8","type":"inject","z":"60c4f4eb.03d874","name":"","topic":"dolly","payload":"hey","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":240,"wires":[["5a85126b.bb1f34"]]},{"id":"5a85126b.bb1f34","type":"ui_template","z":"60c4f4eb.03d874","group":"6e5e2fd4.bea84","name":"","order":1,"width":"23","height":"23","format":"<!DOCTYPE
 html>\n\n<html>\n \n<body>\n<div 
ng-bind-html=\"msg.payload\"></div>\n<p>Image to 
use:</p>\n\n<img id=\"scream\" width=\"900\" 
height=\"800\"\nsrc=\"/route.png\" alt=\"The 
Scream\">\n\n<p>Canvas:</p>\n\n<canvas id=\"myCanvas\"
 width=\"1000\" height=\"950\"\nstyle=\"border:1px solid 
#d3d3d3;\">\n\n</canvas>\n<script>\nvar shawty = 
'hey'\nvar canvas = document.getElementById(\"myCanvas\")\nvar ctx = 
canvas.getContext(\"2d\")\nvar img = 
document.getElementById(\"scream\")\n\nctx.drawImage(img,0,0);\n\nif(shawty
 === \"hey\"){\n ctx.beginPath();\n ctx.arc(30,30,30,0,2*Math.PI);\n 
ctx.fillStyle = \"red\";\nctx.fill();\n ctx.stroke();\n}\n</script>\n</body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":540,"y":160,"wires":[["b283a520.d76fe"]]},{"id":"b283a520.d76fe","type":"debug","z":"60c4f4eb.03d874","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":810,"y":220,"wires":[]},{"id":"6e5e2fd4.bea84","type":"ui_group","z":"","name":"Route","tab":"f540ef38.3110e","disp":true,"width":"23","collapse":false},{"id": "f540ef38.3110e","type":"ui_tab","z":"","name":"Route","icon":"dashboard","order":2}]

```

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 14:36 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/10 "2018-09-04T14:36:50Z")

</div>

If you try that one, I think it works now

---

<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: [4 September 2018 14:38 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/11 "2018-09-04T14:38:56Z")

</div>

@kebebs I have edited your post to fix the formatting. You must put **three-backtick characters** on new lines before and after the pasted flow:

````
```
[{"id":"8e1bd91f.0351b8","type":"inject","z" ...
```

````

That will ensure the formatting is preserved.

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 14:41 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/12 "2018-09-04T14:41:59Z")

</div>

thank you for that, does the code work for you now please?

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [4 September 2018 14:43 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/13 "2018-09-04T14:43:11Z")

</div>

It's still not importing for me ☹

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/93c78b8893cf9ed37cc322b1986c6e245637a667.png)

---

<div class="post-metadata">

### Author: ![kebebs](https://avatars.discourse-cdn.com/v4/letter/k/3be4f8/32.png) [@kebebs](https://discourse.nodered.org/u/kebebs)
#### Post date: [4 September 2018 14:49 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/14 "2018-09-04T14:49:51Z")

</div>

i have put back the original post before knolleary changed it... that one works, please try the flow after you asked for the url

---

<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: [4 September 2018 15:00 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/15 "2018-09-04T15:00:54Z")

</div>

I'm not entirely sure what edit you made, but your flow now has extra line breaks in it which means it cannot be imported.

---

<div class="post-metadata">

### Author: ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)
#### Post date: [4 September 2018 15:07 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/16 "2018-09-04T15:07:42Z")

</div>

If you mean this one

> [@Using the msg.payload to change ui template](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/9):
>
> [{"id":"8e1bd91f.0351b8","type":"inject","z":"60c4f4eb.03d874","name":"","topic":"dolly","payload":"hey","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":300,"y":240,"wires":[["5a85126b.bb1f34"]]},{"id":"5a85126b.bb1f34","type":"ui\_template","z":"60c4f4eb.03d874","group":"6e5e2fd4.bea84","name":"","order":1,"width":"23","height":"23","format":"\<!DOCTYPE html\>\n\n\<html\>\n \n\<body\>\n\<div ng-bind-html=\"msg.payload\"\>\</div\>\n\<p\>Image to use:\</p\>\n\n\<img id=\"scream\"…

then it doesn't work for me

None of them work for me

1. Are you selecting your flow and then exporting via the menu - export-clipboard method ?

2. Can you try the pastebin method - just to eliminate this forum as the source of the error?

Simon

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [4 September 2018 15:10 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/17 "2018-09-04T15:10:56Z")

</div>

Looks like there are trailing back-tics in the pasted flow... it might work if you remove those.

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [4 September 2018 15:16 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/18 "2018-09-04T15:16:57Z")

</div>

Is the import flow text box using the ace editor? If not, how hard would it be to add it, like the other JSON editors?

There are times when I want to paste in a flow and edit it **before** the import happens -- having the JSON errors highllighted, and the ability to "format" the text would make that much easier. Since it has already been implemented elsewhere in the editor, I could probably retro-fit it, if you would entertain a PR...

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [4 September 2018 15:28 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/19 "2018-09-04T15:28:54Z")

</div>

I edited manually the flow in order to try to understand the issue at hand.

```auto
<!DOCTYPE html>
<html>

<body>
    <div ng-bind-html="msg.payload"></div>
    <p>Image to use:</p>
    <img id="scream" width="900" height="800" src="/route.png" alt="The Scream">
    <p>Canvas:</p>
    <canvas id="myCanvas" width="1000" height="950" style="border:1px solid #d3d3d3;"> </canvas>
    <script>  
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img, 0, 0);
        if (msg.payload == 'hey') {
            ctx.beginPath(); ctx.arc(30, 30, 30, 0, 2 * Math.PI);
            ctx.fillStyle = "red";
            ctx.fill();
            ctx.stroke();
        } 
    </script>
</body>

</html>

```

The question seems to boils down to : How to read msg.payload property inside the script tag in an UI template node.

I guess the solution is to make use of scope.$watch

---

<div class="post-metadata">

### Author: ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [21 August 2020 14:17 UTC](https://discourse.nodered.org/t/using-the-msg-payload-to-change-ui-template/2829/20 "2020-08-21T14:17:19Z")

</div>

> [@Andrei](#):
>
> Have a look on below link:
> 
> [https://internet-of-things.blog/en/accessing-node-red-msg-object-in-the-browser/](https://internet-of-things.blog/en/accessing-node-red-msg-object-in-the-browser/)

I have been warned that the link above is now broken. I feel this is a common question for many so I would suggest another link.

> <https://stackoverflow.com/questions/60491599/run-javascript-function-using-msg-payload-in-node-red/60500225#60500225>