Copy Text on Click

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here.

Suppose you want to make an element copyable by simply clicking on it. Here are some brief instructions.

First, add the JS Notify library so we can show a notification when something is copied.

Header:

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

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

Now you will need to go to the page you would like to implement this customization.

JavaScript tab:

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

.copyabletext {
    cursor: copy;
}

Now any field that we add the CSS Class of copyabletext will be copyable.

How did we do ?

Change the Default Record Count Text

Delete Connected Child Records Along with the Parent Record

Copy Text on Click

First, add the JS Notify library so we can show a notification when something is copied.

Header:

Footer:

Now you will need to go to the page you would like to implement this customization.

Now you will need to go to the page you would like to implement this customization.

JavaScript tab:

CSS Tab:

Now any field that we add the CSS Class of copyabletext will be copyable.

How did we do ?

We'd love to hear your feedback.