APEX page actions menu

Create a dropdown menu on an APEX page

Adapted from: https://apex.oracle.com/pls/apex/f?p=42:1306

Blog post: https://jeffkemponoracle.com/2019/08/menu-popup-with-declarative-list/

1. Create a List (Shared Components)

   • Set target to URL: javascript:apex.event.trigger(document,'menuAction','DOSOMETHING')

2. Create a List region on the page

   • Position: Content Body
   • Template: Blank with Attributes
   • Static ID: actions

3. Create a Button on the page

   • CSS Classes: js-menuButton
   • Icon: a-Icon icon-menu-drop-down
   • Custom Attributes: data-menu="actions_menu"

4. Create a Dynamic Action on the page

   • Event: Custom
   • Custom Event: menuAction
   • Selection Type: JavaScript Expression
   • JavaScript Expression: document
   • True Action: Execute JavaScript Code apex.submit({request:this.data,showWait:true});

Open a Modal page

1. Create a hidden item, e.g. P1_MODAL_URL

   Note - a separate item will be needed for each target page.

2. Add a Before Header process with PL/SQL

   (if the target page is page 2, and it needs the record ID passed to it)

   :P1_MODAL_URL := apex_page.get_url(p_page=>2, p_items=>'P2_RECORD_ID', p_values=>:P1_RECORD_ID);
   

   P1_MODAL_URL will be set to something like:

   javascript:apex.navigation.dialog('f?p=100:2:1155464454546544::NO::P2_RECORD_ID:1234\u0026cs=1sEhYblablabla\u0026p_dialog_cs=tXJ756blablabla'
     ,{title:'Page Title',height:'auto',width:'720',maxWidth:'960',modal:true,dialog:null}
     ,'t-Dialog-page--standard '+'',this);
   

3. Set the list action

   javascript:apex.event.trigger(document,'menuAction','OPEN_MODAL')

4. Modify the Dynamic Action menuAction

   switch(this.data) {
     case 'OPEN_MODAL':
       eval($v("P1_MODAL_URL"));
       break;
   
     default:
       apex.submit({request:this.data,showWait:true});
   }
   

Don't open Modal page if user has unsaved changes

1. Modify the Dynamic Action menuAction

   switch(this.data) {
     case 'OPEN_MODAL':
       if (apex.page.isChanged()) {
         apex.message.alert("Please save your changes first.");
       } else {
         eval($v("P1_MODAL_URL"));
       }
       break;
   
     default:
       apex.submit({request:this.data,showWait:true});
   }