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 is 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.
Demo
If we include PT_SIDE_PAGETABS in the component, the page tabs which is 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.
Demo
Hi Sasank -
ReplyDeleteThanks for sharing this info. I would just like to ask on how should the following scenario be done:
I have a navigation collection of different components in the side page. Now when I reach the last component of the side page, I would like to have a button to return to the 1st page. I tried using the delivered function 'Transfer' to do this but the Side page will exit out. May I ask how to do this through peoplecode?
Hello,
ReplyDeletewith PT 8.55 PT_SIDE_PAGETABS no longer exists.. do you have a sample code how to fix side panel?
Hi Sasank,
ReplyDeleteUnable to see left-side icon to expand and see all tabs
Navars
Hi Navars - Is this the same behavior on all browsers?
DeleteThanks,
Sasank
Yeah Sasank.. i am using 8.57 and tested in all browsers
ReplyDeleteI am not sure what the issue is in your particular case. You may want to create an Oracle Support Ticket.
DeleteHi Sasank,
ReplyDeleteI have created component with side panel and 3 pages included in it and it is working fine. But when i change language to Arabic for login fist page looks clumsy and not opening in full screen along with side panel not collapsed. When i collapse side panel than page get displayed correctly. Also 2nd and 3rd page displaying correctly with side panel not collapsed.
Is there any solution for that?