Branding - Overriding the browser default :focus Selector

This post is based on a question that was recently asked here.

Question

"When user uses Keyboard instead of mouse, when they are using the TAB key on the homepage, the Home button and other button on the banner will be highlighted by the white dotted lines, and when it comes to the tiles, they are also highlighted by that white dotted line, but the visibility of that dotted lines is very minimal around the tiles, is there a way we can change the color of that dotted lines using the macro set or style sheet."

Demo

 
This 'dotted lines' is added by the browser for accessibility reasons and it could vary depending on the type of the browser. I found couple of excellent blog posts on this topic which are listed below.

https://www.kirupa.com/html5/changing_the_default_focus_styles.htm
http://outlinenone.com/

Overriding the browser default :focus Selector

Fluid - Global override

We simply need to add the following CSS to the 'Global Override Style Sheet' used in our current theme.

In this example, the 'Global Override Style Sheet' used in the current theme is shown below.

Demo

Fluid - Tile override

Let us say that we only want to change the :focus on the Tiles, then we can simply target the Tile elements by adding the following CSS instead to the 'Global Override Style Sheet' used in our current theme.

Demo

Classic - Global override

Similarly, if we want the same global override in Classic, we can simply add the following CSS as an 'Additional Style Sheet Object' in the 'Branding System Options' page.

Demo

Enable/Disable Classic Plus without Customizations

Classic Plus was introduced in PeopleTools 8.56 as a means to unify the look and feel of Classic and Fluid PeopleSoft pages from a styling point of view. If you want a quick overview of how this works, you can go to youtube and watch this fantastic video created by PeopleSoft guru, Graham Smith.

https://www.youtube.com/watch?v=Cg7JmqEkPjk

As you can see in this video, PeopleTools team as well as the Apps teams are delivering (with every new release) many components that are Classic Plus enabled. But not all Classic components are Classic Plus enabled for various reasons. In cases where Classic Plus is not enabled on a desired component, or alternatively where Classic Plus is enabled as delivered but we may want to disable it on a certain component, we will need to enable it manually via a Component property (Classic Plus Theme Selection).

In such cases where we need to manually enable/disable Classic Plus, we incur some technical debt in the form of a minor customization to the components involved which needs to be maintained in the future.

Note: Merely enabling this property may not be sufficient to Enable Classic Plus in some advanced cases. Review the following  PeopleBook for more details.

Reworking Components for Classic Plus Display

Assuming, we are not dealing with any page refactoring complexities, then we can simply enable/disable Classic Plus using a PeopleCode function!

ConfigureClassicPlusComponent

According to Doc ID 2440035.1, this is a new function in PeopleTools 8.57, although I can see that is exists in PeopleTools 8.56 as well.

Oracle's PeopleSoft PeopleTools 8.57 New Features Overview (Doc ID 2440035.1)

Based on what I am seeing in some delivered code, it appears to be available in PeopleTools 8.56.06 and higher.

Anyway, why is this exciting? Because we can simply use this function in conjunction with Event Mapping and enable/disable Classic Plus without incurring any customizations.

Event Mapping App Classes

Enable Classic Plus

Disable Classic Plus

Event Mapping - Related Content Services

PeopleTools > Portal > Related Content Service > Define Related Content Service

Enable Classic Plus Service

Disable Classic Plus Service

Enable/Disable Classic Plus using Event Mapping Configuration

Let us say, we want to enable Classic Plus on a Classic component that is not using Classic Plus as delivered. We can simply create an event mapping configuration to associate the component with the 'Enable Classic Plus Service'.

As an example, let us use PT_THM_MACROSET component which is not using Classic Plus as delivered (Navigation: PeopleTools > Portal > Branding > Theme Macro Set). As we can see in the demo below, the 'Classic Plus Theme Selection' component property is not set for PT_THM_MACROSET by default. By associating the custom event mapping code which is part of our 'Enable Classic Plus Service' (SV_ENABLE_CLASSIC_PLUS), we can enable Classic Plus on this component without any customization. We can see that behind the scenes (by calling the ConfigureClassicPlusComponent function via Event Mapping PeopleCode), the 'Classic Plus Theme Selection' component property is updated without any effect on the last updated userid/datetime which means that this change will not be marked as a customization.

Similarly, let us say, we want to disable Classic Plus on a Classic component that is already using Classic Plus as delivered. We can simply create an event mapping configuration to associate the component with the 'Disable Classic Plus Service'.

As an example, let us use PEOPLECODE_TRACE component which is using Classic Plus as delivered (Navigation: PeopleTools > Utilities > Debug > PeopleCode Trace). As we can see in the demo below, the 'Classic Plus Theme Selection' component property is already set for PEOPLECODE_TRACE by default. By associating the custom event mapping code which is part of our 'Disable Classic Plus Service' (SV_DISABLE_CLASSIC_PLUS), we can disable Classic Plus on this component without any customization. Again, we can see that behind the scenes (by calling the ConfigureClassicPlusComponent function via Event Mapping PeopleCode), the 'Classic Plus Theme Selection' component property is updated without any effect on the last updated userid/datetime which means that this change will not be marked as a customization.

Environment Details

FSCM 9.2 PUM Image 30
PeopleTools 8.57.02

Concluding Thoughts

This post is not to suggest that this approach is best practice. While enabling/disabling Classic Plus, you will need to determine what works best for your lifecycle management procedures. It is as simple as that. What works for one customer might not work for another.

Personally, the prospect of automating the enable/disable Classic Plus customization through PeopleCode is very exciting. It is the main reason why I wrote this post. Additionally, combining that with Event Mapping provides an alternative 'customization free' approach in certain cases.

Further, we can see that this function/peoplecode logic is similarly used in the delivered 'Set Classic Plus' App Engine (EOCP_SETCP) which can be found in PeopleTools 8.56.06 and higher under the following navigation.

Enterprise Components > Common Utilities > Classic Plus Setup

PeopleBooks - Classic Plus Setup Page

If this setup page already exists in the application under Enterprise Components, why not simply use that instead? Yes, we should! But this setup page is only available in certain apps like FSCM and HCM. It is not yet available in Campus Solutions.

Classic/Fluid Home NavBar Tiles

A reader asked the question:
Is there a possibility of having both options Classic Home and Fluid home on the NavBar?

As delivered and by design (for good reason, if I may add), there is conditional logic that determines if the 'Classic Home' or 'Fluid Home' appears on the NavBar.

Refer My Oracle Support Document:
E-FLUID: What is the correct display of Fluid Home vs Classic Home Tile in the Fluid Navbar in 8.55? (Doc ID 2264247.1)

Basically, if the 'Home' icon on the Branding header points to 'Fluid Home', then 'Classic Home' tile appears on the NavBar. Alternatively, if the 'Home' icon on the Branding header points to 'Classic Home', then 'Fluid Home' Tile appears on the NavBar.

If for some reason, we want both the tiles ('Classic Home' and 'Fluid Home') to appear on the NavBar, then we will need to resort to a PeopleCode customization. We will need to comment out the following block of code which performs this delivered conditional logic.

Disclaimer: I don't recommend this approach as it is not the intended behavior of these delivered tiles on the NavBar. But since the question was asked, I am sharing this workaround/solution.

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

Thus far, the blog series (Part 1, Part 2 and Part 3) on the 'Custom Banner/Company Info' configuration - available via the Branding Framework in PeopleTools 8.57, detailed an evaluation of the new functionality as delivered. As we could see from some of the demos provided previously, this delivered 'Company Info' feature can currently only display static content such as images, links, text, etc. configured via a Rich Text Editor (RTE). That is, the content will be static and the same for all users.

Wouldn't it be great if we can similarly configure and generate the content of the CompanyInfo element using an 'App Class Method' implementation for dynamic content? But this is not an option that is available in the current delivered functionality.

We know that this is possible based on the options available for other elements within the header definition. For example, pthdr2logofluid.

It would simply be a matter of extending the CompanyInfo element to also allow 'App Class Method' as an implementation option.

Idea

The following idea has been created on the My Oracle Support PeopleTools Community. Please vote for this enhancement if you think it would add value to the existing functionality.

PT 8.57 | Custom Banner/Company Info Functionality - Allow App Class Method Implementation for Dynamic Content
https://community.oracle.com/ideas/23390

Extending 'Custom Banner/Company Info' Configuration for Dynamic Content

This post will detailed how we can extend the delivered 'Custom Banner/Company Info' configuration (PT 8.57.01) to generate dynamic content such as a personalized greeting message. This type of an extension will involve minor customizations.

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.

Demo

Are there any configuration options?

Initially, I pondered if we can use any configuration to extend the existing functionality. For example, PeopleTools > Portal > Branding > System Data > Define Element Types > COMPANYINFO

In theory, we could use this configuration to override the Supporting Application Class for the CompanyInfo element. But soon I found that the amount of hard-coded references to the PTBR_BRANDING application classes in several locations basically rules this out as a viable option. I don't think the juice is worth the squeeze. Here are some examples of PTBR_BRANDING app class references.

Therefore, it is much easier to simply customize the appropriate code that generates the CompanyInfo content for Classic and Fluid respectively.

Dynamic Content Implementation

Include dynamic variable substitution parameters in RTE

We can also use the 'Source' option in the RTE to wrap the substitution parameter (:1) with HTML elements and attributes. In this example, I wrapped :1 within a <span> element and also included an id attribute which will allow us to apply targeted styles to the dynamic content as per our requirements.

Generating Dynamic Content for Classic

The following PeopleCode snippet was included in PTBR_BRANDING.Elements.CompanyInfoConfigurator.OnExecute - getHTML method.

Generating Dynamic Content for Fluid

Similarly, the following PeopleCode snippet was included in PTBR_BRANDING.UTILITY.GetCompanyInfoHtml.OnExecute - GetFluidBannerHtml method.

Custom CSS for Dynamic Content

Finally, we can use the id attribute (cskWelcome) of the dynamic content to target any custom CSS as per our requirements. In this example, the following CSS was appended to Classic (CSK_BRAND_CLASSIC_TEMPLATE_857) and Fluid (CSK_BRAND_FLUID_TEMPLATE_857) theme style sheets.

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)