PeopleTools 8.57 | Branding Administration Access and New Roles

Most of you know that PeopleTools 8.57 is generally available on Oracle Cloud. I used a trial account to install a PUM image (HCM 9.2 PI 27 - PT 8.56) on Oracle Cloud Infrastructure - Classic (OCI-C) using PeopleSoft Cloud Manager 7. Once I got the HCM PUM image up and running, I upgraded it to PeopleTools 8.57.01!

The first thing I noticed while accessing some of the existing (pre-PT 8.57) Branding pages is that I was getting a new (strange) security error. Strange because I was accessing these pages as PS user.

Here are some example pages where we will run into this error:
PeopleTools > Portal > Branding > Branding Objects
PeopleTools > Portal > Branding > Define Headers and Footers

'Secure Branding Administrator' Role

This error occurs even if we already have access to the previously known "all powerful" roles such as 'Portal Administrator' and 'PeopleSoft Administrator' which should usually give us full access to Portal functionality. In PeopleTools 8.57, there is an additional/new role called 'Secure Branding Administrator' which is used to control access to certain Branding pages. This condition is hard-coded on the Component SearchInit PeopleCode as shown below in this example.

'Secure Branding Administrator' Role

Once we add this role to the required users, they should be able to view the affected Branding pages.

'Company Info Administrator' Role

Once we get past this security error, I am assuming most Branding admins would want to review the much awaited 'Company Info' feature in PT 8.57.

PeopleBook: Configuring a Custom Banner

If we follow the steps described in PeopleBooks and try to find the 'CompanyInfo' element in the DEFAULT_HEADER_FLUID header definition, it is nowhere to be seen. We can see that the element is referenced in the order property of pthdr2container as shown below. Yet we cannot see the 'CompanyInfo' which should be the second element under DEFAULT_HEADER_FLUID after ptdropdownmenu and before pthdr2container.

In PT 8.57, there is a new delivered role called 'Company Info Administrator' which is required for us to be able to view and configure the 'Company Info' element. As shown below, we can see the CompanyInfo element after adding the 'Company Info Administrator' role to the user in question.

'PeopleTools SVG Administrator' Role

Lastly, if we want the ability to upload SVG images using the Rich Text Editor (RTE) that is provided in the 'CompanyInfo' element's Additional Options page, then we must have access to a new delivered role called 'PeopleTools SVG Administrator'.

Uploading a SVG image using the Rich Text Editor without 'PeopleTools SVG Administator' Role will generate the following error.

Bug with 'PeopleTools SVG Administrator' Role

While testing the SVG image upload feature via the Rich Text Editor available on the CompanyInfo element - 'Additional Options', in some cases, I found that we could upload a SVG without any issues even if we did not have access to 'PeopleTools SVG Administrator' role.

When I dug into the code, I found this security check condition is case sensitive! 😂

This means that if we upload a SVG image with a capitalized or mixed-case extension (e.g.: CSK_LOGO_32.SVG instead of CSK_LOGO_32.svg), we can simply bypass the security check. I created a MOS SR related to this topic and the following Bug has been logged!

BUG 28818544 - E-SEC USER WITHOUT THE PEOPLETOOLS SVG ADMINISTRATOR CAN STILL ADD .SVG IMAGES

Using Role Alias Functionality instead of using Delivered Roles

For many PeopleSoft customers, it may not be an ideal practice to add/use delivered roles in a production environment. Generally speaking, most customers rightly avoid using delivered roles and rather create cloned versions of them to eliminate any impact during upgrades/patches. This is a great approach except when we constantly run into scenarios as described in this blog where delivered roles are hard-coded in PeopleCode by Oracle/PeopleSoft developers. In such circumstances, we have no choice but provision the hard-coded delivered roles. The other alternative is to customize the hard-coding and replace it with a custom role (which is also not ideal!).

Starting with PeopleTools 8.55 there is a hugely understated security feature that was introduced to address this problem. It is called the 'Role and Permission List Aliases' functionality and for what it is worth does not get the necessary air time. Using this functionality, instead of provisioning the delivered roles to end users, we can simply configure a custom role alias(es) to the delivered role which will workaround the hard-coding in PeopleCode!

More Information on this topic is available in this PeopleBook Reference:
Using Role and Permission List Aliases

PeopleTools - Using Google Analytics (gtag.js)

In the past I have written about implementing Google Analytics in PeopleSoft.

Using analytics.js
Using ga.js

If we look at the latest script provided by Google Analytics, it uses the new JavaScript tagging framework gtag.js. This framework allows us to send event data to different products (Analytics, AdWords, DoubleClick, etc.) without managing them separately.

More on gtag.js: https://developers.google.com/gtagjs/
Global Tracking Code Snippet: https://developers.google.com/analytics/devguides/collection/gtagjs/

If we want to implement Google Analytics in PeopleTools using this latest framework, we cannot simply take the sample code provided by Google and include it in a HTML object in PeopleTools. If you notice, even in my previous Google Analytics posts, I modified the sample code to make it PeopleTools friendly. This is because the script tags within the sample code (which involves loading an external script) will cause issues with PeopleTools when created as a JavaScript (HTML) object.

So, we need a way to first load the gtag.js (external) script and then execute the subsequent code provided in the sample. Here is a good example of how we can load an external script using javascript.
https://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/

Using this approach, I re-wrote the Google Analytics javascript sample as follows. The loadScript function is very similar to the cskLoadJS function in my JavaScript Injection Framework - CSK_FL_BOOTSTRAP_JS.

Script for reference

Note: You will need to find and replace UA-XXXXXXXX-Y with your GA_TRACKING_ID.

CSK_ANALYTICS_JS JavaScript (HTML) Object

Next we need to find a way to inject this javascript within all PeopleSoft pages. A simple approach would be to add a line of code at the end of a global delivered javascript such as PT_COMMON or PT_UTIL. For example:

Alternatively, we could use a JavaScript Injection Framework as described here:
https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

Regardless of whether we use analytics.js or gtag.js, when we setup the Google site configuration, we should only include the hostname in the default URL.

E.g.: If this is our login URL
http://pi023.hcm92.com:8000/psp/ps/EMPLOYEE/HRMS/?cmd=login

The Default URL should be configured as follows:

Fluid Branding - File Attachments Icon

Here is a question from PeopleSoft General Discussion community.

How can we customize the icons in the Fluid file attachment dialog box?

Further, how do we use different icons for different form factors?

We can do this by using CSS to override the icon on different form factors. I added the following styles at the end of my Fluid - Global Override Style Sheet used in my Branding Theme.

Fluid - Global Override Style Sheet

CSS referenced in Theme Definiton

CSS for Reference

As we can see in the CSS, we can use a different image as the content for the File Upload icon based on the form factor.

Demo on Desktop (Extra Large Form Factor)

Demo on Mobile Device (Small Form Factor)

PeopleTools 8.56 - Branding Review

PeopleTools 8.56 has been out for a few months now. This is a review of what is new in the Branding Framework pertaining to the 8.56 release.

Review Environment Details:

- HCM 9.2 PUM Image 23
- PeopleTools 8.56.01

Branding Framework:

Not much has changed with the Branding Framework. I was expecting some improvements to the Theme Macro Set functionality which was introduced in 8.55. There are still some hard-coded references to images in javascript which would have been nice to move to Theme Macro Set CSS functionality. For example:

The delivered macro set, PT_DEFAULT_MACROSET_855, still contains 117 macros (same as in 8.55) with no changes in 8.56.

As you can see, there is a new Color Picker on the Theme Macro Set page which is a nice productivity enhancing feature! This Color Picker is based on HTML5 'color' input type element.

Icon Changes:

A notable change that we have already seen in demos prior to the release is the new 'Action Menu' icon. This has changed from the old 'hamburger' menu to a 'pea' (?) menu. Graham Smith thinks this is a healthy dietary change! We cannot argue with that. :)

Using Theme Macro Sets:

Since the framework has not changed, it was pretty much the same set of steps to use Theme Macro Sets to override Branding elements. One thing to note is that we definitely want to clone the 8.56 objects (style sheets, headers, themes, etc.) instead of moving objects from an 8.55 environment. This will make sure that we have the most current versions of the object in question.

We can follow the steps detailed in my previous posts describing how to use Theme Macro Sets to override Branding Elements:
PeopleTools 8.55 Branding - Theme Macro Sets - Part 1
PeopleTools 8.55 Branding - Theme Macro Sets - Part 2

One of the issues I noticed was the position of the 'Pea' icon was a little off after applying the Theme Macro Set overrides. This issue occurred only on the Classic Pages. For example:

I fixed this by adding the following a top property to the #pthdr2ActionList:after style selector which is part of the Classic Theme Style Sheet.

Using Oracle JET:

I noticed that Oracle JET version 2.1.0 is available with PeopleTools 8.56. I found that the JavaScript Injection Framework that I built using Oracle JET in 8.55, works without any issues in 8.56 as well. Only thing to note is that, due to the version change, we may need to review the requireJS configuration to make sure the javascript library paths are pointing to the correct version.

Resources:

JavaScript Injection Framework
Framework is based on my experience with Oracle JET - Part 1, Part 2, Part 3 and Part 4
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

Using Classic Plus:

I wanted to test the delivered Classic Plus pages that were available in this PUM image. But when I navigated to the Process Monitor page - which is in the list of PeopleTools Components delivered as Classic Plus - I was still seeing the good old Classic.

To activate Classic Plus, we must update the Branding System Options to use "Fluid like theme for Classic" as the "Theme Style Type". This is the system level setting that enables "Classic Plus".

Process Monitor after setting 'Theme Style Type'.

More information on Classic Plus:
PeopleBooks - Classic Plus

Related Branding Posts:

Fluid UI - New Window Feature - Workaround
Using Different Branding Themes for Different Portals
Using the Logo as a Hyperlink
Fluid Global Search - Setting Focus on the Search Box
Adding Userid to 'Sign out' Action Menu Item Label 

PeopleTools - Using Google Analytics (analytics.js)

In one of my branding posts, I described how we could inject the Google Analytics javascript (ga.js) code snippet using the Branding Framework.

As most of you know, the latest version of Google Analytics library is analytics.js.
https://developers.google.com/analytics/devguides/collection/upgrade/reference/gajs-analyticsjs

To start using analytics.js, all we have to do is update our custom Google Analytics injection code.

Here are the steps to migrate/implement analytics.js.

Development Environment: HCM 9.2 PUM Image 17 - PeopleTools 8.55.03

Create a custom javascript object with analytics.js code snippet:

Make sure you substitute your property id on line 6.

Inject custom javascript object to the application globally:

In my case, I am using a custom Global JS Injection Framework that I described previously (refer: post 1 and post 2). You are free to use other options that might work best for you.

At a high level, PT_UTIL ---includes--- CSK_FL_BOOTSTRAP_JS ---includes--- CSK_INJECT_JS. CSK_INJECT_JS is where we can list all the javascript objects that we want to load (globally or targeting specific conditions).

Here are jsfiddle links to the versions of CSK_FL_BOOTSTRAP_JS and CSK_INJECT_JS at the time of writing.

Results:

Branding 8.54+ - Role Based Theme Assignment/Override

In the past, I have written about Branding PeopleSoft applications using themes (and even theme macro sets in PeopleTools 8.55). In this post, I want to quickly show how we can assign different themes to different users based on roles/permission lists.

Using the steps detailed in my previous post - PeopleTools 8.55 - Branding, I created two different themes (Red and Blue).

Note: Although, I am using PeopleTools 8.55, the same - User Attribute Based Theme Assignments - can be done using PeopleTools 8.54 themes as well.

The two themes have the following look and feel. I only updated the background color of the header to keep the themes simple. The idea is to demonstrate role based theme assignment/override. You could follow my other branding posts and make further theme changes as per your requirements.

Blue Theme:

Red Theme:

Environment Details: CS 9.2 PUM Image 2, PeopleTools 8.55.06

Assigning Branding Themes based on User Roles:

Branding System Options:

PeopleTools > Portal > Branding > Branding System Options

I left this as default for the sake of this proof of concept.

Assign Branding Themes:

PeopleTools > Portal > Branding > Assign Branding Themes

Again, for the purposes of demonstration and simplicity, I am using the delivered DEFAULT_THEME_FLUID theme as my default. Notice the 'Effective Date'? This means that we could potentially have certain themes only active for a specific period of time. For example, creating a football based theme specifically for students that is only effective during game week?

Further, you can see that I set the priority of the Red Theme higher (100) than the Blue Theme (200). This means that if a user has both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE, the system would prioritize CSK_RED_THEME_FLUID as the user's theme.

Results:

User without CSK_RED_THM_ROLE or CSK_BLUE_THM_ROLE (Default):

This is a scenario where the user does not have any of the roles defined in the 'User Attribute Based Theme Assignments' section. The user simply gets the 'Default Theme'.

User with access to CSK_BLUE_THM_ROLE:

This is a scenario where the user has the role CSK_BLUE_THM_ROLE but not CSK_RED_THM_ROLE. So, the system assigns the CSK_BLUE_THEME_FLUID theme for this user.

User with access to both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE:

This is a scenario where the user has both CSK_RED_THM_ROLE and CSK_BLUE_THM_ROLE. The system uses the priority configuration and assigns the CSK_RED_THEME_FLUID.

PeopleBooks Reference:
PeopleTools 8.54
PeopleTools 8.55

PeopleTools 8.54+ - Branding - Part 5B - Fluid Branding (Continued)

Before I start this post, I must apologize for the delay. This post has been on my "to do" list for a very long time but unfortunately other priorities had pushed it back. I finally managed to find time to go over some of the additional ("more advanced") topics that I wanted to cover on Fluid Branding continuing on my previous post Part 5A (using HCM 9.2 PUM Image 12 - PeopleTools 8.54.08).

It is common knowledge by now that there are several new configurable branding capabilities coming our way in PeopleTools 8.55 - particularly for Fluid. I learnt from various presentations at Oracle OpenWorld 2015 that moving forward - starting from PeopleTools 8.55 - there will be only one Branding (or in other words navigation experience) and it would be Fluid based. With that said, I still feel that this post would be useful/relevant for several folks who are currently on PeopleTools 8.54 or planning to upgrade to PeopleTools 8.54. Given that PeopleTools 8.55 has an expected GA perhaps by end of this year or early next year, it would still be a while before everyone gets in on the uptake!

Before I dive deeper, I want to share couple of topics (utilities) which will help us with some of the more advanced branding requirements.

Global JavaScript Injection Bootstrap for Fluid UI:

In my previous branding posts, we saw how we could inject custom style sheet overrides for Fluid UI using the online configuration options available in PeopleTools 8.54 (Assemble Themes - Global Override Style Sheet - follow the link for more details). This online configuration provides a mechanism to easily override delivered styles without any customizations.

But one of the major let downs with Fluid in 8.54 (at least from my perspective) is the fact that there is no way to inject javascript globally using a configuration (similar to style sheets). If we recall from my previous posts, we used the Branding System Options to inject Google Analytics javascript globally across the application for classic components (follow the link for more details). Once again, this online configuration ensures that the listed javascripts are injected in all components without any need for customizations. This helps us to avoid some of the hacks we used in the past for such injection e.g.: customizing the delivered javascript objects (PT_COMMON, PT_PAGESCRIPT, etc.). But unfortunately, the javascripts listed under 'Branding System Options' are not getting injected into the Fluid UI components.

Another disappointment for me (with regards to Fluid in PeopleTools 8.54) was that the jQuery and jQuery UI javascripts that were delivered for classic (injected globally as part of the Branding Header Definition - refer screenshot below) are NOT part of any of the Fluid UI pages/components. This is exasperated by the fact that we cannot really inject our custom javascript objects globally into Fluid!

The ability to inject javascript objects is very important for performing some of the more advanced branding tasks (which should be reasonably clear from the my preceding introduction and examples). With that in mind, I wanted to create my own framework (or bootstrap if you will) to inject custom javascript objects into Fluid UI pages. I am sure there are several ways to "skin the cat" but here are the principles or drivers for my approach:

- Should be least intrusive from a customization point of view. That is to customize the least amount of objects.
- Should be highly configurable. That is to build a bootstrap configuration that allows us the flexibility to dynamically add/remove javascripts objects online (on the fly) without repeatedly customizing.

Note: I ended up adding one line of custom code to a delivered PeopleCode object. Other than that, this framework is entirely configurable online (using the Branding Objects page).

Step 1: Create a custom javascript object

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects (JavaScript Tab)

Note: This javascript object needs to be added online so that it provides a configuration to inject additional javascript objects.

Let us create CSK_FL_BOOTSTRAP_JS as shown in the screenshot below. I will explain the placeholder javascript later as we start injecting other javascripts (using this javascript as a configuration).

Placeholder JavaScript Code - Updated on 20160403:

Updated on 20160403: I found a better way to dynamically retrieve the site name using the delivered getSiteName function (part of PT_COMMON javascript object) which seems to be a lot more efficient than my previous approach.

// This section was commented on 20160403
// Conditional logic for site name which might vary based on current DB instance;
// var dbname = String('%dbname').toUpperCase();
// if (dbname == "HCM92012")
// {
//   var site = "ps";  
// }// Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// This section was commented on 20160403

// This line was added on 20160403
// Use delivered getSiteName function for dynamically retrieving the site name for different environments.
var site = getSiteName();
 
// -- NOT REQUIRED (20160403) -- Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// E.g.:
// if (dbname == "HCMDEV")
// {
//    var site = "psdev";  
// }

// Inject javascript(s);

Step 2: Add custom code to PT_HEADERPAGE.Activate (Page Activate PeopleCode)

PT_HEADERPAGE is a header page that is part of all Fluid UI components and is mainly used for navigation purposes. We will be adding a line of code to inject our bootstrap javascript using peoplecode.

Custom PeopleCode:

/* CSK Custom Javascript Bootstrap for Fluid - Start */
AddJavaScript(HTML.CSK_FL_BOOTSTRAP_JS);
/* CSK Custom Javascript Bootstrap for Fluid - End */

Step 3: Inject Javascript

Now that we have our custom javascript object (CSK_FL_BOOTSTRAP_JS) injected into all Fluid UI components, we can use that as a configuration to further inject other javascript objects.

Custom JavaScript (CSK_FL_BOOTSTRAP_JS):

// This section was commented on 20160403
// Conditional logic for site name which might vary based on current DB instance;
// var dbname = String('%dbname').toUpperCase();
// if (dbname == "HCM92012")
// {
//   var site = "ps";  
// }// -- NOT REQUIRED (20160403) -- Repeat preceding logic for other instances (DEV, TEST, QA & PROD);
// This section was commented on 20160403

// This line was added on 20160403
// Use delivered getSiteName function for dynamically retrieving the site name for different environments.
var site = getSiteName();

// Inject javascript(s);

// jQuery - PT_JQUERY_1_6_2_JS;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS' type='text/javascript'%3E%3C/script%3E"));

// CSK Fluid Image Replacement JS;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=CSK_FL_IR_JS' type='text/javascript'%3E%3C/script%3E"));
 

• The reason I am using the delivered IScript (IScript_Get_JS) in conjunction with document.write is because I am not able to use %JavaScript meta-HTML functions in javascript objects (in the same fashion as we do in HTML objects). Perhaps a future enhancement if anyone from Oracle is listening? :)
• The delivered IScript provides a way to resolve the javascript (at runtime) to the URL suitable for referencing the .js file on the web server (cache directory).
• I am using the custom variable site as a mechanism to make this javascript production ready and database refresh proof. This would allow the javascript to dynamically determine the sitename using variable substitution instead of hardcoding.

In the above example, you can see that I used the javascript object, CSK_FL_BOOTSTRAP_JS, as an online configuration to inject additional javascript objects with the following line of code.

document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_PTBR.ISCRIPT1.FieldFormula.IScript_GET_JS?ID=PT_JQUERY_1_6_2_JS' type='text/javascript'%3E%3C/script%3E"));

IScript for Image Object Source URL Resolution:

If we look into the WEBLIB_PTBR.ISCRIPT1.FieldFormula, we will find several useful IScripts similar to IScript_GET_JS that we used in the preceding section.

Since using meta-HTML such as %Image and %JavaScript does not seem to work in JavaScript objects, I tried to see if there was an IScript which might possibly return the URL suitable for referencing an image object on the web server (loaded on the cache directory). I did not find any delivered IScripts that did something like that so I wrote my own version.

WEBLIB_FL_CSK.ISCRIPT1.FieldFormula - IScript_Set_Image_URL_Variable

PeopleCode for Reference:

Function IScript_Set_Image_URL_Variable
 
   Local string &var = %Request.GetParameter("var");
   Local string &img = %Request.GetParameter("img");
  
   Local string &html = GetHTMLText(HTML.CSK_IMAGE_URL_JS, &var, &img);
  
   %Response.Write(&html);
  
End-Function;

HTML Object - CSK_IMAGE_URL_JS

Let us see this in action. Let us create our custom javascript object.

Navigation: Main Menu > PeopleTools > Portal > Branding > Branding Objects (JavaScript Tab)

JavaScript for Reference:

// Get Image URL for CSK_LOGO;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskLogo&img=CSK_LOGO_SVG' type='text/javascript'%3E%3C/script%3E"));

// Print variable using jQuery once the document is ready;
var $jq = jQuery.noConflict();

$jq(document).ready(function(){
  alert(cskLogo);
});

What does this JavaScript do?
- Calls IScript (IScript_Set_Image_URL_Variable) and passes two variables (var - variable name to store image URL; img - image object name).
- Prints variable using jQuery once the document is ready for testing purposes.

Note: I previously injected the delivered jQuery javascript PT_JQUERY_1_6_2_JS object which is how I am able to use jQuery in the above javascript.

Let us now inject this javascript into Fluid UI using the Fluid Bootstrap javascript created in the previous section.

Now if we try to access any Fluid content then we should get the alert message that displays the variable cskLogo with the relative image URL substitution.

We can also access the IScript directly on the browser to see what it does behind the scenes.

In the next post, I intend to cover some advanced Fluid branding concepts such as image replacement techniques without customizations (using the utilities detailed in this post) and more. Stay tuned!

Note: You could enhance the utilities detailed in this post by writing your own custom meta-HTML which is a topic described in great detail by Jim Marion in his book,  PeopleSoft PeopleTools: Tips and Techniques - Chapter 9 - Page 350.

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.