# Dashboard 2.0 copy to clipboard

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488>\
**Category:** Dashboard\
**Created:** [18 February 2025 14:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488 "2025-02-18T14:48:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [18 February 2025 14:48 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/1 "2025-02-18T14:48:45Z")

</div>

Is there an easy way to have a button or something similar on a dashboard that when clicked will copy text sent from the flow to the clipboard of the user ready to be pasted in another application?

I am sure this would be doable in uibuilder, but I am looking to use dashboard 2.0.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [18 February 2025 15:27 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/2 "2025-02-18T15:27:46Z")

</div>

There is a JavaScript API for this which you can use in a template node.

```auto
function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(function() {
    console.log('Text copied to clipboard');
  }).catch(function(error) {
    console.error('Unable to copy text to clipboard', error);
  });
}

// Usage example
copyToClipboard('Hello, world!');

```

You need to provide the `text`.

---

<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 February 2025 15:30 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/3 "2025-02-18T15:30:40Z")

</div>

My subflow [live debug](https://flows.nodered.org/flow/b8bf66d114af8eac4afd5d288f3f4a72) uses this function.

```auto
function copy_text(input) {
            // Get the text field
            var copyText = document.getElementById(input).innerText;
            var dummy = document.createElement("textarea");
            document.body.appendChild(dummy);
            dummy.value = copyText;
            dummy.select();
            document.execCommand("copy");
            document.body.removeChild(dummy);
            alert("Copied Data to Clipboard\n\n" + copyText)
        }

```

and uses the onclick action to call the function

```auto
onclick="copy_text('json_data_${date}')">

```

You could use this in a template node with some reworking

---

<div class="post-metadata">

**Author:** ![tmichaeltx](https://avatars.discourse-cdn.com/v4/letter/t/73ab20/32.png) [@tmichaeltx](https://discourse.nodered.org/u/tmichaeltx)\
**Post date:** [20 February 2025 00:23 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/4 "2025-02-20T00:23:21Z")

</div>

Do you have any insight into how to pass data into a template node, so that I can dynamically update the text that will be copied to the clipboard?

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [20 February 2025 13:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/5 "2025-02-20T13:24:33Z")

</div>

There is detailed [Documentation](https://dashboard.flowfuse.com/) on this - I recommend to read it.

If the text you wish to push into the clipboard exists in some UI element in your page, just take it from there and use the API to push to the clipboard as described earlier in this thread:

```auto
const myText = document.getElementById('myTextField').value;
navigator.clipboard.writeText(myText);

```

Alternatively; you can send the desired text as a message property. Just set a msg listener in your template node:

```auto
mounted() {
   this.$socket.on('msg-input:' + this.id, function(msg) {
      navigator.clipboard.writeText(msg.payload) 
   });
},

```

In case you are working with multiple concurrent clients, and want the operation to apply only to the current page, either configure this in the dashboard or check the msg was not originated from another page.

---

<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:** [22 March 2025 13:24 UTC](https://discourse.nodered.org/t/dashboard-2-0-copy-to-clipboard/95488/6 "2025-03-22T13:24:50Z")

</div>

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