Sasank Vemana, Quest Guest Blogger | Blog content sourced from Sasank’s PeopleSoft Log

Fluid UI provides an option to override the default ‘Classic’ look and feel of the page tabs located at the top of the page by using left navigation with PT_SIDE_PAGETABS. PT_SIDE_PAGETABS is nothing but a page definition (Type: Side Page 1) which needs to be included in the component page list. That’s it!

If we include PT_SIDE_PAGETABS in the component, the page tabs which are usually located at the top will automatically transform to a left navigation. This left navigation can be expanded and collapsed by the users.

Demo
For this demo, I am using the same component which used in one of my previous posts.

Project: https://github.com/SasankVemana/Fluid-UI-Grid-Demos

As we can see in the demonstration, the left navigation is always collapsed by default and the users will need to slide out the left navigation every time they want to tab to a different page.

What if we want to programmatically control the left navigation default behavior?
Particularly for larger form factor devices (laptops, desktops, etc.), it would save several clicks if the left navigation was expanded by default and fixed.

This can be achieved using the PT_PAGE_UTILS API – PanelController App Class.

In the following code, I initialized the left navigation (Side1) mode to fixed only for extra large form factor devices using the PanelController Class SetSide1ModeFixed method.

PeopleCode for reference:

import PT_PAGE_UTILS:Utils:*;

import PT_PAGE_UTILS:PanelController:*;

 

/* Set default viewport to detect device form factors */

(create PT_PAGE_UTILS:Utils()).SetDefaultViewport();

 

/* Left Navigation – Open Expanded for Extra Large Form Factor */

If %Request.BrowserDeviceFormFactor = %FormFactor_XLarge Then

 

Local PT_PAGE_UTILS:PanelController &oPC = create PT_PAGE_UTILS:PanelController();

 

&oPC.Initialize( True);

&oPC.SetSide1ModeFixed();

&oPC.UpdatePanel();

 

End-If;

See original code at github.com

Demo