Copy Text on Click

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" />

Footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js" integrity="sha512-efUTj3HdSPwWJ9gjfGR71X9cvsrthIA78/Fvd/IN+fttQVy7XWkOAXb295j8B3cmm/kFKVxjiNYzKw9IQJHIuQ==" crossorigin="anonymous"></script>

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

5 Likes

That’s really cool, thanks for sharing!

1 Like

Hi
I want to implement this on my application . So where should I put those header and footer part code(link) in my app.

@bas123, Here’s a screenshot of where to find that:

1 Like

This code goes in the custom Header section of your appss settings page

<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" />

This code goes in the custom Footer section of your apps settings page

<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js" integrity="sha512-efUTj3HdSPwWJ9gjfGR71X9cvsrthIA78/Fvd/IN+fttQVy7XWkOAXb295j8B3cmm/kFKVxjiNYzKw9IQJHIuQ==" crossorigin="anonymous"></script>


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

Tina Write
tinawrite@example.com Won 09/25/2019
Schedule Meeting

Larry Johnson
ljohnson@example.com Won 07/01/2019
Schedule Meeting

1 Like

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.

When I click just below the title it is not working .

I have added the class name of column in following way:

Hi Tim , thank you for your help . Actually now it is working as I wanted . Thanks again for explaining in details.

1 Like