Branding 8.54+ - Role Based Theme Assignment/Override

In the past, I have written about Branding PeopleSoft applications using themes (and even theme macro sets in PeopleTools 8.55). In this post, I want to quickly show how we can assign different themes to different users based on roles/permission lists.

Using the steps detailed in my previous post - PeopleTools 8.55 - Branding, I created two different themes (Red and Blue).

Note: Although, I am using PeopleTools 8.55, the same - User Attribute Based Theme Assignments - can be done using PeopleTools 8.54 themes as well.

The two themes have the following look and feel. I only updated the background color of the header to keep the themes simple. The idea is to demonstrate role based theme assignment/override. You could follow my other branding posts and make further theme changes as per your requirements.

Blue Theme:

Red Theme:

Environment Details: CS 9.2 PUM Image 2, PeopleTools 8.55.06

Assigning Branding Themes based on User Roles:

Branding System Options:

PeopleTools > Portal > Branding > Branding System Options

I left this as default for the sake of this proof of concept.

Assign Branding Themes:

PeopleTools > Portal > Branding > Assign Branding Themes

Again, for the purposes of demonstration and simplicity, I am using the delivered DEFAULT_THEME_FLUID theme as my default. Notice the 'Effective Date'? This means that we could potentially have certain themes only active for a specific period of time. For example, creating a football based theme specifically for students that is only effective during game week?

Further, you can see that I set the priority of the Red Theme higher (100) than the Blue Theme (200). This means that if a user has both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE, the system would prioritize CSK_RED_THEME_FLUID as the user's theme.

Results:

User without CSK_RED_THM_ROLE or CSK_BLUE_THM_ROLE (Default):

This is a scenario where the user does not have any of the roles defined in the 'User Attribute Based Theme Assignments' section. The user simply gets the 'Default Theme'.

User with access to CSK_BLUE_THM_ROLE:

This is a scenario where the user has the role CSK_BLUE_THM_ROLE but not CSK_RED_THM_ROLE. So, the system assigns the CSK_BLUE_THEME_FLUID theme for this user.

User with access to both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE:

This is a scenario where the user has both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE. The system uses the priority configuration and assigns the CSK_RED_THEME_FLUID.

PeopleBooks Reference:
PeopleTools 8.54
PeopleTools 8.55

PeopleTools 8.55+ - Fluid UI - Drop-Down Menu/Breadcrumb Navigation vs NavBar/Navigator Conundrum

In this post, I hope to bust some of the myths around the drop-down menu navigation which is "technically" going away in PeopleTools 8.55. There has been a lot of focus on the disappearance of the drop-down menu/breadcrumb navigation as it is not available by default in PeopleTools 8.55 which uses the Fluid header and navigation instead. I have seen several customers (here is a link to just one example of many in various forums) wanting to put it back just the way it was! Note: There are options to do so.

I could understand some of the reasons why customers might want to hold on to the older method of navigation. For example, project timelines and lack of time for managing the change, need to re-write user manuals/guides/documents, training/education, only a small subset of power users/admins use the system so why change?, etc.

A big part of the transition to the Fluid navigation is education which involves recognizing the reasons for the change and the benefits of using the Fluid navigation mechanisms which is very intuitive. For starters, Fluid navigation is more than just the drop-down menu! It involves Homepages, Tiles, Dashboards, WorkCenters, Activity Guides, Related Content, etc. There are plenty of very good resources that demystify the new navigation paradigm in Fluid. Here are a few:

PeopleSoft VFO: https://www.youtube.com/watch?v=oXdvD9rKO_U
PeopleSoft VFO: https://www.youtube.com/watch?v=o5-wQ2dHKsw
Oracle Blog: https://blogs.oracle.com/peopletools/entry/fluid_header_and_navigation_is
LeanItDesign: https://leanitdesigns.wordpress.com/2016/03/28/fluid-navigation-adopting-to-the-new-normal/

In spite of all these attempts to educate our customers and end-users, I am sure there will still be a few who simply insist on having the drop-down navigation. There may also be some users (e.g.: power users) who might legitimately require the drop-down menu style navigation. Here are couple of ways I would sell the Fluid navigation to those users:

Pitch 1: The drop-down navigation is not gone! It is now in a brand new location (NavBar > Navigator) and expands vertically in Fluid. When we use the Navigator, it also remembers the Folder location that was last visited - including 'Back to Previous Folder' and 'Back to Root' capabilities. Effectively, all the functions of the drop-down menu still exist!

Pitch 2: Let us say, my users are not impressed with my previous pitch. They tell me that we now have to click on the NavBar and then click on the Navigator to initiate the menu. Previously, we only had to click on 'Main Menu' and out pops the drop-down menu navigation. These are the hard to sell folks that I am talking about!

For example, let us compare the navigation to the 'Web Profile Configuration' page.
In Classic: Main Menu > PeopleTools > Web Profile > Web Profile Configuration
In Fluid: NavBar > Navigator > PeopleTools > Web Profile > Web Profile Configuration

Granted, they have a point! They have one extra click to complete the navigation (assuming the Navigator was not previously initialized/toggled).

Here is a simple workaround for that! What if we make the 'Navigator' active/selected and expanded when the NavBar is initiated (except for the Small Form Factor devices)? Will this make these users happy? Hopefully, because now the Navigator behaves exactly the same - if not better - when compared to the Classic drop-down menu!

This requires a minor customization as follows:

Step 1: Create a JavaScript Object

PeopleTools > Portal > Branding > Branding Objects

JavaScript: CSK_NB_INIT_JS


Note: I am using requireJS (for managing my jQuery module dependency) that is available as part of Oracle JET in PeopleTools 8.55. You don't necessarily have to use this approach but if you would like more details, then please refer to my posts on Oracle JET (Part 1, Part 2, Part 3 and Part 4).

Step 2: Inject CSK_NB_INIT_JS when PTNUI_NAVBAR page/component is loaded

In my case, I am simply using the Global JavaScript Injection Bootstrap that I described in my previous blog posts. I updated my cskInjectJS function to include the following lines of javascript to load CSK_NB_INIT_JS (created in Step 1). I also check if the current request is not from a small form factor device to avoid auto-selecting the Navigator on small screens like phones (which would cover up the entire screen and might not be desirable).

Update JavaScript Function: cskInjectJS


Note: The following links provide the full JavaScript source code as of this post: CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS.

Results:

NavBar Initialization Before Customization:

NavBar Initialization After Customization: