Sasank's PeopleSoft Log

PeopleTools 8.54 is here! Well it has been out for the past few months. I finally managed to get a VM Instance up and running.

I have been working on Branding PeopleSoft Applications starting from 8.48 and was naturally interested in finding out the new configuration, functionality and features that 8.54 has to offer. As you all know, Branding in PeopleTools has slowly evolved with new styles like SWAN and TANGERINE. I was interested in exploring how it has changed with 8.54 and what it might take to do some custom Branding that most organizations would like to perform at a very basic level.

This post (followed by a few more parts as time permits) is intended to detail my findings while branding a PeopleSoft Application on PeopleTools 8.54.

First thing I noticed with PeopleTools 8.54 is that the PeopleTools Options Page does not allow us to update the Branding App Package and Default Style Sheet any longer.

Notice how the Default Style Sheet, Branding Application Package and Application Class are all disabled? So where do we change this now in 8.54?

PeopleTools > Portal > Branding > Branding System Options

The original branding options (that we are used to from pre 8.54 tools) can be found on this page. And technically we could just customize these options (Default Style Sheet, Package Name and Application Package) similar to prior PeopleTools versions and be done with it from a branding point of view. But let us explore the other configuration items that are available online as part of PeopleTools 8.54.

The Default Branding Theme appears to be at the highest level amongst all configurable options on the Branding System Options page. So let us start by creating a custom Branding Theme similar to DEFAULT_THEME_TANGERINE.

PeopleTools > Portal > Branding > Assemble Themes
- Search for DEFAULT_THEME_TANGERINE.
- Save As a custom theme.
- In my example, I am calling my custom theme CSK_THEME_TANGERINE. CSK is my favorite cricket team in the IPL!!

If we go back to the Branding System Options then we would now see the new custom theme in the drop down for Default Branding Theme.

Let us go ahead and select this new theme as the Default Branding Theme and save the Branding System Options (so we can customize it accordingly).

Let us now start customizing our Branding Theme (custom copy) step by step.

First item on everyone's list would be to get rid of the Oracle logo and use a custom logo. In previous PeopleTools versions, we would have uploaded our custom logo image using Application Designer and then modified the style sheet (e.g.: pthdr2logoswan) that references the logo image accordingly.

With PeopleTools 8.54, we can upload our custom logo (image) and style sheet objects using the following page:
PeopleTools > Portal > Branding > Branding Objects

I uploaded my custom logo and custom stylesheet that I would like to use for overriding the delivered style.

Image Screenshot:

For simplicity sake, I resized my custom logo to the same height (55) as the delivered Oracle logo.

Style Sheet Screenshot:

Notice that I have referenced the custom logo in my style class as follows:
content: url(%Image(CSK_LOGO));

Note: Objects uploaded via the Branding Objects page would be created as PeopleTools managed objects in the database meaning that we can view and migrate them using App Designer.

Now that we have the necessary objects for customizing the logo, let us see how we can apply them to our custom branding theme.

We will perform this task by using the Assemble Themes page.

PeopleTools > Portal > Branding > Assemble Themes
- Search for our custom theme (CSK_THEME_TANGERINE)

We can see that on this page we can assemble a theme by associating several configurable items most notably the Homepage Header and Footer. As the custom theme is still a copy of the delivered theme, it is referencing the delivered Homepage Header and Footer properties.

Let us create a custom Homepage Header and then associate it with the custom Theme.

PeopleTools > Portal > Branding > Define Headers and Footers

On this page we can see that each of the DIV elements on the header are represented in a tree structure. Here a branch/folder represents a logical container and the leaves represent the DIV elements.

Tree Structure:

Corresponding DIV elements:

Other notable features on the Define Headers and Footers page are the Preview and Style Definitions Options. The Preview option can be used to visually identify the location of each of the folders/containers and leaves in the tree. The Style Definition is available to enter any additional free form style class definitions.

Let us use this delivered Header definition (DEFAULT_HEADER_TANGERINE) to 'Save As' a custom Header (CSK_HEADER_TANGERINE).

On the custom Header definition (CSK_HEADER_TANGERINE) let us delete the pthdr2logoswan element under pthdr2container (we will be replacing this with our custom DIV element).

Now let us add a new child element under pthdr2container as follows:

Note:
- Make sure the order of the new element is '01 - First'.
- The properties and attributes of this DIV element (cskhdrlogo) were cloned from pthdr2logoswan.

Our custom header is now ready with the updated logo:

Let us now go back to 'Assemble Themes' and update our custom Theme (CSK_THEME_TANGERINE) to reference our custom Homepage Header definition (CSK_HEADER_TANGERINE):

Last but not the least, we will update the 'Branding System Options' to add our custom style sheet object:

Now we are ready to test our changes.

Note: Please shutdown, purge cache and reboot your web server before continuing to test.

Test Screenshots:

Just like that we were able to apply a custom logo to the Application on PeopleTools 8.54:
- Without any customizations.
- Without using Application Designer (completely configurable).

In the next part, I would like to experiment with customizing the background color and the font color of the Drop Down Menu (ptdropdownmenu) and the Header Container (pthdr2container). Stay tuned!