Saturday, November 7, 2015

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.

10 comments:

  1. Hi,

    Was wondering if you ever tried to make the NavBar disappear based on webserver URL. The Main Menu goes away just fine.. but the NAVBAR stays and does not disappear if I try this approach.

    ReplyDelete
    Replies
    1. Hi Tito - I just tried this and it works.

      I just replaced one line in my JQuery script as follows:

      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("#pthdr2navbar_div").hide();
      }

      });

      Delete
    2. Basically, replace ptdropdownmenu with pthdr2navbar_div.

      Delete
  2. I stumbled onto the same thing as I got your message.. Thanks Sasank.

    Funny thing, I have moved onto getting rid of the Navbar in the Fluid header. Will let you know how it works out.

    ReplyDelete
  3. I have been able to make the fluid Navbar disappear based on an onclick event ( from the the Database Hide Event) but on general loading, I find the javascript is not triggering to hide the fluid navbar.

    ReplyDelete
  4. The above only works for Classic. Because the JS which is part of the Branding Header gets injected only for Classic.

    Also, the div is completely different in Fluid, so you will need to find the NavBar div in Fluid and the find a way to inject your javascript to Fluid.

    You can inject the custom javascript into Fluid using the PT_LANDINGPAGE PageActivate PeopleCode.

    ReplyDelete
  5. My initial thought was to use the same approach as you did for Fluid Database Name DIV on load and then hide once clicked. ...working with that. and inject my custom Javascript that way....hope I am making sense.

    ReplyDelete
    Replies
    1. Titoo - Makes sense. That would be the approach I would take as well.

      Just curious, why are you hiding the NavBar? How would the users navigate without it? Do you have an alternate custom navigation?

      Delete
    2. The Client has a requirement that Navigation gets taken away from students.. We provide a few ways to access their needs in the system:
      1 - High priority/High frequency items ( 10-12 Student Quicklinks)
      2- Medium priority/Medium frequency items (Accordion Menu)
      3 - Low priority/Low frequency items (The dreaded Student center) --not a fan.

      Aside from that, take away other ways to navigate the system.

      Hope that explains why they want to remove it.

      Cheers,

      Delete
    3. Yes! That makes sense now. Thank you for the clarification.

      Delete