HTML Template - use msg.payload

Dashboard
,
1

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?

<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

2

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...

3

Hi Paul,

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

But it doesn't work at all.

4

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

5

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

6

Try

<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

7

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.

8

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.

9

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

<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.

10

E1cid,

that did it! Thank you!

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!

11

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