A community member asked a question:
"Client need the Navigator of Nav Bar on top left side before company logo. i could manage to move the Nav Bar button, but when i click on it, the content is appearing on right side as usual... is there any way that i can move only navigator to the left side of the screen?"
While I don't recommend this approach (primarily because it will overlap on several other design patterns such as master/detail, nav collection, etc.), I wanted to see how we can achieve something like that? This post is purely from a curiosity point of view.
Most of the NavBar SlideIn/SlideOut toggle functionality is controlled with the delivered PTNUI_NAVBAR_CSS free-form stylesheet object.
To change the NavBar SlideIn direction from "right to left" to "left to right", we need to make the following changes:
Update .PTNavBarModal class to replace %AlignEnd with %AlignStart.
Also, update the media query for SFF.
More details on these meta-HTML variables can be found here:
PeopleBooks Reference
Next, we need to find all occurrences of the following in PTNUI_NAVBAR_CSS:
dir="rtl"
And replace it with:
dir="ltr"
Note (Updated 03/28/2018)
Please review comments in this blog post. This POC works only when the NavBar is opened in expanded state which can be achieved with the approach provided in the following blog post.
Open NavBar in expanded mode with Navigator
Demo
Demo Environment Details
- HCM 9.2 PUM 23
- PeopleTools 8.56.01
"Client need the Navigator of Nav Bar on top left side before company logo. i could manage to move the Nav Bar button, but when i click on it, the content is appearing on right side as usual... is there any way that i can move only navigator to the left side of the screen?"
While I don't recommend this approach (primarily because it will overlap on several other design patterns such as master/detail, nav collection, etc.), I wanted to see how we can achieve something like that? This post is purely from a curiosity point of view.
Most of the NavBar SlideIn/SlideOut toggle functionality is controlled with the delivered PTNUI_NAVBAR_CSS free-form stylesheet object.
To change the NavBar SlideIn direction from "right to left" to "left to right", we need to make the following changes:
Update .PTNavBarModal class to replace %AlignEnd with %AlignStart.
Also, update the media query for SFF.
More details on these meta-HTML variables can be found here:
PeopleBooks Reference
Next, we need to find all occurrences of the following in PTNUI_NAVBAR_CSS:
dir="rtl"
And replace it with:
dir="ltr"
Note (Updated 03/28/2018)
Please review comments in this blog post. This POC works only when the NavBar is opened in expanded state which can be achieved with the approach provided in the following blog post.
Open NavBar in expanded mode with Navigator
Demo
Demo Environment Details
- HCM 9.2 PUM 23
- PeopleTools 8.56.01
Hi Sasank,
ReplyDeleteI have tried the same thing with Tools 8.56.04 and FSCM9.2 PUM 26 , I am getting the slide with empty contents on left side again. is there any other style-sheet that need to be modified? Thank you in advance.
Regards,
Raj
@Raj - Yes. Thank you for reporting this! I was able to replicate the issue.
DeleteIt works for me in this post because I also had an additional customization on NavBar to open in expanded state.
https://pe0ples0ft.blogspot.com/2016/08/pt-855-flu-drop-down-menu-vs-navigator.html
So, it appears that when it opens in expanded state, the above rtl to ltr change is working as expected. But without that customization, it is not.
When I get some time, I will try to figure out the additional CSS/JS mods that might be required to make this work as delivered.
Hi Sasank
Deleteany update on this issue ?
thanks in advance
Julien
Hi Julien - Sorry. No. I don't have any updates on this issue. I did not pursue it further.
Deletehi Sasank
ReplyDeletei am using a navigation collection to land to my desired CREF while navigation through a tile from homepage .
I would like to have the same Nav collection displayed on the Page when the Navigate to the page using the NavBar
How can i do it .If i useWork center then when i click from the homepage on the tile will it display both nav collection and the work center tagged to the page .
please advice
Looks like this is two part question.
DeleteFor the first part:
If you directly navigate to the page using NavBar, then the content reference (CREF) that you are accessing is a direct link to the component/page. In this case, the Nav Collection will not appear. You can compare the Nav Collection CREF with this CREF to understand the difference.
The only option there is to hide the existing CREF for the component/page and replace it with a link to the Nav Collection CREF.
For the second part:
"If i useWork center then when i click from the homepage on the tile will it display both nav collection and the work center tagged to the page."
I will not recommend using Work Center within a Nav Collection. Work Center already has its own navigation pane and will cause double navigation panes if used in conjunction with a Nav Collection as you have noticed.
i need to call the link from peoplecode ,and the page i need to land on is the second page(sequence wise in nav coll) .
ReplyDeleteHello Sasank,
ReplyDeleteYou must to aware of the behavior of the notification flag .when to click on the flag a page containing action and alert pops up.
I need to implement a similar functionality with a custom button to be added on header and a custom page should pop up in a similar way the notification page pops up .Please suggest
Hi Sasank,
ReplyDeleteIs there a possibility of having both options Classic Home and Fluid home on the NavBar.
Regards
Vasim
I don't recommend this but it is possible to customize the application to display both the 'Classic Home' and 'Fluid Home' tiles on the NavBar.
DeleteRefer: https://pe0ples0ft.blogspot.com/2019/01/classic-fluid-home-navbar-tiles.html
Sasank.. We are creating a new portal for SS users (external) which should not display the navbar. They will be navigating to pages only through the fluid homepage. When they login through employee portal internally, they should be able to use the navbar. Is there a way to disable at the new portal definition level?
ReplyDeleteYes. You can create a different theme for the new portal for SS users and use the Assign Branding Themes page to set the theme (which is different to internal portal).
DeleteI have a post here that talks about Role Based branding which a bit more granular but you will get an idea of how this works.
https://pe0ples0ft.blogspot.com/2016/08/peopletools-branding-role-based-themes.html
PeopleBooks reference:
https://docs.oracle.com/cd/E92519_02/pt856pbr3/eng/pt/tprt/task_AdministeringSystemBranding.html#u8d8f2d24-c9d9-46ca-9428-495de3dd365b