PeopleTools 8.57 | Custom Banner/Company Info Configuration - Part 3

This post is the third part of a blog series on the latest 'Custom Banner/Company Info' configuration that is available via the Branding Framework in PeopleTools 8.57.

Part 1 and Part 2 detailed how we can get started with this functionality and workaround some minor bugs (which require code fixes). This post will detail how we can use the delivered macros and custom CSS to perform simple CSS overrides on the Custom Header.

Environment Used

HCM 9.2 PUM Image 27 originally on PeopleTools 8.56.09 upgraded to PeopleTools 8.57.01 (inaugural Cloud-First release). The PUM image provisioning and upgrade were administered using PeopleSoft Cloud Manager 7 running on Oracle Cloud Infrastructure - Classic.

Using Theme Macro Sets

To use the delivered macros specifically provided for the Company Info functionality, we must use a theme that uses macro sets.

Delivered Macros for Company Info functionality

In Part 1, I created a simple custom theme (CSK_THEME_FLUID) just to get started with the Company Info functionality. The custom theme was cloned from DEFAULT_THEME_FLUID.

Custom Theme from Part 1

Update Custom Theme to use Macro Set

The following custom definitions were created to allow us to utilize Theme Macro Sets.

Custom Definition	Type	Cloned From
CSK_BRAND_CLASSIC_TEMPLATE_857	Style Sheet	PT_BRAND_CLASSIC_TEMPLTE_FLUID
CSK_BRAND_FLUID_TEMPLATE_857	Style Sheet	PT_BRAND_FLUID_TEMPLATE_857
CSK_DEFAULT_MACROSET_857	Macro Set	PT_DEFAULT_MACROSET_857

The custom theme (CSK_THEME_FLUID) was then updated as follows.

More details on Theme Macro Sets can be found in the following references.

Theme Macro Sets to override Branding Elements
PeopleTools 8.57 - Defining Macro Sets and Macros

Changing the Background Color of the CompanyInfo Element

Now that we are setup to use Theme Macro Sets, we should be able to leverage the delivered macros to update some basic style properties. For example, we can use the delivered macro PT_COMPINFO_BACKGROUND to override the background color.

Demo

Consistent CSS for Hyperlinks

As we can see in the demo video above, the hyperlink display appears to be different for Fluid and Classic.

Fluid Company Info - Hyperlink

Fluid Company Info - Hyperlink Hover

Classic Company Info - Hyperlink

Classic Company Info - Hyperlink Hover

Update Custom Classic Theme Style Sheet

Since there are no delivered macros available to override the CSS for CompanyInfo hyperlinks, I updated the custom Classic Theme Style Sheet (CSK_BRAND_CLASSIC_TEMPLATE_857) which we created previously. The following CSS was added to the custom style sheet.

Demo

As we can see in the demo video below, the CompanyInfo hyperlink display in Classic and Fluid is consistent now.

PeopleTools 8.57 | Custom Banner/Company Info Configuration - Part 2

In my previous post, I wrote about how to get started with the new Custom Banner/Company Info feature which is now part of PeopleTools 8.57.01.

This post details additional code changes that are necessary to workaround some caching issues. This would be useful for those who plan to use the early release of 8.57.

The following App Class PeopleCode is used by the Company Info functionality:
PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute

This App Class is referenced in PT_HEADERPAGE.PageActivate for the display of the Company Info in Fluid:

If we review the App Class (GetCompanyInfoHtml) PeopleCode, we will find that the Branding framework uses Rowset Cache functionality which is a great way to improve performance for fairly static content!

More details on Rowset Cache, usage and associated benefits can be found in PeopleBooks:
Rowset Cache

The disadvantage of using Rowset Cache is that we need to carefully code and make sure that we refresh the data (in the cache) as and when it is appropriate/necessary. Otherwise, we will have situations where cache gets stale but it continues to be referenced, causing a variety of problems. One such problem/scenario exists with the code in the GetCompanyInfoHtml App Class.

Excerpt from PeopleBooks

Problem Scenario

Let us say, that we went through all the steps described in my previous blog post and created our own Custom Banner (CompanyInfo configuration) in PT 8.57. Now, that we implemented the Company Info functionality, let us say we want to revert back to the delivered theme DEFAULT_THEME_FLUID. This delivered theme is unchanged and does not contain any CompanyInfo configuration.

As you can see in the following screenshots and demo video, even though we have revert to the DEFAULT_THEME_FLUID theme (without any CompanyInfo configuration), there is a Rowset Cache related problem which persists the previous CompanyInfo configuration in Fluid.

Branding System Options and Assign Themes Configuration

Demo

We can notice the Rowset Cache related issue in this demo. The issue will persist in this scenario regardless of how many times web/app server and browser cache is cleared because the issue is related to stale Rowset Cache.

Cause

There is code in the GetCompanyInfoHtml App Class that assumes:

1. There is only one and only one Header definition with the CompanyInfo element configured. It is a no brainer that we certainly can have more that one Header definition with the CompanyInfo element configured.
2. If a CompanyInfo element is configured on a Header definition, then that Header definition is currently used in the Default Theme set in the Branding System Options (and Assign Themes) Configuration. It is not necessarily the case that we are currently using a theme with the CompanyInfo element just because one exists.

Both these assumptions can be false as demonstrated in the demo in this post.

Assumption 1
 
PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetFluidBannerHtml

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetClassicBannerHtml

Assumption 2

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetFluidBannerHtml

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetClassicBannerHtml

Custom Code Fixes

Addressing Assumptions

The following PeopleCode updates will ensure that only the current Header definition (PTBR_LAYOUT_ID) is included in the Rowset cache.

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetFluidBannerHtml

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetClassicBannerHtml

Refreshing Rowset Cache when required

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetFluidBannerHtml

PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute
Method: GetClassicBannerHtml

PeopleCode for Reference
Complete PeopleCode is provided for reference at the end of this post.

Solution

As we can see in the demo (after applying the code changes), as soon as we switch from a CompanyInfo based theme to a non-CompanyInfo based theme, the Rowset cache is automatically updated and the changes take effect right away. It does not even require a logout!

Demo

Customization of PTBR_BRANDING.UTILITY.GetCompanyInfo.OnExecute (8.57.01)

PeopleTools 8.57 | Getting Started with Custom Banner aka Company Info Configuration

A new feature was introduced in PeopleTools 8.57 that enables customers to create their own custom banner on top of and in addition to the existing "New User Interface" header consistently on Classic and Fluid.

This is achieved using the Branding Header definition that is configured in our Branding Theme definition.

More details on Header and Theme definitions can be found in PeopleBooks:
Branding Process Overview
Defining Headers and Footers

In the past (pre-8.57), the Branding Header definitions purely represented the Classic header area and we have always had to address the Classic and Fluid branding administration separately. Here is a note from PeopleBooks.

But in the case of the ComponyInfo element which is part of the DEFAULT_HEADER_FLUID header definition, it is a welcome exception wherein we can use a single configuration to handle both (Classic and Fluid).

Getting Started

This blog post will detail what it takes to configure a custom header using the Company Info configuration! The environment used for this post is a HCM 9.2 PUM Image 27 which was originally on PT 8.56.09 and upgraded to PT 8.57.01. The upgrade to 8.57 was administered using PeopleSoft Cloud Manager 7 running on Oracle Cloud Infrastructure - Classic.

As I was getting started - wearing a 'good citizen developer' hat, I cloned the delivered theme (DEFAULT_THEME_FLUID) and header (DEFAULT_HEADER_FLUID) definitions. As shown in the next section, I created custom definitions CSK_THEME_FLUID and CSK_HEADER_FLUID respectively instead of modifying delivered definitions.

Custom Definitions and Branding System Options

PeopleTools > Portal > Branding > Define Headers and Footers

CSK_HEADER_FLUID: Clone of DEFAULT_HEADER_FLUID

PeopleTools > Portal > Branding > Assemble Themes

CSK_THEME_FLUID: Clone of DEFAULT_THEME_FLUID

PeopleTools > Portal > Branding > Branding System Options

Update Branding System Options to reference the custom theme.

Note: If there is any assignment on the 'Assign Branding Themes' page for the current portal (which is typically common in HCM 9.2 PUM images) as shown below, we need to be sure to update this configuration as well.

PeopleTools > Portal > Branding > Assign Themes

Update Default Theme for the current Portal (if assignment exists)

Updating the CompanyInfo Configuration

Now that we created custom definitions, we can update the CompanyInfo element to create our own custom header.

Demo

As we can see, the CompanyInfo Element can be updated using the Rich Text Editor provided in the Additional Options page. While there is an option to configure different content for Classic and Fluid, I am using the same content for the purpose of this example.

Testing the CompanyInfo element

Now that we configured our custom banner, we should be able to test this right away!

Demo

As we can see in the demonstration below, the custom banner "does not appear to"/will not work on Fluid Homepages or Fluid pages. But it works fine in Classic! 😥

Bug in CompanyInfo/Custom Banner functionality for Fluid

After going around in circles for a long time, I found that there is a hard-coding in the Branding App Package which is responsible for displaying the CompanyInfo element in Fluid. As you can see in the screenshot below, the code assumes that we are using the delivered DEFAULT_HEADER_FLUID definition. In our example, we cloned the delivered header and created our own custom definition called CSK_HEADER_FLUID. So, it will not pick up our custom definitions for Fluid! 😂

The following MOS Bug has been logged.

BUG 28844971: BRANDING FRAMEWORK CUSTOM HEADER COMPANYINFO FUNCTIONALITY ISSUE.

Fix to remove hard-coding

We can simply comment out the hard-coding and add code to use a SQLExec to dynamically pull the header definition name from the current theme configured on the Branding System Options! Here is a snippet of the App Class with the modification to the GetCompanyInfoHtml method.

PeopleCode for Reference

Demo after applying fix

As you can see from the video below, the Custom Banner (CompanyInfo element) now shows up on Classic and Fluid consistently. Also, notice that the delivered "Oracle" Logo which was previously present on the top left corner has been removed automatically on the Fluid Homepage! This is an exciting feature in the Branding framework. I hope this can be enhanced in the upcoming patches to obviously remove the hard-coding mentioned in this post and also extend this configuration to allow us to use an App Class! Imagine if we could write our own App Class to dynamically generate this Custom Banner instead of a static rich text value. 🎆🎉

Related Posts

PeopleTools 8.57 | Branding Administration Access and New Roles

Fluid Branding - File Attachments Icon

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)

PeopleTools 8.55+ Branding: Using the Logo as a Hyperlink

It is a common practice in most social media and big brand websites to use the webpage logo as a hyperlink for navigation. This usually provides a mechanism for the users to 'return to home' in most cases. Here is a very interesting discussion on how this standard/convention originated:
https://ux.stackexchange.com/questions/81727/why-is-it-standard-for-a-website-logo-to-navigate-to-the-home-page

In the past, I have worked on requirements where we wanted the logo of a PeopleSoft application to hyperlink to the enterprise portal (which may or may not be PeopleSoft based). To generalize this requirement, let us assume that we want to hyperlink the PeopleSoft Logo to a configured URL (which could be any URL of our choice).

This post assumes that:

• We are on PeopleTools 8.55+ and that we are using the Branding Theme Macro Sets.
  Refer (For more information on Theme Macro Sets): https://pe0ples0ft.blogspot.com/2016/03/peopletools-855x-branding-part-i-what.html
• We have a mechanism to inject a javascript object globally across the application (system wide). In my case, I am using a framework of sorts that I built and described in the following post: https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

My environment details:
- CS 9.2 PUM Image 4
- PeopleTools 8.55.12

Adding a Hyperlink to the Logo on the Fluid Homepage:

The first step we need to do is to identify the HTML elements (divs, images, etc.) that are involved in generating the logo. It is very easy to identify this using the browser's developer tools (inspect element option).

As we can see, the logo image is added to the div (with the style class nuihdr_logo) as a pseudo-element using CSS. Here is a javascript object that selects this div (using the class selector) and adds a click event which redirects to a URL defined in a URL definition (CSK_LOGO_URL). This works well because the div element is completely enclosed within the image (psuedo-element) in terms of position on the webpage and as a result does not have any overflow issues. We will see how this can be an issue as we extent this functionality to the Classic Homepage (next section).

JavaScript Object: CSK_LOGO_URL_JS


I used the javascript injection framework to load this javascript object.

URL Definition Configuration:

Results:

Here is a demo of the Fluid Homepage Logo hyperlink.

Adding a Hyperlink to the Logo on the Classic Homepage:

In this section, we will extent the functionality discussed above to the logo on the Classic Homepage. Let us use the same approach and try to identify the HTML elements (divs, images, etc.) that are involved in generating the logo.

As we can see, the div element (with id pthdr2logofluid) spans the entire width of the page whereas the logo image which is added as a pseudo-element using css obviously does not. So, if we were to use the previous approach and add a click event function for this div (id pthdr2logofluid), then the entire div (which spans the width of the page) would become a hyperlink.

It is not very easy to selectively fire the click event function only on the pseudo element because pseudo elements are not part of the DOM and therefore cannot be manipulated using javascript. After a long search where I almost gave up, I found the following discussion where there was a solution for a similar requirement.

Refer: https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element
JSFiddle: http://jsfiddle.net/ZWw3Z/70/

We can take this idea and apply it to the Classic Homepage Logo by updating the javascript as follows:

Updated JavaScript Object: CSK_LOGO_URL_JS


The updated javascript code selects the div element (with id pthdr2logofluid) and sets all pointer-events to none using css. The javascript also has the click event function to redirect users to the URL configured in the URL definition (CSK_LOGO_URL).

Finally, the Classic stylesheet (CSK_BRAND_CLASSIC_TEMPLTE_FL) which is part of the Branding Theme in my environment which uses Theme Macro Set (click here for more details), was updated to set the cursor and pointer-events properties for the pseudo-element.

Results:

Here is a demo of the Classic Homepage Logo hyperlink.