PeopleTools 8.55.x - Branding - Part I - What has changed?

PeopleTools 8.55 release packs a punch when it comes to new features. There are also some notable improvements to Branding in PeopleTools 8.55 building on the Branding framework that was previously delivered as part of PeopleTools 8.54.

In this post, I will cover some of my key findings at a high level and follow up with an additional article on some 'how-to' guides for common Branding tasks.

Note: This post assumes that the branding is applied to a stand-alone PeopleSoft application without the use of PeopleSoft Interaction Hub. There is a new Branding Activity Guide in PeopleSoft Interaction Hub Image 2 which provides a guided step-by-step process for customers to perform simple or advanced branding tasks and to publish the Branding Theme to other PeopleSoft applications in the cluster. Please refer to this Oracle blog post which highlights the latest Interaction Hub features and provides additional resources.

Unified Header:

This certainly deserves a mention because there may be some misconception that starting from 8.55 users are forced to use Fluid. The point to clarify and understand is that the only thing changing is the Branding header and the navigation mechanism. In 8.55, we now have the same header (hence the term unified) for both Classic and Fluid. With that, there is a shift in user navigation as well. That is, we would need to use the NavBar, Fluid Homepages, Dashboards, etc. to navigate around the application instead of using the traditional drop-down menu/breadcrumb navigation for Classic.

Matthew Haavisto from Oracle has detailed this in his blog entry with some references and how-to steps for those who might still want to use the Classic navigation.

Note: I updated the title of this section from 'Unified Header and Navigation' to just 'Unified Header'. I realize that 'Unified Navigation' is not a term to be used loosely as it may have a different meaning depending on whether we are using PeopleSoft Interaction Hub or not. Please refer to another blog post (again authored by Matthew Haavisto) which level sets these concepts.

Global Javascript Injection:

I previously wrote about the issue with custom javascript injection in Fluid pages. The same challenge still persists in 8.55. This means that any custom javascripts added to the Branding System Options does not work on the Fluid pages but it does on the Classic pages.

E.g.:

NavBar > Navigator > PeopleTools > Portal > Branding > Branding System Options

The test javascript CSK_TEST_JS contains a simple alert message.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Results in Classic: The javascript gets injected and the alert message is displayed.

Results in Fluid: The javascript does not get injected and the alert message is not displayed.

Workaround: We can still use the same workaround that I previously described here.

Global Style Sheet Injection:

The same issue exists for global style sheet injection using the Branding System Objects. But there is a delivered alternative to include custom styles to Fluid which I detailed in my previous post.

Theme Macro Sets for overriding Branding Elements:

I am saving the best for the last! This is definitely a great addition to the framework and I believe that it can only get better with future releases. In 8.55, we can now override some of the common Fluid Branding elements such as images, icons and styles with just configuration (macro sets). I previously detailed the complexity of overriding Fluid Branding elements in 8.54 (Part 5A and Part 5C).

PeopleBooks Reference: Defining Macro Sets and Macros

I will show you a teaser on how we can use the Theme Macro Sets to override the unified header (classic/fluid) branding logo image.

Before that we must start of with some housekeeping tasks to assemble a custom theme with custom homepage header, classic - theme style sheet and fluid - global override style sheet definitions. This would enable us to not only override the logo image but also to override subsequent Branding elements.

Step 1: Create Custom - Classic - Theme Style Sheet Definition

Note: We only need to perform this step if we intend to override some of the delivered styles for Classic while using Theme Macro Sets.

Clone delivered style sheet: PT_BRAND_CLASSIC_TEMPLTE_FLUID

Copy the entire contents on the freeform tab of the delivered style sheet (PT_BRAND_CLASSIC_TEMPLTE_FLUID) using App Designer.

Paste it as the contents of a custom style sheet object - CSK_BRAND_CLASSIC_TEMPLTE_FLUID.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Step 2: Create Custom - Fluid - Global Override Style Sheet Definition

Note: We only need to perform this step if we intend to override some of the delivered styles for Fluid while using Theme Macro Sets.

Clone delivered style sheet: PT_BRAND_FLUID_TEMPLATE

Copy the entire contents on the freeform tab of the delivered style sheet (PT_BRAND_FLUID_TEMPLATE) using App Designer.

Paste it as the contents of a custom style sheet object - CSK_BRAND_FLUID_TEMPLATE.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Step 3: Create Custom - Homepage Header:

NavBar > Navigator > PeopleTools > Portal > Branding > Define Header and Footers

Search for header definition DEFAULT_HEADER_FLUID and 'Save As' CSK_HEADER_FLUID (custom header).

Step 4: Create Custom - Theme Macro Set:

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Copy the delivered Macro Set (PT_DEFAULT_MACROSET_855) and save as CSK_DEFAULT_MACROSET_855.

Enter custom Macro Set name (CSK_DEFAULT_MACROSET_855) and Save.

Step 5: Assemble Custom Theme

NavBar > Navigator > PeopleTools > Portal > Branding > Assemble Themes

Search for theme definition DEFAULT_THEME_FLUID and 'Save As' CSK_THEME_FLUID (custom theme).

Update the custom theme CSK_THEME_FLUID with the custom definitions created in the preceding steps.

Note: If you did not clone PT_BRAND_CLASSIC_TEMPLTE_FLUID and PT_BRAND_FLUID_TEMPLATE in steps 1 and 2 respectively, then you can just use the delivered styles for Classic - Theme Style Sheet and Fluid Components - Global Override Style Sheet.

Note: The following settings are mandatory for using Theme Macro Set. I did not find these mentioned anywhere in the documentation.

1. Homepage Header: Must be derived (cloned) from DEFAULT_HEADER_FLUID.
2. Classic - Theme Style Sheet: Must be derived (cloned) from PT_BRAND_CLASSIC_TEMPLTE_FLUID.
3. Fluid - Global Override Style Sheet: Must be derived (cloned) from PT_BRAND_FLUID_TEMPLATE or PT_BRAND_FLUID_NOIMG_TEMPLATE.

These are the reasons why we completed steps 1-3. I believe the above requirements for Theme Macro Set are to be released shortly as part of a more detailed Branding guidelines document.

Step 6: Update Branding System Options

Update Branding System Options to reference the custom theme CSK_THEME_FLUID (created in the previous step).

We have completed all the housekeeping tasks to assemble a custom theme in the Branding framework. Now, we can start using the Theme Macro Sets to override Branding elements.

Step 7: Override Logo (or other available Branding elements) using Theme Macro Sets

NavBar > Navigator > PeopleTools > Portal > Branding > Theme Macro Set

Click on the custom Theme Macro Set to override the available Branding elements (177 elements - images, icons and styles - are available as delivered).

Since we want to override the logo, let us find the Branding elements (macro names) that represent the logo and override the macro content to use a custom image.

Note: I used a custom logo which is a SVG image with a height of 32 pixels. You may need to adjust other styles if your image height varies. I tried to match the height of the delivered image for the sake of this proof of concept.

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Results in Fluid:

Results in Classic:

Now we can see the results of using a macro to override the logo image. But if you look at the screenshots closely, the logo is a little displaced. Let us fix that by adjusting the style (top padding).

Macro Name: PT_LOGO_TOP_PADDING
- Adjust top padding from 0.25em to 0.00em

Results in Fluid:

Results in Classic:

While the difference is subtle, you might notice that the Fluid logo appears to be positioned as expected (padding-top: 0.00em;) but the Classic logo is still displaced.

When I looked into it further, I figured that the classic homepage logo styling is getting generated a little differently and does not honor the macro override (PT_LOGO_TOP_PADDING) we just updated.

Since we already did all the housekeeping work, it is very easy to override this style using the custom Classic - Theme Style Sheet (CSK_BRAND_CLASSIC_TEMPL_FLUID).

NavBar > Navigator > PeopleTools > Portal > Branding > Branding Objects

Edit CSK_BRAND_CLASSIC_TEMPL_FLUID and set top to 4px for .homePageHdr #pthdr2logofluid:before selector.

Results:

Hope this gives you an understanding of what is new with Branding in PeopleTools 8.55. In the next post, I will provide guidelines on how to perform some more detailed branding tasks. Stay tuned!

Notes:

1. Details of the environment used for this post: HCM 9.2 - PUM Image 16 - PeopleTools 8.55.01.
2. If you find any inconsistent results while going through any of the steps detailed in this post (especially while assembling the theme) then please make sure you bounce your web and app servers and purge the cache.