Copy an array item to clipboard

As said in the title, I need to copy the array item’s value to the computer’s clipboard.

How can I do that?

Will this help https://www.w3schools.com/howto/howto_js_copy_clipboard.asp?

1 Like

I have this working with data detail (single record):

/* COPY URL TEXT */
function copyText(htmlElement)
{
if (!htmlElement) {
return;
}
let elementValue = htmlElement.innerText;
let inputElement = document.createElement(‘input’);
inputElement.setAttribute(‘value’, elementValue);
document.body.appendChild(inputElement);
inputElement.select();
document.execCommand(‘copy’);
inputElement.parentNode.removeChild(inputElement);
}
document.querySelector(’#copy-url-text-btn’).onclick = function()
{
copyText(document.querySelector(’#copy-url-text’));
}

However, I’ve run into a walk with trying to figure out how to use it within a repeat region (multiple records). I guess the problem I can’t figure out is how to make the IDs change to match the record ids.

Any suggestions?

You could use a flow to pass the ID of the element you want to copy, to a script, and use a button to pass the ID to the flow. You could use the same flow to copy any part of the page (with an ID) - and the same flow/script for any pages.

For a repeat region, you would just need to pass the repeat ID (eg default 'repeat1). To copy individual records, you need to pass something like dmx-bind:id="id_{{$index}}"

Button (to copy multiple records/repeat):

<button id="copybtn1" class="btn btn-primary" dmx-on:click="flow1.run({toCopy: 'repeat1'})">copy all records</button>

Flow:

<script is="dmx-flow" id="flow1" type="text/dmx-flow">{
  meta: {
    $param: [
      {type: "text", name: "toCopy"}
    ]
  },
  exec: {
    steps: {
      runJS: {
        function: "copyToClpbrd",
        args: ["{{$param.toCopy}}"],
        name: "copyToClpbrd"
      }
    }
  }
}</script>

Script:

<script>
    function copyToClpbrd(p1) {
    var copyText = document.getElementById(p1);
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(copyText);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    window.getSelection().removeAllRanges();
    dmx.parse("notifies1.success('successfully copied')");
}</script>
1 Like

Thank you so very much Tom!
It appears that I really need to learn to implement Flow. It seems that it opens up more customization.
I love the ease of Wappler. However, I lack the knowledge of all that’s in Wappler’s toolbox, and the capabilities that are available when you know how to use them.
If you don’t mind, during those times of ‘where to go from here,’ may I call upon your expertise?
I’m going to give this a go immediately.
Thanks again.

I would be happy to help if I can. However, I don’t have much experience or expertise with flows. In fact, it’s not necessary to use a flow in this case - I hope I didn’t make things seem more complicated than necessary. However, generally, I think it’s a good approach to use methods which are resuable/portable.

This is the sort of feature which might be useful in many situations and using a flow enables this. It’s just a matter of copy/pasting the code where needed (or putting it in an external file) and passing relevant parameters with buttons etc.

2 Likes

Hi Tom, I am trying to use your code however on an individual element rather than the complete row. The target for the flow {{$index}} is not working - my coding is incorrect. Would be grateful if you could guide me! Thanks

<input dmx-bind:id="id_{{$index}}" name="copyName" type="text" class="form-control" dmx-bind:value="first_name+' '+name">

<button id="copybtn1" class="btn btn-primary" dmx-on:click="flow1.run({toCopy: 'id_{{$index}}'})">copy</button>

Hi Cosmo
A simpler way might be to use the browser component, without any additional Javascript. I don’t think these options existed when this thread started.

Add these actions to your button:

image

Update: actually, there’s a simpler way, again, with the browser component:
dmx-on:click="browser1.writeTextToClipboard(text1.value)"
(I’ve only just noticed this option exists.)

1 Like

Hi Tom,

Thanks for your reply. I was hopeful but I am getting nothing. Maybe because the hidden input is in a repeat?

<input id="copyName" name="copyName" type="hidden" class="form-control" dmx-bind:value="first_name+' '+name">
<button id="copy" dmx-on:click="browser1.writeTextToClipboard(copyName.value)"><i class="fa fa-clipboard"></i></button>

Hi Andre
I don’t think it should matter that the input is in a repeat.

You could try simplifying things. Eg test writeTextToClipboard on a non-repeating value - or simply with some static text (in quotes) to make sure it’s working and the relevant components are available. Temporarily ‘unhide’ the hidden field to check that the expected value is there etc.

Hi Tom,

yes it works in a static situation. I believe it is because in a repeat the copyName input is not unique. Which is not a problem dmx-bind:name="copyName{{$index}}" will solve this. However I am unable to bind index within the on click action dmx-on:click="browser1.writeTextToClipboard(copyName{{$index}}.value)" does not work.

Name doesn’t need to be unique - so you don’t need to use $index - though of course it will have a different value in each repeat.

Just use name="copyName" and
dmx-on:click="browser1.writeTextToClipboard(copyName.value)"

At least I think that is what you need.

Ah Tom, see my message two days ago I used exactly that code, but it doesn’t work in the repeat (but does on its own). Never mind, it is not essential but would have been nice. Many thanks!

Sorry - I obviously didn’t look very carefully at your previous message.

However, I think what I suggested (and what you seemed to have already tried) should work. I just pasted your code into one of my tables (created by the table generator) and it worked fine. Perhaps some other issue is causing the problem.

I shall investigate further. Thanks for your time Tom

What is the way of adding ‘\n’ new line like
into writeTextToClipboard action?