IG Hack - #1, Add a custom action to the Actions Menu in Interactive Grid in Oracle APEX

-


Interactive Grid is the power house of Oracle APEX. It provides us with several out of the box features.

This blog explains how to add a custom action to the Actions Menu.

1) Create an Interactive Grid. 

2) Provide a Static ID to the Interactive Grid. (In this example it is emp).

3) Paste the below javaScript code in the Execute When Page Loads section.
     
$("#emp_ig_toolbar_actions_button_menu").menu("option").items.push({
            type: "action",
            id: "upload",
            hide: false,
            label: 'Show Alert',
            icon: 'fa fa-eye',
            action: function() {
                            alert('Alert Triggered Successfully');
            }       
});
     
    In the above code, emp must be replaced with the Static ID that you have provided.

    The values of id, label, icon can be replaced with any other text/icon, based on the requirement.

    As a result of the above code, an Alert pops up on click of the newly added action.  

    Code to show the alert can be replaced with any other javaScript code/function call, based on the requirement.

    Example: apex.event.trigger API can be used to call a custom Dynamic Action.

 

Click here for DEMO   

References: https://docs.oracle.com/database/apex-5.1/AEEUG/what-is-interactive-grid.htm#AEEUG-GUID-DD8997BE-0F32-4591-ADB0-078DC635C10B

https://docs.oracle.com/database/apex-5.1/AEAPI/apex-event-namespace.htm#GUID-023BDCBA-3907-4CFD-A026-F3D6A03FBABE


HAPPY CODING!!! 
Thank you :)



Comments

Post a Comment

Popular posts from this blog

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.which > 57) &am
Read more

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 Interactive Report SELECT EMP_ID, EMP_NAME, 'Preview' as "PREVIEW" FROM T_EMPLOYEE; 8) Go to the PREVIW column
Read more

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 p lease 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:        /*
Read more