Why?

Customer had a requirement to copy a long string value from a field in a report to paste into another application. The values were being displayed in a classic or interactive report, and the user was trying to highlight the string value and use CTRL+C to copy. Most cloud infrastructure providers offer a simple Copy link or button, so I decided to creating something similar in APEX.

This post will cover use with Classic and Interactive reports for use with page items check out Akil R's post here.

How?

This post will use the Universal Theme Button Builder to build some button HTML Markup. Then add a column to a Classic or Interactive Report to display the button. Finally, create a dynamic action to run some javascript to copy the data.

Build the Button

Head on over to Universal Theme Button Builder to start building a button.

In this example I'll use an icon only, enter the button label, select an icon and play with the other settings to get what you are looking for.

Then copy the HTML Markup. I ended up with this.

<button type="button" 
 title="copy to clipboard" 
 aria-label="copy to clipboard" 
 class="t-Button t-Button--noLabel t-Button--icon t-Button--hot t-Button--success t-Button--noUI">
     <span aria-hidden="true" class="t-Icon fa fa-clone"></span>
</button>

Add to a Classic Report

To add a button column to a classic report right click on the "columns" node and select "Create Virtual column". A new column will be added called called "DERIVED$01".

The column type defaults to Link, change this to plain text, give the column a heading.

Add to an Interactive Report

To add a button column to an Interactive report add an extra column in the report sql. In this example I simply added

null COPY_URL

to the select statement, the COPY_URL column is then created automatically. The column type should default to Plain Text, if it doesn't set it to Plain text. Heading will default to the column name, amend if necessary.

Add the HTML Markup to the button column

Now we have created a button column we just need to add the HTML, same process for both Classic and Interactive Report Columns.

Under the Column Formatting Region, open the Code Editor for the HTML Expression field. Paste in the HTML Markup created in the Build a button step.

Now we'll add some custom code to make it work.

First we add in a data attribute, it doesn't matter what you call it as long as it starts with "data-" and is in lower case, as below line 4, I've named my "data-file-url", the assigned value "#FILE_URL#" is using the APEX HTML Item substitution syntax, which at run time will replace #FILE_URL# with the value of the FILE_URL column defined in the report.

Secondly, add a custom class, this will be used when we define the dynamic action as the jquery selector. In the example below, line 5, I used "cc-copy-btn".

<button type="button" 
        title="copy to clipboard" 
        aria-label="copy to clipboard" 
        data-file-url="#FILE_URL#"
        class="cc-copy-btn t-Button t-Button--noLabel t-Button--icon t-Button--hot t-Button--success t-Button--noUI">
        <span aria-hidden="true" class="t-Icon fa fa-clone"></span>
</button>

Add a dynamic action to execute javascript

Navigate to the Dynamic Actions tab, then right click on the Events -> Click node and select "Create Dynamic Action".

Give the Dynamic Action a name, for example Copy URL on Button Click.

In the When region the event should default to "Click", if you right clicked in the right node earlier! If not change it. For Selection Type select jQuery Selector, then enter the custom class you entered in the previous step prefixed with a period (.).

You should end up with something similar to this

Now click on the "Show" action node under the True branch. Optionally give the action a name, change the Action to "Execute JavaScript Code".

Open Code Editor in the Settings -> Code field and enter the following code.

This is where the magic happens. The first line creates a variable called copiedText and assigns the value from data-file-url attribute, the syntax to retrieve that attribute value in javascript is "data('attributeNameInCamelCase')", data-file-url becomes fileURL, you drop the leading data and remove the hyphens and change the case of the first letter of the each word except the first. For a longer explanation check out HTML data-* attribute.

The second line calls the javascript navigator.clipboard.writeText api and sends the value in the variable copiedText. Further details available at Clipboard API

The final line is optional and provides a pop up message in APEX to confirm the text has been copied to the clipboard.

let copiedText = $(this.triggeringElement).data('fileUrl');
navigator.clipboard.writeText(copiedText);
/*to show success message (Optional)*/
apex.message.showPageSuccess('URL Copied to Clipboard!');