Thursday, May 14, 2020

How to collapse Navigation Menu on page load in Oracle APEX

By default, an APEX application shows the navigation menu on the left hand side and it's expanded by default when the application or a page loads.


What if you want to display it in Collapsed state by default ? Is it possible ?


Yes, this can be done in two ways. Let's see how to achieve this.


Method 1 -


You can set this at design time so that the Navigation menu is displayed collapsed by default when the application loads.


To do this -

- Navigate to Shared Components

- User Interface Attributes -> Navigation Menu

- Under Template Options, uncheck 'Use Template Defaults' and check 'Collapsed by Default (Default)' option

- Apply Changes




Method 2 -


Above method will let you hide Navigation menu but it won't be conditional as it will take effect when the application loads.


What if you want to hide the Navigation menu when a particular page loads ?


Let's take an example of below page. By default it will look like this with expanded Navigation Menu -



Let's hide the Navigation menu conditionally.


To do this -

- Navigate to the desired page definition

- Go to Dynamic Actions section

- Create a new DA on Page Load

- In True section, set Action as Execute JavaScript Code

- Enter below code -

$('#t_Button_navControl').click();

- Save





Now when you run the application and navigate to this particular page, the page will open and the Navigation Menu will be collapsed giving the page more space on screen.



Share: