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

  • 11 months later...

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...