PeopleTools 8.54 - Branding - Part 3

This post is a continuation of my previous articles on Branding PeopleTools 8.54 applications.

Part 1 detailed the basics of what's new with Branding in PeopleTools 8.54 and provided steps to change the logo of the application. Part 2 detailed steps to achieve several common branding requirements such as changing the background color of the branding header, changing the background color and the font color of the Navigation Drop-Down Menu, changing the font color of the Branding System Links, adding a hyperlink to the Branding Logo, moving branding elements (div) using css and adding database name to the Branding Header. We were able to perform all these tasks simply by using the online configuration pages for Branding provided as part of PeopleTools 8.54.

In this post we will dive into some of the more advanced Branding requirements that may potentially require the use of Application Designer.

Branding the Timeout Popup Warning Message:

What is this popup and where is it coming from? This popup message is the PeopleSoft delivered Timeout Warning Message that is displayed to warn the user of an impending timeout of their session (due to inactivity).

If we examine the URL of this Popup message we can see that it is generated by an IScript.

http://pt854.hcm92.com:8000/psc/ps/EMPLOYEE/HRMS/s/WEBLIB_TIMEOUT.PT_TIMEOUTWARNING.FieldFormula.IScript_TIMEOUTWARNING

This IScript is configured on the web profile which is currently being used by the web server.

PeopleTools > Web Profile > Web Profile Configuration (Security Tab)

In the screenshot above, we can see the configuration that triggers this popup message. A handy tip while testing changes to the timeout warning is to change the "Inactivity Warning" seconds to a shorter period like 120 or 180 seconds. This helps in triggering the popup without having to wait for extended periods of time (Note: Any changes to the web profile requires a reboot of the web server to take effect).

As this popup is generated through an IScript, I don't see a way we can override the Oracle Logo on the popup by overriding the stylesheet or by using other Branding Configuration.

There are two ways we can go about this customization:
1. Create a custom IScript that is a clone of the delivered IScript and then perform all customizations in the custom IScript. This option requires us to update the Web Profile to Override the Timout Warning Script to reference our custom IScript.
2. Simply customize the delivered IScript.

For the purposes of this post, I would be customizing the delivered IScript (second option) because I just want to replace the Oracle Logo with my custom logo.

- Update Timeout Warning IScript:

Open IScript Record PeopleCode using App Designer.

Change the reference to the Oracle Logo (Image.NEW_PS_LOGO) to use Custom Logo.

Customized Timout Warning IScript Code:

Declare Function SetDocDomainForPortal PeopleCode FUNCLIB_PORTAL.TEMPLATE_FUNC FieldFormula;
Declare Function PTGetStyleSheetURL PeopleCode FUNCLIB_PORTAL.PORTAL_GEN_FUNC FieldFormula;

Function IScript_TIMEOUTWARNING()
   &howLong = %Request.Timeout * 1000 - %Request.WarningTimeout * 1000 - 2000;
   &timeoutWarningMsg = MsgGetText(146, 91, "Your session is about to be timed out. As a security precaution, sessions end after ");
   &timeoutWarningMsg = &timeoutWarningMsg | " " | Integer(%Request.Timeout / 60) | " " | MsgGetText(146, 92, "minutes of inactivity. Click OK to continue your current session.");
   
   &domainScript = SetDocDomainForPortal();
   
   /* CSK - Timeout Warning Logo Customization - Start */
   
   rem commenting delivered code &HTML = GetHTMLText(HTML.PT_TIMEOUTWARNING, PTGetStyleSheetURL(), %Response.GetJavaScriptURL(HTML.PT_SAVEWARNINGSCRIPT), &howLong, %Response.GetImageURL(Image.NEW_PS_LOGO), &timeoutWarningMsg, %Request.ResetTimeoutURL, %Response.GetImageURL(Image.PT_OK), MsgGetText(146, 95, "Please - note"), &domainScript);
   &HTML = GetHTMLText(HTML.PT_TIMEOUTWARNING, PTGetStyleSheetURL(), %Response.GetJavaScriptURL(HTML.PT_SAVEWARNINGSCRIPT), &howLong, %Response.GetImageURL(Image.CSK_LOGO), &timeoutWarningMsg, %Request.ResetTimeoutURL, %Response.GetImageURL(Image.PT_OK), MsgGetText(146, 95, "Please - note"), &domainScript);
   
   /* CSK - Timeout Warning Logo Customization - End */
   
   %Response.Write(&HTML);
End-Function;

Notice that I commented the delivered line and replaced it with a custom line which references the custom logo image (Image.CSK_LOGO).

- Test Changes:

Display Dynamic and User Specific Greeting Message using Custom Branding Elements:

In this section we will examine how we can replace the delivered ptgreetingmessage Branding Element with a custom Branding Element.

We can see from the screenshot that the ptgreetingmessage element is using the Branding Element Type of Greeting Message.

The Branding Element Type Configuration can be found in the following navigation:

PeopleTools > Portal > Branding > System Data > Define Element Types

We can see that the delivered Greeting Message is being generated by the Application Class PTBR_BRANDING.SystemElements.GreetingText (review class implementation in App Designer to understand how the greeting message is generated).

Before we can go ahead and add a custom element (using a custom element type) to the Branding Header, we must create the custom branding element type and also develop the application class that supports this element type.

- Create Supporting Application Class for Custom Branding Element Type:

Create Custom Application Package.

Create Custom Application Class.

Note: The custom Application Class CSKGreetingText is cloned and improvised from PTBR_BRANDING.SystemElements.GreetingText.

import PTBR_BRANDING:Elements:BaseElement;

/**
  * CSKGreetingText Class
  */
class CSKGreetingText extends PTBR_BRANDING:Elements:BaseElement
   /* --- Properties --- */
   
   /* --- Methods --- */
   method CSKGreetingText(&pId As string);
   method clone() Returns PTBR_BRANDING:Elements:BaseElement;
   
   method getHTML(&pPreview As boolean) Returns string;
  
end-class;

/**
  * Constructor
  *
  * @param pId ID of the object.
  *
  */
method CSKGreetingText
   /+ &pId as String +/
   
   %Super = create PTBR_BRANDING:Elements:BaseElement(&pId);
   
   %This.setElementType("CSKGreetingText");
   rem %this.setAdvancedOptionsPage (Page.);
   
   /* Initialize attributes */
   %This.StyleClass = "cskgreeting";
   
end-method;

/**
  * Make an exact copy of this object.
  * NOTE: Only create the object here, do not copy any class properties.
  *       If there are new class properties, override the copyProperties
  *       method and do it there.  Should invoke the %Super.copyProperties
  *       in that method though.
  *
  * @return BaseElement New object exactly matching this object.
  *
  */
method clone
   /+ Returns PTBR_BRANDING:Elements:BaseElement +/
   /+ Extends/implements PTBR_BRANDING:Elements:BaseElement.clone +/
   
   Local CSK_BRANDING:SystemElements:CSKGreetingText &newObj = create CSK_BRANDING:SystemElements:CSKGreetingText(%This.ID);
   
   /* Call the copy properties function */
   %This.copyProperties(&newObj);
   
   Return &newObj;
   
end-method;


/**
  * Get HTML of the element
  *
  * @param pPreview  True - preview mode.
  *
  * @return String - HTML
  *
  */
method getHTML
   /+ &pPreview as Boolean +/
   /+ Returns String +/
   /+ Extends/implements PTBR_BRANDING:Elements:BaseElement.getHTML +/
   
   Local string &getHTML = "";
   
   Local ApiObject &portalObj;
   
   If (&pPreview) Then
      &getHTML = EscapeHTML(MsgGetText(25000, 3, "<message not found> Sample Greeting Text"));
   Else
      
      <* Commenting Delivered Greeting
      &portalObj = %This.Utility.PortalRegistry;
      If (All(&portalObj)) Then
         &getHTML = EscapeHTML(&portalObj.Homepage.Greeting);
      End-If;
      *>
      
      &getHTML = EscapeHTML("Welcome to CSK " | %UserDescription);
      
   End-If;
   
   &getHTML = GetHTMLText(HTML.PTBR_ELM_CONTAINER_SPAN, EscapeHTML(%This.ID), EscapeHTML(%This.StyleClass), &getHTML);
   
   Return &getHTML;
   
end-method;

In the custom PeopleCode above, we have added logic to generate a dynamic and personalized greeting message that displays the text "Welcome to CSK " appended with the User's Description text using the %UserDescription system variable. Note: The type of greeting could vary significantly from organization to organization and this can be addressed appropriately in the getHTML method implementation.

- Create Custom Branding Element Type:

PeopleTools > Portal > Branding > System Data > Define Element Types

We can see in the screenshot that we are referencing our custom CSKGreetingText Application Class in the new Element Type (CSK_GREETING_TEXT).

- Create custom style for Custom Greeting Message:

#pthdr2container.pthdr2container #cskgreetingmessage.cskgreeting {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #426a92;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12pt;
    font-weight: normal;
}

- Delete delivered ptgreetingmessage element from the Branding Header:

- Add custom greeting element to the Branding Header:

- Test Changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Adding Custom Links to the Branding Header System Links:

We can see in the screenshot that some of the links on the Branding Header such as MultiChannel Console are not specifically useful for a majority of the users. Links such as Process Monitor and Report Monitor would be a lot more useful on the Branding Header (this requirement is well documented in the PeopleSoft Wiki blog post).

Let us see how we can remove the 'MultiChannel Console' link and add links to Process Monitor and Report Monitor on the header in PeopleTools 8.54.

- Create Custom Supporting Application Classes for Process Monitor and Report Monitor:

Application Class Implementation for Process Monitor: 

Note: This Application Class was cloned and improvised from PTBR_BRANDING.SystemElements.WorklistLink Application Class.

import PT_BRANDING:HeaderLinkPIA;

import PTBR_BRANDING:Elements:BaseElement;
import PTBR_BRANDING:SystemElements:SystemLink;
import PTBR_BRANDING:UTILITY:Utility;

/**
  * ProcessMonitorLink Class
  */
class ProcessMonitorLink extends PTBR_BRANDING:SystemElements:SystemLink
   /* --- Properties --- */
   
   /* --- Methods --- */
   method ProcessMonitorLink(&pId As string);
   method clone() Returns PTBR_BRANDING:Elements:BaseElement;
   
protected
   /* --- Protected properties --- */
   
   /* --- Protected Methods --- */
   method setupLink(&pPreview As boolean);
   
private
   /* --- Private Properties --- */
   Constant &cstCTIConsole = "PopupCTIConsole();";
   Constant &cstMCFConsole = "PopupMCFConsole();";
   
   /* --- Private Methods --- */
   
end-class;

/**
  * Constructor
  *
  * @param pId ID of the object.
  *
  */
method ProcessMonitorLink
   /+ &pId as String +/
   
   %Super = create PTBR_BRANDING:SystemElements:SystemLink(&pId);
   
   %This.setElementType("ProcessMonitorLink");
   rem %this.setAdvancedOptionsPage (Page.);
   
   /* Initialize attributes */
   %This.Label.setMessageText(25000, 1, "Process Monitor");
   
end-method;

/**
  * Make an exact copy of this object.
  * NOTE: Only create the object here, do not copy any class properties.
  *       If there are new class properties, override the copyProperties
  *       method and do it there.  Should invoke the %Super.copyProperties
  *       in that method though.
  *
  * @return BaseElement New object exactly matching this object.
  *
  */
method clone
   /+ Returns PTBR_BRANDING:Elements:BaseElement +/
   /+ Extends/implements PTBR_BRANDING:SystemElements:SystemLink.clone +/
   
   Local CSK_BRANDING:SystemElements:ProcessMonitorLink &newObj = create CSK_BRANDING:SystemElements:ProcessMonitorLink(%This.ID);
   
   /* Call the copy properties function */
   %This.copyProperties(&newObj);
   
   Return &newObj;
   
end-method;

/*****************************
*   Protected methods
*****************************/

/**
  * Setup the link properties
  *
  */
method setupLink
   /+ &pPreview as Boolean +/
   
   Local ApiObject &crefObj;
   
   Local PTBR_BRANDING:UTILITY:Utility &utility = %This.Utility;
   
   Local string &linkUrl = "";
   
   If (&pPreview) Then
      %Super.setupLink(&pPreview);
   Else
      
      &crefObj = &utility.PortalRegistry.FindCRefByName("PT_PROCESSMONITOR_GBL");
      
      If (All(&crefObj) And
            &crefObj.Authorized And
            &crefObj.IsVisible) Then
         
         If ((&utility.HeaderLink As PT_BRANDING:HeaderLinkPIA) <> Null) Then
            &linkUrl = &crefObj.AbsolutePortalURL;
         Else
            &linkUrl = &crefObj.RelativeURL;
         End-If;
         
         %This.URL = &linkUrl;
         
      End-If;
      
   End-If;
   
end-method;

Application Class Implementation for Report Manager:

import PT_BRANDING:HeaderLinkPIA;

import PTBR_BRANDING:Elements:BaseElement;
import PTBR_BRANDING:SystemElements:SystemLink;
import PTBR_BRANDING:UTILITY:Utility;

/**
  * ReportManagerLink Class
  */
class ReportManagerLink extends PTBR_BRANDING:SystemElements:SystemLink
   /* --- Properties --- */
   
   /* --- Methods --- */
   method ReportManagerLink(&pId As string);
   method clone() Returns PTBR_BRANDING:Elements:BaseElement;
   
protected
   /* --- Protected properties --- */
   
   /* --- Protected Methods --- */
   method setupLink(&pPreview As boolean);
   
private
   /* --- Private Properties --- */
   Constant &cstCTIConsole = "PopupCTIConsole();";
   Constant &cstMCFConsole = "PopupMCFConsole();";
   
   /* --- Private Methods --- */
   
end-class;

/**
  * Constructor
  *
  * @param pId ID of the object.
  *
  */
method ReportManagerLink
   /+ &pId as String +/
   
   %Super = create PTBR_BRANDING:SystemElements:SystemLink(&pId);
   
   %This.setElementType("ReportManagerLink");
   rem %this.setAdvancedOptionsPage (Page.);
   
   /* Initialize attributes */
   %This.Label.setMessageText(25000, 2, "Report Manager");
   
end-method;

/**
  * Make an exact copy of this object.
  * NOTE: Only create the object here, do not copy any class properties.
  *       If there are new class properties, override the copyProperties
  *       method and do it there.  Should invoke the %Super.copyProperties
  *       in that method though.
  *
  * @return BaseElement New object exactly matching this object.
  *
  */
method clone
   /+ Returns PTBR_BRANDING:Elements:BaseElement +/
   /+ Extends/implements PTBR_BRANDING:SystemElements:SystemLink.clone +/
   
   Local CSK_BRANDING:SystemElements:ReportManagerLink &newObj = create CSK_BRANDING:SystemElements:ReportManagerLink(%This.ID);
   
   /* Call the copy properties function */
   %This.copyProperties(&newObj);
   
   Return &newObj;
   
end-method;

/*****************************
*   Protected methods
*****************************/

/**
  * Setup the link properties
  *
  */
method setupLink
   /+ &pPreview as Boolean +/
   
   Local ApiObject &crefObj;
   
   Local PTBR_BRANDING:UTILITY:Utility &utility = %This.Utility;
   
   Local string &linkUrl = "";
   
   If (&pPreview) Then
      %Super.setupLink(&pPreview);
   Else
      
      &crefObj = &utility.PortalRegistry.FindCRefByName("PT_CONTENT_LIST_GBL");
      
      If (All(&crefObj) And
            &crefObj.Authorized And
            &crefObj.IsVisible) Then
         
         If ((&utility.HeaderLink As PT_BRANDING:HeaderLinkPIA) <> Null) Then
            &linkUrl = &crefObj.AbsolutePortalURL;
         Else
            &linkUrl = &crefObj.RelativeURL;
         End-If;
         
         %This.URL = &linkUrl;
         
      End-If;
      
   End-If;
   
end-method;

- Create custom Branding Element Types for Process Monitor and Report Manager Links:

Note: Each Branding Element Type is referencing its corresponding custom supporting Application Class.

- Delete 'MultiChannel Console' and 'Performance Trace' links from Branding Header:

- Add Process Monitor and Report Monitor Elements to Branding Header:

- Test Changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Implementing Google Analytics:

Google Analytics is a free service that is offered by Google that helps us gather statistics on traffic, traffic sources, conversions, page visits and other useful information about websites.

There are some good presentations on the Higher Education User Group (HEUG) forum for more details on how organizations are using Google Analytics to track, monitor and analyze PIA traffic in PeopleSoft Applications.

To enable Google Analytics we need to create a new property using a google account. This would generate a tracking id that is specific to our website (property).

The tracking id is a string like UA-XXXXXX-Y where XXXXXX represents the account number and Y represents the property number.

Once we obtain the tracking id it is very easy to enable Google Analytics in a PeopleSoft Application. All we need to do is inject the Google Analytics javascript into our PeopleSoft Application.

Google Analytics JavaScript:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-Y']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

In the past (prior to PeopleTools 8.54), we would have had to insert the Google Analytics into our Branding Header or even at the template level (E.g.: PT_HNAV_TEMPLATE, PT_HNAV_TEMPLATE_INCLUDE).

With PeopleTools 8.54, it is very easy to inject JavaScript without any customizations.

- Create JavaScript Object for Google Analytics:

- Include Custom JavaScript Object on the Branding Systems Options Page:

Note: In this example, I am using the latest Asynchronous Syntax provided by Google which allows us to place/inject the JavaScript at any location (including the head) in the html without any page rendering performance issues.

- Test Changes:

Note: This post is only intended to provide information on how to implement Google Analytics in a PeopleSoft Application. This post does not cover details on how to use Google Analytics. There are several online resources that are available to understand the various ways to use the statistical data captured by Google Analytics both from a functional and technical point of view.

Migrating Branding to other environments:

Over the three part series of blogs, we have seen how we can achieve several Branding requirements in PeopleTools 8.54. Now let us look at how we can migrate all the objects we created using both app designer and online configuration pages.

Let us take stock of all the objects that we created and include them in project for migration.

- Include all the Images created for Branding:

- Include all the Style Sheets created for Branding:

- Include all the JavaScript Objects created for Branding:

- Include any URL definitions created for Branding:

Note: This URL definition was used as the Hyperlink URL for the Logo Image (in Part 2).

- Include all Application Classes created for Branding:

- Include Weblib Customization for Timeout Warning:

- Include all Message Catalog Entries created for Branding:

Note: These message catalog entries are referenced in the Application Classes created for supporting Branding Element Types.

- Migrating configuration that are not PeopleTools Managed Objects:

In all the posts detailing Branding in 8.54 we have tried to use the Branding Configuration Pages wherever we could. This is great from a quick development turn around and maintenance point of view. But how do we migrate these configurations (themes, headers, footers, branding element types, etc)? These configurations are not PeopleTools Managed Objects (yet!).

To overcome this challenge, PeopleSoft has delivered export/import dms scripts for these configurations. The scripts can be found in the following location on the app server:

/$PS_HOME/scripts/
    ptbr_setup_exp.dms
    ptbr_setup_imp.dms
    ptbr_theme_exp.dms
    ptbr_theme_imp.dms

Migrating Branding Element Types and User Attribute Types:

Use ptbr_setup_exp.dms to export these configurations from the source environment and ptbr_setup_imp.dms to import these configurations to the target environment.

The main tables that store these configurations are:
PS_PTBR_ETYPE
PS_PTBR_ETYPE_LN
PS_PTBR_UATYPE
PS_PTBR_UATYPE_LN

In our examples we created 3 custom Branding Element Types for the following:
- Greeting Message
- Process Monitor Link
- Report Manager Link

Note: We will need to update the exports scripts appropriately to include our custom Branding Element Types.

E.g.:

EXPORT PS_PTBR_ETYPE WHERE PTBR_ETYPE_ID IN ('CSK_GREETING_TEXT', 'CSK_PROCESSMONITOR_LINK', 'CSK_REPORTMANAGER_LINK');

Migrating Themes, Header and Footer Definitions:

Use ptbr_theme_exp.dms to export these configurations from the source environment and ptbr_theme_imp.dms to import these configurations to the target environment.

The main tables that store these configurations are:
PS_PTBR_THEME
PS_PTBR_THEME_LN
PS_PTBR_THMATTR
PS_PTBR_THMATTR_LN
PS_PTBR_THEME_CSS
PS_PTBR_THEME_DEL
PS_PTBR_LAYOUT
PS_PTBR_LAYOUT_LN
PS_PTBR_LTATTR
PS_PTBR_LTATTR_LN
PS_PTBR_LTELT
PS_PTBR_LTELT_LN
PS_PTBR_LTELTAT
PS_PTBR_LTELTAT_LN

In our examples we created a custom Theme and a custom Header Definition.

Note: We will need to update the exports scripts appropriately to include our custom Branding Definitions.

E.g.:

-- Export theme definitions

EXPORT PS_PTBR_THEME WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');
-- EXPORT PS_PTBR_THEME_LN WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');
EXPORT PS_PTBR_THMATTR WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');
-- EXPORT PS_PTBR_THMATTR_LN WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');
EXPORT PS_PTBR_THEME_CSS WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');
EXPORT PS_PTBR_THEME_DEL WHERE PTBR_THEME_ID IN ('CSK_THEME_TANGERINE');


-- Export header/footer definitions

EXPORT PS_PTBR_LAYOUT WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
-- EXPORT PS_PTBR_LAYOUT_LN WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
EXPORT PS_PTBR_LTATTR WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
-- EXPORT PS_PTBR_LTATTR_LN WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
EXPORT PS_PTBR_LTELT WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
-- EXPORT PS_PTBR_LTELT_LN WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
EXPORT PS_PTBR_LTELTAT WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');
-- EXPORT PS_PTBR_LTELTAT_LN WHERE PTBR_LAYOUT_ID IN ('CSK_HEADER_TANGERINE');

Message Catalog Entries created for Reference:

PeopleTools 8.54 - Branding - Part 2

This is a continuation of my previous post on my experiments with PeopleTools 8.54 Branding.

The general theme I would like to continue is to explore how we can leverage the new features and configuration provided in PeopleTools 8.54. The idea is to see how far we can go without having to use App Designer (using just the online configuration).

Now that we learnt how we can easily change the logo of the application in Part 1, let us see how we can further brand the application.

Changing the background color of the Branding Header:

We can see from the screenshot that the background color for the branding header div (pthdr2container) is actually an image PT_HEADERBG_CSS.JPG which is repeated to cover the background entire div (repeat-x).

Note: If you are wondering how we can see html and css generated on the browser as in the screenshot above, I am using Firebug which is a Web Developer add-on for FireFox. Most browsers have Web Developer support similar to Firebug. It is highly recommended to use such tools to understand the html, javascript and css that are being used on a page.

PT_HEADERBG_CSS image for reference:

Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note: In this case, I am using a background image that is of similar height and width as the delivered PT_HEADERBG_CSS image because my custom branding header div (pthdr2container) is of the same height as the delivered div. If the custom branding header div is of a different height then please be sure to create your custom background image of similar height to cover the entire div.

- Create custom style to override the background on the branding header div (pthr2container):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)

We can see how a new style was added and how it uses the id selector (#) and class selector (.) to specifically target the element (div) with id = "pthdr2container" and class = "pthdr2container". This style is referencing the custom background image CSK_HEADERBG_CSS.

- Include custom style sheet definition on the Branding System Options Page:

PeopleTools > Portal > Branding System Options

This would ensure that our new style sheet is also loaded while rendering the page.

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Changing the background color of the Navigation Drop-Down Menu:

We can see in the screenshot that the background color for the Navigation Drop-Down Menu is coming from the image PT_BREADCRUMB_CSS3. The nav element (pthnavcontainer) is enclosed within the dropdown menu div element (ptdropdownmenu).

PT_BREADCRUMB_CSS3 image for reference:

Let us see how we can override this delivered background image:

- Upload custom background image:

PeopleTools > Portal > Branding > Branding Objects (Images Tab)

Note:Again, in my case I am using a custom background image that is of the same height as PT_BREADCRUMB_CSS3.

- Create custom style to override the background on the Navigation Drop-Down Menu (nav element):

PeopleTools > Portal > Branding > Branding Objects (Style Sheet Tab)

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#) and the descendant selector (e.g.: X Y, where Y is a descendant of X) to target the element (nav) with id = "pthnavcontainer" and is a descendant of element with id = "ptdropdownmenu". This style is referencing the custom background image CSK_BREADCRUMB_CSS3.

Note: As we already have the style sheet CSK_BR_GEN added to the 'Branding System Options', we can directly proceed to test these changes.

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Sticking with our theme, we have now implemented a custom logo, custom branding header background image and custom navigation drop-down menu background image by just using the PeopleTools Branding features and configuration available online.

Changing the font color of Branding Header System Links (Home, Worklist, ..., Sign out):

We can see in the screenshot that the System Links on the Branding Header is using the style class of PSHYPERLINK (color: #004b91). As most of you know, this style class is widely used across the application.

Let us see how we can use css to specifically target the required elements and override the font color:

- Create custom style to override the font color of the Branding Header System Links:

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is using the id selector (#), class selector (.) and the descendant selector (e.g.: X Y, where Y is a descendant of X). This style would target all elements with class = "PSHYPERLINK" and are descendants of element with id = "pthdr2syslinks".

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Changing the font color of the Navigation Drop-Down Menu:

We can see from the screenshot that the font color (#284562) of the Navigation Drop-Down Menu is using the style .pthnav a (all anchor elements which are descendants of element with class = "pthnav").

Let us see how we can override this delivered font color:

- Create custom style to override the font color of the Navigation Drop-Down Menu:

We can see in the screenshot that we are using the existing style sheet (CSK_BR_GEN) to add the new style. The new style is intended to specifically target all anchor elements (a) that have a descendant hierarchy of #ptdropdownmenu #pthnavcontainer .pthnav. The descendant hierarchy would target all anchor tags that are descendants of elements with class = "pthnav" which are in turn descendants of elements with id = "pthnavcontainer" which are in turn descendants of elements with id = "ptdropdownmenu".

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Let us now look at how we can further branding our application with some more common branding requirements.

Note: I am not a big fan of the bright red font color on the Branding Header (it was just used as an example) and besides the orange/yellow and delivered blue go well with the CSK team colors. So I will be reverting the font color changes which I just made for future examples to make it a bit easier on the eyes.

Adding a Hyperlink to the Branding Logo:

Let us assume we want our logo to image to link to another website.

- Create URL Definition to store the hyperlink address:

PeopleTools > Utilities > Administration > URLs

- Modify existing style for the Branding Logo:

CSK_HDR_LOGO was created in example provided in Part 1. We can see from the screenshot that the style has been modified to comment out the content attribute.

- Modify logo element in the custom Header Layout Definition:

PeopleTools > Portal > Branding > Define Headers and Footers

-> Additional Options for leaf cskhdrlogo

We have replaced the existing Static HTML (which was a non-breaking space &nbsp;) with an anchor element referencing the URL Definition (href), Image Object (img element) and URL Definition Description (title).

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

Moving Branding Elements using CSS:

Most organizations would like to print the name of the database (e.g.: DEV, TST, UAT, etc) on the branding header for test environments. Let us move the ptgreetingmessage div to make way for the Database name to be printed on the branding header. We will use css to move the ptgreetingmessage div to the bottom right hand corner of the header.

Create custom style to override the alignment and location of the ptgreetingmessage div:

Modify the ptgreetingmessage (div) leaf on Header Layout for logical ordering:

Test changes:

 

Adding Database Name on the Branding Header:

Now that we moved the ptgreetingmessage div and made way for displaying the database name, let us use custom javascript to achieve this requirement. We could directly use the %dbname meta-html in a div to display the database name but we will be using a javascript to write some logic to only display database name in non-PROD environments.

- Create custom style for the database name:

This style is cloned from the delivered greeting style class to replicate the font and location.

- Add new leaf to represent the database name element on the Branding Header Layout:

We added a new child element under the pthdr2container. This element is a static javascript object (cskdbname) which is ordered after the cskhdrlogo element.

Note; In the javascript, replace PROD_DBNAME with the actual name of the Production Database. The javascript is intended to not display the name of the database for Production.

- Test changes:

Recommendations if you are experiencing caching issues:

1. Clear local browser cache.
2. Shutdown, purge cache and reboot the web server(s).

I found that adding static javascript to the Header Layout breaks the "Preview" functionality on the page. Here are the results of clicking/expanding the "Preview" functionality on the "Define Headers and Footers" page when it contains a static javascript object.

The reason this occurred is because the document.write in the javascript is overwriting the page. Let us replace the static javascript with a javascript object to avoid the issue with the preview.

Result:

Note: document.write is not generally recommended. In this case, we got away with it because it is being used at the header level and does not interrupt the page that is loaded during runtime.

Although document.write works in our case, to comply with best practice let us replace the document.write with Document Object Model (DOM).

Modified JavaScript (CSK_DBNAME):

if ("%dbname" !== "PROD_DBNAME")
{
   // document.write("<div id='cskdbname' class='cskdbname'><p>%dbname</p></div>");

   // create div for dbname
   var dbname = document.createElement("div");

   // set attributes and innerHTML
   dbname.setAttribute("id","cskdbname");
   dbname.setAttribute("class","cskdbname");
   dbname.innerHTML = "<p>%dbname</p>";

   // insert dbname div after the cskhdrlogo div
   var logo = document.getElementById("cskhdrlogo");
   document.getElementById("pthdr2container").insertBefore(dbname, logo.nextSibling);

}

We have commented out the document.write and replaced with DOM to create the DIV element, set attributes, set innerHTML and finally added the div to the pthdr2container element. We are using the logo.nextSibling as a logical selector for the next child of pthdr2container after cskhdrlogo because we do not know if ptsearchbox would be displayed at runtime (e.g.: in cases where SES is turned off).

So far we have seen some of the more common branding requirements and we were able to achieve all of them by just using the online configuration pages. I hope this is definitely something everyone would be excited about!

In the next part (as time permits), I would like to look into some of the more advanced branding requirements like using a custom image on the PeopleTools Timeout message (which contains the Oracle Logo), displaying a more dynamic, user specific greeting message, adding Google Analytics javascript and migrating the branding modifications.

As always, I would appreciate any feedback/improvements that could be made to the content of this post.

Custom CSS for Reference:

Object Name: CSK_HDR_LOGO

#cskhdrlogo {     float: %AlignStart;     width: 66px;     height: 55px;     margin:0;     padding: 0 5px 0 0;     background:none; } #cskhdrlogo:before {     // content: url(%Image(CSK_LOGO));     left: 0px;     position: relative;     top: 0px; }

Object Name: CSK_BR_GEN

#pthdr2container.pthdr2container {     background: url(%Image(CSK_HEADERBG_CSS));     background-repeat: repeat-x; } #ptdropdownmenu #pthnavcontainer{     background: url(%Image(CSK_BREADCRUMB_CSS3));     background-repeat: repeat-x; } // Commenting Font Color Changes //   #pthdr2syslinks .PSHYPERLINK, //   #pthdr2syslinks .PSHYPERLINK:link, //   #pthdr2syslinks .PSHYPERLINK:visited, //   #ptdropdownmenu #pthnavcontainer .pthnav a //    { //       color: #FF0000; //   } #pthdr2container.pthdr2container #ptgreetingmessage.greeting {     position: absolute;     right: 0;     bottom: 0; } #pthdr2container.pthdr2container #cskdbname.cskdbname {     display: inline-block;     color: #426a92;     margin: 0 5em;     vertical-align: super;     font-family: Arial,Helvetica,sans-serif;     font-size: 12pt;     font-weight: bold; } Useful CSS References (There are plenty more online resources available): http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 http://css-tricks.com/multiple-class-id-selectors/