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/

Context Menu Button in Oracle APEX 5.1

There are times when you want to add multiple buttons attributing to the same subject.

For Example: Roles in the organization. You cannot create multiple buttons for each role, rather the good option would be to have a Menu or a menu button.

In this post, I would like to share, how to create a menu button.

I have tried this in the version 5.0/5.1, below are the steps.

Step 1:  Create a button with CSS Classes as js-menuButton in the Appearance section of the Property Editor

Step 2: Add the Custom Attributes in the Advanced section of the Property Editor for the button as 

data-menu="Some_Id_menu" 

In my case, I am naming it as data-menu="Create_Employee_menu"

Step 3: Create a list in the Shared Component which you want to use in the button. It can be either Static or Dynamic as per the requirement. For the demonstration, I am going with the static list.

My list (Named as Role_List) has 3 Entries

1.  Developers
2. Testers
3. Managers

Once the creation of the List in the Shared Component is completed. 

Create a List Region in the page where you have the button with the source as the List which you created in the Shared component.

Enter the Static Id same as the prefix which you used for the Button as the data-menu attribute without _menu in Step 2

In my case, it would be Create_Employee

Step 4: Change the Behaviour of the Button to Action: Defined by Dynamic Action. You should be able to use the Context Menu button.

Step 5: Change the Template of the List Region to Menu Popup.
You can find this in the Attribute tab of the List Region -> Property Editor -> List Template

References: https://apex.oracle.com/pls/apex/apex_pm/r/520052/files/static/v56/jsdoc/menuButton.html