# HTML Template - use msg.payload

**URL:** https://discourse.nodered.org/t/html-template-use-msg-payload/85557
**Category:** Dashboard
**Tags:** ui-template, onclick
**Created:** [15 February 2024 10:46 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557 "2024-02-15T10:46:27Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![FloRu](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FloRu](https://discourse.nodered.org/u/FloRu)
#### Post date: [15 February 2024 10:46 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/1 "2024-02-15T10:46:27Z")

</div>

Hi!

I please need your eyes, because I don't see my mistake...  
Tried to build a template node that shows the Title "ID" and copies on click msg.payload to the clipboard of the browser where it's being clicked. Here is the code inside the template node. And where is my error?

```auto
<div/><button onclick="copyText('{{msg.id}}')">ID:</button></div>

<script>
    function copyText(inhalt){
        /* Copy text into clipboard */
        navigator.clipboard.writeText(inhalt);
    }
</script>

```

I always get "{{msg.id}}" to the clipboard, but not the value of it...

Thanks in advance!  
Florian

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [15 February 2024 11:52 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/2 "2024-02-15T11:52:59Z")

</div>

Are you using the template or ui-template node?  
are you using dashboard 1 or 2?  
why do you have a backslash in the first div of the first line? i.e. \<div`/`\>\<button...

---

<div class="post-metadata">

### Author: ![FloRu](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FloRu](https://discourse.nodered.org/u/FloRu)
#### Post date: [15 February 2024 12:06 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/3 "2024-02-15T12:06:11Z")

</div>

Hi Paul,

UI-Template.  
Dashboard Version 1, and the dash was wrong...

But it doesn't work at all.

---

<div class="post-metadata">

### Author: ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [15 February 2024 13:33 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/4 "2024-02-15T13:33:32Z")

</div>

What platform is node-red running on and what platform are you viewing the dashboard in?

---

<div class="post-metadata">

### Author: ![FloRu](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FloRu](https://discourse.nodered.org/u/FloRu)
#### Post date: [15 February 2024 14:32 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/5 "2024-02-15T14:32:24Z")

</div>

Node-RED is running on DietPi and I am watching it on latest macOS using Safari.

---

<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: [15 February 2024 16:32 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/6 "2024-02-15T16:32:53Z")

</div>

Try

```auto
<div><button ng-click="copyText(msg.id)" >ID:</button></div>
<script>
    this.scope.copyText = function (inhalt){
         /* Copy text into clipboard */
        navigator.clipboard.writeText(inhalt);
    }
</script>

```

Or `<md-button>` if you want the dashboard styling

---

<div class="post-metadata">

### Author: ![FloRu](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FloRu](https://discourse.nodered.org/u/FloRu)
#### Post date: [15 February 2024 22:28 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/7 "2024-02-15T22:28:56Z")

</div>

Thanks E1cid,  
but this also doesn't work. I think that the problem is, that the (msg.id) or {{msg.id}} is between two "s. But I have no idea how it could be right.

---

<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: [15 February 2024 22:43 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/8 "2024-02-15T22:43:55Z")

</div>

You will need to use md-button and you'll need to store the id somewhere that is in scope.

You could bind the id to a hidden input then retrieve it in your function. Or catch incoming messages using the sample code in the built in help & store the id in a variable.

---

<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: [15 February 2024 22:45 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/9 "2024-02-15T22:45:00Z")

</div>

Strange as it works for me, with or without md-button.  
Only difference is I use a different way to copy to clipboard

```auto
<div><button ng-click="copyText(msg.id)" >ID:</button></div>

<script>
    this.scope.copyText = function (inhalt){
        //alert(inhalt);
        /* Copy text into clipboard */
        var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = inhalt;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
    }  
</script>

```

Did you refresh the browser after updating template code?

[edit] Moved topic to dashboard category.

---

<div class="post-metadata">

### Author: ![FloRu](https://avatars.discourse-cdn.com/v4/letter/f/db5fbb/32.png) [@FloRu](https://discourse.nodered.org/u/FloRu)
#### Post date: [15 February 2024 23:36 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/10 "2024-02-15T23:36:31Z")

</div>

E1cid,

that did it! Thank you!

> [@E1cid](#):
>
> ```auto
> <div><button ng-click="copyText(msg.id)" >ID:</button></div>
> 
> <script>
> this.scope.copyText = function (inhalt){
> //alert(inhalt);
> /* Copy text into clipboard */
> var dummy = document.createElement("textarea");
> document.body.appendChild(dummy);
> dummy.value = inhalt;
> dummy.select();
> document.execCommand("copy");
> document.body.removeChild(dummy);
> }  
> </script>
> 
> ```

And yes, I reloaded the site several times...  
But now I've learned how to get the information to the "Click me to copy my value to clipboard" Buttons! Great!

---

<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: [29 February 2024 23:37 UTC](https://discourse.nodered.org/t/html-template-use-msg-payload/85557/11 "2024-02-29T23:37:15Z")

</div>

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