✨Simplify Your APEX UI with a Three-Dot (Kebab) Menu

🚩Introduction 

  • In modern Oracle APEX applications, making the interface simple and easy to use is very important. A helpful feature is a three-dot button (⋮) that opens a popup menu, letting users access multiple options without crowding the page.

  • Instead of showing all actions on the screen, users can just click the three-dot button to see a menu list as a popup. This keeps the page clean, makes it easy to use, and gives quick access to extra options. 

📑 Why This Approach Is Needed

In Oracle APEX applications, users often need to access actions or options quickly without searching through menus or navigating multiple regions. Showing all options on the page can make the interface cluttered and confusing.

Using a three-dot button menu that opens a popup becomes important when:

  • Users want quick access to multiple actions from a single button
  • The page layout needs to remain clean and organized

  • Repetitive navigation to find options should be minimized

  • Applications aim to improve usability and efficiency

  • A smooth and intuitive interface is desired

This approach keeps the page tidy, saves user effort, and provides a better, more user-friendly experience while keeping the implementation simple in Oracle APEX.

👉 Use Case: Creating a Three-Dot Button Menu with Popup in Oracle APEX

In Oracle APEX, users often need quick access to multiple actions without cluttering the page. By providing a three-dot button (⋮), the application can show a popup menu containing various options or actions, giving users a convenient way to interact with the page.

In this blog, we will see how to implement this functionality in Oracle APEX, allowing users to open a popup menu list with a single click, keeping the interface clean, improving usability, and providing a smooth, user-friendly experience.

Step 1: 

First we need to create one List for our usecase, to do so, in the App Builder, navigate to the shared components and under the Navigation and Seach section, click on the lists option, it will open the list creation page.

 Step 2: 

In that page, click on the create button, to create new list. It will open a new popup window, enter the list name and select the list type either static / dyanamic based on your requirement, we are going to give list name as Menu_List and type as static and click next button.


Step 3: 

You will see one more popup window for entering the list entries and the target url page and click on the next button and click create list button.


Step 4: 

Now the List will be created and you can add new entry or modify the existing one based on your requirement.

Step 5: 

Now, in the page builder, create one region and select the type as List and under the Source attribute select the List which we created in the previous step.

Step 6: 

Under the appearance section select the Blank with Attributes from the Template property and give the the static id RG_MENU in the static id property in the advanced section.


Step 7: 

Now click on the Attributes tab in the top right corner and under the Appearance section, select the list template as Menu Popup.

Step 8: 

Next, create one region of type static content and create one button under that region. Name the button and select the slot position to copy. Under the Appearance section, select the button template as ICON and enter the icon as fa-ellipsis-v.

Step 9: 

Under the Behaviour section, select the action as Defined by Dynamic Action and under the Advanced section, in the custom attributes copy the following : 
                           
                                                 data-menu = "RG_MENU_menu"


Step 10: 

Now save and run the page, you will see the region with the button, on clicking on that button, a popup will be shown with the created list entries.




🔥 Conclusion

Thus, in Oracle APEX, using a three-dot (⋮) menu is a simple way to keep the page clean and easy to use. Instead of showing many buttons, users can click the menu to see more options. This makes the app look neat, saves space, and helps users find actions quickly while keeping everything easy to manage.


Comments

Popular posts from this blog

🔍 Extending Smart Search Filter for Multiple Regions

💡 Designing Dynamic QuickPicks in Oracle APEX

📌Track Active Tab switch in Region Display Selector without any plugins