Skip to content

APEX page actions menu

Jeffrey Kemp edited this page Aug 17, 2019 · 8 revisions

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});
    }
    
Clone this wiki locally
You can’t perform that action at this time.