👉 Copy to Clipboard in Oracle APEX: A Step-by-Step Guide

1. Introduction

This article explains How to create Copy to Clipboard in Oracle APEX. The solution is implemented using a combination of Oracle APEX, Javascript and CSS.

2. Tools and Technologies

To achieve the desired functionality, the following technologies are used:

• Oracle APEX
• Javascript
• CSS

3. Business Requirement

Business users frequently need to copy key information such as IDs, reference numbers, URLs, email addresses, report values, or Code snippet from Oracle APEX applications to share with other teams or use in external systems. Currently, users must manually select and copy text, which is time-consuming and prone to errors.

To improve productivity and user experience, the application must provide a Copy to Clipboard feature that allows users to copy specific field values or report data with a single click. This functionality should be intuitive, fast, and work consistently across supported browsers without requiring additional user actions.

The solution should be reusable across multiple pages and components within the Oracle APEX application while maintaining security and performance standards.

4. Implementation Steps

Step 1: Go to the Page Designer

Navigate to the Page Designer of the page where you want to create the Copy to Clipboard button.

Paste the following JavaScript code in the Execute when Page Loads section.

For copying text, we use the JavaScript function navigator.clipboard.writeText.

In this example, the code is implemented inside a Rich Text Editor, but you can place it wherever required based on your use case (for example, in a report column, button action, or dynamic content).

$(document).ready(function() {
    $('pre:has(code)').each(function() {
        var $pre = $(this);
        var $code = $pre.find('code');
        $pre.addClass('code-block-wrapper');
        var $button = $('<button class="copy-code-button" type="button" aria-label="Copy to clipboard">COPY <i class="fa fa-clipboard" aria-hidden="true"></i></button>');
        $pre.prepend($button);
        $button.on('click', function() {
            var codeText = $code.text();
            navigator.clipboard.writeText(codeText).then(function() {
                $button.html('COPIED! <i class="fa fa-check" aria-hidden="true"></i>');
                $button.addClass('copied');
                setTimeout(function() {
                    $button.html('COPY <i class="fa fa-clipboard" aria-hidden="true"></i>');
                    $button.removeClass('copied');
                }, 2000);
            }).catch(function(err) {
                console.error('Could not copy text: ', err);
                apex.message.alert("Failed to copy to clipboard. Please select and copy manually.");
            });
        });
    });
});

Step 2: Now go to the page inline CSS

On same page, go to page inline css and paste below code.

pre.code-block-wrapper {
    position: relative;
    background-color: #282c34!important;
    border-radius: 6px!important;
    margin: 1em 0;
    overflow-x: auto!important; 
    max-width: 100%!important; 
    padding: 3rem 1em 1em 1em!important;
}

pre.code-block-wrapper::-webkit-scrollbar {
    height: 8px!important;
}
pre.code-block-wrapper::-webkit-scrollbar-thumb {
    background: #5c6370!important;
    border-radius: 4px!important;
}
pre.code-block-wrapper::-webkit-scrollbar-track {
    background: #282c34!important;
}

pre.code-block-wrapper code {
    color: #ffffff!important;
    font-family: 'Courier New', Courier, monospace;
    white-space: pre; 
    font-size: 0.95rem;
    line-height: 1.5;
    
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: block; 
}
.copy-code-button {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #ddd;
    padding: 5px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px; 
    transition: all 0.2s ease;
    z-index: 10;
    user-select: none; 
}

.copy-code-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.copy-code-button.copied {
    background-color: #28a745;
    border-color: #28a745;
    color: #fff;
}
@media only screen and (max-width: 600px) {
    pre.code-block-wrapper {
        padding: 3rem 0.75em 0.75em 0.75em; 
    }

    pre.code-block-wrapper code {
        font-size: 0.85rem; 
    }

    .copy-code-button {
        padding: 4px 8px; 
        font-size: 0.7rem;
    }
}

Step 3: Save and Run the page

5. Output

Following the above steps, you can create Copy to Clipboard in Oracle APEX. This ensures a smoother and more user-friendly experience.

Thanks for reading! We hope this guide helped you to Create Copy to Clipboard in Oracle APEX.