# How to insert msg.payload in template UI?

**URL:** <https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938>\
**Category:** Dashboard\
**Created:** [13 September 2021 06:17 UTC](https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938 "2021-09-13T06:17:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AK51](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ak51/32/8438_2.png) [@AK51](https://discourse.nodered.org/u/AK51)\
**Post date:** [13 September 2021 06:17 UTC](https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938/1 "2021-09-13T06:17:08Z")

</div>

Hi,

I get the ip address and I try to insert it in the iframe. I have read the forum and it should worked but didn't... not sure why.... pls take a look

this iframe with exact ip address works, src="[http://172.20.10.2/html/min.php](http://172.20.10.2/html/min.php)"

But when I try to use msg.payload as the ip address, it fails, src="{{msg.payload}}"

My payload is this "[http://172.20.10.2/html/min.php](http://172.20.10.2/html/min.php)", I have tried with/without "

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a01018290479fc6637e7c8668b6aedd858a19bc8.png)

Btw, I follow this link for my rpi cam and it works. [RPi Node Red: Streaming rpi camera to dashboard • T³ Alliance](https://t3alliance.org/lessons/rpi-node-red-streaming-rpi-camera-to-dashboard/)

```auto
[{"id":"c35a594d.b471c8","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"d55b9849.4b8668","type":"debug","z":"c35a594d.b471c8","name":"with \"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":670,"y":220,"wires":[]},{"id":"7377968.8e4d668","type":"ip","z":"c35a594d.b471c8","name":"ip","https":false,"timeout":"5000","internalIPv4":true,"internalIPv6":true,"publicIPv4":true,"publicIPv6":false,"x":370,"y":220,"wires":[["3c8ed453.f07aac","a687930c.50577"]]},{"id":"c1d58824.9cbf78","type":"inject","z":"c35a594d.b471c8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":220,"wires":[["7377968.8e4d668"]]},{"id":"3c8ed453.f07aac","type":"function","z":"c35a594d.b471c8","name":"with \"","func":"Newmsg = {};\nvar ipaddrCam = \"http://\" + msg.payload.internalIPv4 + \"/html/min.php\";\nipaddrCam = '\"' + ipaddrCam + '\"';\nglobal.set (\"ipaddrCam\",ipaddrCam);\nNewmsg.payload = ipaddrCam;\nreturn Newmsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":510,"y":220,"wires":[["d55b9849.4b8668","6c5a5434.f095ec"]]},{"id":"6c5a5434.f095ec","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"Working_with_relative_ip_address","order":1,"width":"0","height":"0","format":"<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=439 width=553 src={{msg.payload}}></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":760,"y":260,"wires":[[]]},{"id":"bebdcc1f.5a531","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"Working_with_absolute_ip_address","order":1,"width":"0","height":"0","format":"<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=439 width=553 src=\"http://172.20.10.2/html/min.php\"></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":400,"wires":[[]]},{"id":"e2948fec.0c8a2","type":"debug","z":"c35a594d.b471c8","name":"without \"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":680,"y":300,"wires":[]},{"id":"a687930c.50577","type":"function","z":"c35a594d.b471c8","name":"without \"","func":"Newmsg = {};\nvar ipaddrCam = \"http://\" + msg.payload.internalIPv4 + \"/html/min.php\";\n//ipaddrCam = '\"' + ipaddrCam + '\"';\nglobal.set (\"ipaddrCam\",ipaddrCam);\nNewmsg.payload = ipaddrCam;\nreturn Newmsg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":300,"wires":[["e2948fec.0c8a2","7e495c75.367c04"]]},{"id":"7e495c75.367c04","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"Working_with_relative_ip_address","order":1,"width":"0","height":"0","format":"<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=439 width=553 src={{msg.payload}}></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":760,"y":340,"wires":[[]]},{"id":"2045a81e.607958","type":"ui_group","name":"Group 1","tab":"3d8fbe92.30ee32","order":1,"disp":true,"width":"18","collapse":false},{"id":"3d8fbe92.30ee32","type":"ui_tab","name":"Test","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<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:** [13 September 2021 06:54 UTC](https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938/2 "2021-09-13T06:54:18Z")

</div>

Firstly, your flow is un-importable. it is important to surround your code with three backticks  
`````  
`like this`  
`````

You can edit and correct your post by clicking the pencil icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

* * *

Secondly, I can see you have quotes in the string. They should probably not be present.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/c/acb2325041c71954acf6f8660879d02d67e47db4.png)

---

<div class="post-metadata">

**Author:** ![AK51](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ak51/32/8438_2.png) [@AK51](https://discourse.nodered.org/u/AK51)\
**Post date:** [13 September 2021 07:14 UTC](https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938/3 "2021-09-13T07:14:25Z")

</div>

I have created an easier example that shows iframe issue I have.  
It seems node-red accepts the iframe but the iframe can not display it....

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/d/9d3b909bc781b09538bb6077c5c7b66e4fdf9671.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/281eb01f5b60e0849b28d9450374ea27506c0504.png)

```auto
[{"id":"c35a594d.b471c8","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"6c5a5434.f095ec","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"https://www.example.com/","order":1,"width":"0","height":"0","format":"<iframe src={{msg.payload}}></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":590,"y":80,"wires":[[]]},{"id":"bebdcc1f.5a531","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"Working_with_absolute_ip_address","order":3,"width":"0","height":"0","format":"<iframe src=\"https://www.example.com/\"></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":620,"y":160,"wires":[[]]},{"id":"371497f4.35dd88","type":"inject","z":"c35a594d.b471c8","name":"https://www.example.com/","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"https://www.example.com/","payloadType":"str","x":240,"y":80,"wires":[["6c5a5434.f095ec"]]},{"id":"14f682d3.7fb08d","type":"inject","z":"c35a594d.b471c8","name":"\"https://www.example.com/\"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"\"https://www.example.com/\"","payloadType":"str","x":240,"y":120,"wires":[["2ab70769.918338"]]},{"id":"2ab70769.918338","type":"ui_template","z":"c35a594d.b471c8","group":"2045a81e.607958","name":"\"https://www.example.com/\"","order":1,"width":"0","height":"0","format":"<iframe src={{msg.payload}}></iframe>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":600,"y":120,"wires":[[]]},{"id":"2045a81e.607958","type":"ui_group","name":"Group 1","tab":"3d8fbe92.30ee32","order":1,"disp":true,"width":"28","collapse":false},{"id":"3d8fbe92.30ee32","type":"ui_tab","name":"Test","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 October 2021 07:14 UTC](https://discourse.nodered.org/t/how-to-insert-msg-payload-in-template-ui/50938/4 "2021-10-13T07:14:36Z")

</div>

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