Was helping someone with this and wanted to post here in case its helpful.
If you want to make an element copyable (real word?) by simply clicking on it. Here’s some brief instuctions.
First add the JS Notify library so we can show a notifcation when something is copied.
Header of the App: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/styles/metro/notify-metro.min.css" integrity="sha512-PlmS4kms+fh6ewjUlXryYw0t4gfyUBrab9UB0vqOojV26QKvUT9FqBJTRReoIZ7fO8p0W/U9WFSI4MAdI1Zm+A==" crossorigin="anonymous" />
var flag = false;
function checkFlag() {
if(flag === false) {
if ($('.copyabletext').html() !== undefined || i > 30) {
flag = true;
}
window.setTimeout(checkFlag, 100);
} else {
var elements = document.getElementsByClassName("copyabletext");
var myFunction = function() {
console.log("Clicked");
navigator.clipboard.writeText(this.innerText)
$.notify("Copied to clipboard", "success");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
}
}
checkFlag();
CSS:
.copyabletext {
cursor: copy;
}
Next anything that has the CSS Class of copyabletext will be copyable.
For example, if there is a column in your table that you’d like the values to be easliy copied, simply add the class in the column settings:
You can put the JavaScript and CSS code in a page layout so that it applies to every page within the layout.
Just remember to add copyabletext as a custom class to any field you want to be copyable - see Moe’s original post for that.
I was playing around with this and noticed that if you assign an entire component the copyabletext CSS class, literally the entire gets copied when you click anywhere within it. The text below was copied with a single click.
Customers (sample)
3 Records
CUSTOMER PROFILE EMAIL STATUS CONTACT DATE SCHEDULE MEETING
David Ross davidross@example.com Won 08/15/2019
Schedule Meeting
Thank you Tim, for the detailed information. I did it in the same way. And it is working to some extent.
But still, I have the following issue.
I am trying to do the same as in the video of Moe. I have to assign a CSS class to the first column of the table as copyabletext. Now I find out that it is working for only the first row i.e title of the column as following screen shoot I have attached. I want to copy the column value as in Moes video, but in my case, it is only working for the title of the column.
Here’s a video for how you can create a copy button on a detail page through an HTML component. The solution is a slightly modified version of the one we briefly discussed here.
Below you can find the code snippets I reference throughout the video. Be sure to take note of the values I mention in the video that should be changed in the HTML source code and JavaScript.
Hi @bas123@tim.young I have the same problem you described. (The text is copied if I click on the colum title, but not on the cells)
Can you please explain what was the solution?
I found this thread really useful thank you everyone who contributed. I was actually trying to copy and paste Richtext data which I achieved very simply my modifying the Javascript ever so slightly so it grabbed the HTML text rather than just the text by modifying this line…
navigator.clipboard.writeText(this.innerHTML)
Javascript:
var flag = false;
function checkFlag() {
if(flag === false) {
if ($('.copyabletext').html() !== undefined || i > 30) {
flag = true;
}
window.setTimeout(checkFlag, 100);
} else {
var elements = document.getElementsByClassName("copyabletext");
var myFunction = function() {
console.log("Clicked");
navigator.clipboard.writeText(this.innerHTML)
$.notify("Copied to clipboard", "success");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
}
}
checkFlag();
