Dashboard 2.0 copy to clipboard

Dashboard
1

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.

2

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

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.

3

My subflow live debug uses this function.

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

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

You could use this in a template node with some reworking

4

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?

5

There is detailed Documentation 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:

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:

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.