Copy the value of an Item to Clipboard in Oracle APEX

-

APEX does not provide an inbuilt functionality to copy the value of a page item to clipboard.

Use my plug-in Copy To Clipboard to achieve or if it has to be achieved via code please follow the below steps :-

For visible Items:

1) Create an  Item in the APEX page. (In this example the Item is P1_ITEM)

2) Create a button. (In this example the button is P1_COPY)

3) Create a Dynamic action 

        Event: Click

        Selection Type: Button

        Button: P1_COPY

4) Create a True Action

     Action: Execute JavaScript Code

     Paste the below code:       

/*to select the text field*/
$("#P1_ITEM").select();

/*to copy the text inside the text field*/ 
document.execCommand("copy");

/*to show success message (Optional)*/
apex.message.showPageSuccess('Copied to Clipboard!');

For hidden Items:

Step 1,2 and 3 is similar

4) Create a True Action

     Action: Execute JavaScript Code

     Paste the below code:       

/*to get the value of the hidden item*/
let item = $("#P1_ITEM");

/*to change the item type to text and select the value inside the item*/ 
item.attr("type", "text").select();

/*to copy the text inside the item*/
document.execCommand("copy");

/*to change the item type to hidden*/
item.attr("type", "hidden");

/*to show success message (Optional)*/
apex.message.showPageSuccess('Copied to Clipboard!');

For Radio Group Items:

1) Create an  Item in the APEX page. (In this example the Item is P1_RG_ITEM, Type -> Radio Group)

2) Create another  Item (In this example the Item is P1_ITEM, Type -> Hidden)

3) Create a button. (In this example the button is P1_COPY)

3) Create a Dynamic action 

        Event: Click

        Selection Type: Button

        Button: P1_COPY

4) Create a True Action

     Action: Execute JavaScript Code

     Paste the below code:  

/*to get the value of the checked Radio Group*/
let itemValue = $('input[name="P1_RG_ITEM"]:checked').val();
if(itemValue) {
    /*to store the seleted value*/
    $s('P1_ITEM',itemValue);

    /*to get the value of the hidden item*/
    let item = $("#P1_ITEM");

    /*to change the item type to text and select the value inside the item*/ 
    item.attr("type", "text").select();

    /*to copy the text inside the item*/
    document.execCommand("copy");

    /*to change the item type to hidden*/
    item.attr("type", "hidden");

    /*to show success message (Optional)*/
    apex.message.showPageSuccess('Copied to Clipboard!');
}


Click here for DEMO




HAPPY CODING!!! 

Thank you :)  

Comments

Post a Comment

Popular posts from this blog

Display and Edit CLOB Content in Oracle APEX

-
Image
In this post I will be explaining how to display  and edit a CLOB content in Oracle APEX.  Please follow the below steps: 1) Create a table T_EMPLOYEE CREATE TABLE T_EMPLOYEE ( EMP_ID NUMBER, EMP_NAME VARCHAR2(100), DESCRIPTION CLOB ); 2) Insert the required data into the T_EMPLOYEE table.                           3) Create a page in the application.  (In this example Page - 5) 4) Create another page with the Page Mode as Modal Dialog (In this example Page - 6)   5) Create a region and two items in Page - 6. The Items are:     P6_EMP_ID -> Type -> Hidden  (Value Protected: No)     P6_EMP_DESCRIPTION ->   Type  ->  Text Area   (or) Rich Text Editor 6) Now navigate back to Page - 5 and create a Region ( Type -> Interactive Report ) 7) Paste the below code in the Source -> SQL Query of the I...
Read more

Allow Only Number/Decimal values In a Number/Text Field Using JavaScript in Oracle APEX

-
Image
In this blog I will be explaining how to restrict users from typing only numbers/decimal values in a Number/Text Item in Oracle APEX. 1) Create a Region .    2) Create an Item in the page (Type: Text Field or Number Field ). 3) To allow only Numbers, paste the below code in the Page ->  Execute When Page Loads Section . $("#P30_NUMBER_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; var charCode = (event.which) ? event.which : event.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; });   Note: Replace P30_NUMBER_FIELD_ITEM with your Item name. 4) To allow only Decimal values, paste the below code in the  Page  ->  Execute When Page Loads Section . $("#P30_DECIMAL_FIELD_ITEM").keypress(function(event){ event = (event) ? event : window.event; if ( event.which != 0 && (event.which < 48 || event.whic...
Read more