Navigation Menu : Tips & Tricks

Today in this blog I am going to discuss a tip about the Navigation Menu of any APEX application.

Navigation Menu is one of the basic share component units which is used in almost every application.

We often create child navigation units which are categorized under a parent navigation unit. Like in the following example "sales by category", "sales by month", "sales by product" all are child navigation units of parent unit "Reports".

If we have to expand the "Reports" section, we have to click on the down arrow only.

But how can we make it more better, like even if I click on "Reports" also it should expand the list. Lets see how to build this feature:

Step 1: Go to Global Page and create a dynamic action for "click" event.

Event : Click

Selection Type : jQuery Selector

jQuery Selector : .a-TreeView-content

TreeView is a jQuery UI widget that implements a tree view used to display and interact with hierarchical data.

Please go through following link to read more about this JQuery Widget

https://docs.oracle.com/database/apex-18.1/AEXJS/treeView.html#:~:text=A%20jQuery%20UI%20widget%20that,minor%20differences%20in%20keyboard%20handling.

Step 2: Set the following properties of True action

Action : Execute JavaScript Code

Code : $(this.triggeringElement).parent().find('.a-TreeView-toggle').click();

As we have built this dynamic action on Global page so it will be applicable to all the navigation units of the application.

That's it !!

It is a very simple way to enhance the navigation menu functionality of your application.

Hope you liked it.