Jump to content

Recommended Posts

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.

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

  • 2 years later...

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>

image.png

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

Link to comment
Share on other sites

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:

image.png

image.png

Link to comment
Share on other sites

  • 1 year later...

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. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...