Copy text Button

[Wernon]

Hi!

There is a Tabular report with a comment field (Text64000). 

I want to add a "Copy Text" button, that on click will copy text from the comment field to the Clipboard, so a customer can copy the text without highlighting and copying.

Just one click action to copy.

 

I have found some solution, but it does not look like working in the reports:  https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

Has anybody done it before or maybe you have some working solution?

 

Thanks in advance.

[George43]

Code for Copy to clipboard 

• In order to work this code you should replace [@field:ID#] with your unigue ID column field.
• Field [@field:Sub_Cat] replace with desired filed to copy.
• Place this code in HTML block of every row of the tabular report Data Page.

<input id="in[@field:ID#]" style="width:1px; opacity:0;" >
<button id="bt[@field:ID#]" type="button">Copy to Clipboard</button>
<script type="text/javascript">
  document.getElementById('bt[@field:ID#]').addEventListener("click", function(){
  document.getElementById('in[@field:ID#]').value="[@field:Sub_Cat]";
  document.getElementById('in[@field:ID#]').select();
  document.execCommand("copy");
});
</script>

 

[Kurumi]

In addition - you also do this in Submission Form.

1. HTML Block to insert the button

<button type="button" onclick="myFunction()" class="cbSubmitButton">Copy text</button>

2. Header and Footer for the code. In the Footer, insert this:

<script>
function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("InsertRecordFIELDNAME");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);
  
}
</script>

Reference: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard2

[Kurumi]

On 2/20/2019 at 12:52 AM, George43 said:

Code for Copy to clipboard 

• In order to work this code you should replace [@field:ID#] with your unigue ID column field.
• Field [@field:Sub_Cat] replace with desired filed to copy.
• Place this code in HTML block of every row of the tabular report Data Page.

<input id="in[@field:ID#]" style="width:1px; opacity:0;" >
<button id="bt[@field:ID#]" type="button">Copy to Clipboard</button>
<script type="text/javascript">
  document.getElementById('bt[@field:ID#]').addEventListener("click", function(){
  document.getElementById('in[@field:ID#]').value="[@field:Sub_Cat]";
  document.getElementById('in[@field:ID#]').select();
  document.execCommand("copy");
});
</script>

 

In addition to this, you can actually add more fields to the value. Like

document.getElementById('in[@field:ID]').value="[@field:FIELD1]"+" "+"[@field:FIELD2]";

So it could copy all the data in every row. Sample below:

[DesiLogi]

Hi @Meekeee,

This is a really great solution and thanks for updating it with multiple field options to copy. One question--using

document.getElementById('in[@field:ID]').value="[@field:FIELD1]"+" "+"[@field:FIELD2]";

How do you get line breaks into the clipboard with this code? I'd need a line break between field:1 and field2 (and a few others in my working example, as I have 5 fields total). I've tried inserting "<br />" and  "vbCrLf &" and also "\r\n" between the fields but none of them affect the paste from the clipboard and all fields show on one line. 

[SlowRock]

Is there a way to "copy to clipboard" with this on a List report? Since I have a list report, there are not any columns that work....