PeopleTools 8.54+ - Branding - Part 4D - Customizing DEFAULT_THEME_TANGERINE_ALT Theme (Continued)

A very interesting and valid question was asked in one of my previous branding articles.

In short, how to conditionally hide certain parts of the branding (such as drop down navigation, greetings messages, etc.) based on the PeopleSoft site that is being accessed. This is specifically to address tailored branding for external sites such as the Candidate Gateway for HCM 9.2, the Supplier Portal for FSCM 9.2, etc.

Traditionally such external sites are created as separate site on the web server (which uses a different web profile as well). Additionally, the hostname of these sites might also be different.

E.g.:

Regular URI:
https://test.com/psp/HCMPRD/EMPLOYEE/HRMS/...
External URI:
https://test.com/psp/HCMPRD_CG/EMPLOYEE/HRMS/...
or
https://test-cg.com/psp/HCMPRD_CG/EMPLOYEE/HRMS/...

I am not aware of a delivered method to assign different styles/themes using the Branding Configuration options in PeopleTools 8.54 (at the application level without using Interaction Hub).

Here is one method to achieve this requirement.

Note: I am using a custom theme based on DEFAULT_THEME_TANGERINE_ALT (continuing on my Branding Part 4 series). The same steps should work for anyone using a custom theme based on DEFAULT_THEME_TANGERINE.

Using conditional javascript based on request URI

- Create Custom Javascript Object

Script:

// Conditionally hide the Navigation Menu (Breadcrumb) for external site

var uriString = location.href;

// Search for something unique (hostname/sitename) to the external site in the URI
if (uriString.indexOf("pi012.hcm92.com:8000/psp/ps_") >= 0) {

   var menu = document.getElementById("ptdropdownmenu");
   menu.style.display = "none";

}

Updated on Nov 15, 2015 - Start:

Optional Script using jQuery:

   
var $jq = jQuery.noConflict();

$jq(document).ready(function(){

   // Conditionally hide the Navigation Menu (Breadcrumb) for external site
   var uriString = location.href;
   if (uriString.indexOf("pi012.hcm92.com:8000/psp/ps_") >= 0) {
      $jq("#ptdropdownmenu").hide();
   }
    
});

Updated on Nov 15, 2015 - End:


Note: In my example, since I don't have an external site, I am just using my regular site with an underscore (for those cases where I use a new window option). Replace the highlighted section with something that uniquely differentiates your external site (e.g.: candidate gateway) from the regular site.

- Include custom javascript in the Branding Header

I included the custom javascript in the Branding Header instead of the Branding System Options. This is because, if I include the javascript in the Branding System Options, it is firing before the DOM is ready. To get around the problem, I included the javascript at the end of the Branding Header which will make sure that the javascript fires only after the DOM element (which we want to manipulate) is ready.

- Test Changes

ptdropdownmenu displaying when URL contains sitename (ps) without underscore

ptdropdownmenu hidden when URL contains sitename (ps_) with underscore

Note: There might be several other options that are available to meet this requirement. So please evaluate and test if this solution works for you before implementing it in your production environment.