Create a context menu/ popup menu in the Interactive Region

Menu Popup

Consider a scenario where you have to perform multiple operations on a row of an Interactive Report.
And you need to house all the operations in one cell of the row or in the more specific term you want to create menu popup.

To create a popup menu in your Oracle Apex application, you must first have a list region on your page which contains the menu items.
Then you need to associate an icon on your page with the menu so it will open the menu when clicked. Please find the detail description for the creation of Menu Popup in IR below.

Step 1:

Create an Interactive Report with a column say "Sel"

SELECT
        CASE mod(employee_id,2)
            WHEN 0   THEN 'ContextList1'
            ELSE 'ContextList2'
        END
     || '_menu'  Sel,
    employee_id,
    first_name,
    last_name,
    email,
    phone_number,
    salary
FROM
    employees;

Note: I have suffixed the output of Sel column with "_menu"

In this example, I am generating 2 different types of menu one for Odd numbered rows and another for Even based on the Employee_id

Edit the Column SEL in Property Editor to display an icon as below

Identification ->Type- Plain Text
Column Formatting ->  <a class="#SEL#" href="#" >
                                      <i class='fa fa-chevron-circle-down fa-2x'></i>
                                       </a>


Step 2: 

• Create the List (Static or Dynamic) in the Shared Component.

For my demo, I need to create 2 lists one for odd and another for even.

Step 3:

• Create List Region in the page where you want to display the popup menu and use the list from the shared component as the source.

For my demo, I need to create 2 list regions.

• Change the List template to Menu Popup in the Attributes tab of the List Region

• Edit the Static Id and add the Custom Attributes to the List Region in the Advanced tab of the Property Editor. 

For my demo, I am using "ContextList1" as my Static ID and Custom Attribute is sytle="display:none;"

Step 4:

• Create a Dynamic Action which triggers on the click of the menu column.

In my case, I need to create a 2 DA's with Jquery Selector as ".ContextList1_menu"...

• Change the Scope of the DA to Dynamic with the Static Container as the static id of the IR where the menu resides.

In my case, it is "#Employee_IR"

•  Create an Action: Execute JavaScript Code as below

var event = this.browserEvent;

$("#ContextList1_menu").menu( "toggle", event.pageX, event.pageY );

event.preventDefault();

Here, ContextList1_menu = ID of the List Region which you created earlier + the suffix _menu.



Reference: http://hardlikesoftware.com/weblog/2015/07/13/apex-5-0-custom-menus/