Sunday, June 12, 2016

PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 4

This post is a continuation of my 'PeopleTools 8.55+ - Using Oracle JET' series (refer: Part 1, Part 2 and Part 3).

In Part 1 (refer: Global JavaScript Injection Bootstrap for Fluid UI - Step 3), I pointed out that using 'Branding System Options' for injecting javascript in Classic pages would result in them getting invoked more than once (per header, pagelet, target frame, etc.). For most Branding Tasks, this might not be necessary since we are only dealing with the header portion of the HTML and other general styling.

All the topics described so far in this series worked fine with the 'Global JavaScript Injection Bootstrap' getting invoked just once as detailed in Step 2 and Step 3. But there may be some advanced requirements possibly outside the scope of Branding where we may intend to inject the Global JavaScript once per header, pagelet, target frame, etc. in order to manipulate the target content area, form data/component buffer and so on. For such cases (to be detailed in a subsequent post), we could use the following alternative step to include our 'Global JavaScript Injection' Bootstrap JS.

Note: The following step would replace Step 2 and Step 3 (which means we need to revert both those changes).

Add CSK_FL_BOOTSTRAP_JS to Classic and Fluid using PT_UTIL JS object:

PT_UTIL is a delivered javascript object that is included in Fluid (via PT_COMMON_FMODE) and Classic (via PT_COMMON). My thought was to simply include our custom bootstrap javascript object in PT_UTIL (using the %include meta-html).

Additionally, I updated the javascript CSK_FL_DBNAME_JS as follows:


The only change was the window.self == condition to avoid the following 'custom header repetition' problem.

The rest of the javascript objects detailed so far in this series should work as-is without any issues.


  1. Hi Sasank, you posts on creating an environment specific header for non-prod DBs have been super useful. Thank you!

    I have an issue regarding the header, I have noticed that for Classic pages, if I'm going from one classic page to another in the same folder e.g. I'm in the PeopleTools>Portal>Branding folder, and I'm in Branding System Options page, the non-prod environment header is showing correctly, but if I go to another page in the same folder, say Branding Objects, the non-prod environment header disappears. Only when I click on another folder or the NavBar, the header comes back again.

    Do you have any suggestions to fix this? Thanks.

    1. Hi Mary - I have not seen that issue with the header.

      Are you seeing any errors on the browser console? Also, what tools version are you on?

      You may want to add some debug statements to your javascript using console.log to see if the javascript is getting executed. If it is not then you can further investigate why.

  2. Sasanak

    This looks great... I am going to start playing with this in the next couple of Days.. Question since you are loading JS thru Branding how do you migrate to other environments

  3. Replies
    1. Hi William - You can migrate the JS objects (which are stored as HTML objects in App Designer) using App Designer.

      There is a challenge with migrating Branding Objects via App Designer which I have written about in this post:

  4. I tried loading to PT_UTIL... And nothing. If I look at the rendered source I do not see the Loaded java script any where...

    I tried console.log and I do not see any messages nothing....

  5. Actually I have looked at to console log... PT_Util seems to run the Bootstrap.. It seems to load. Bu
    t I do not see any thing working

  6. Okay after some playing I Got a piece working (the Opening up of Navigation with one click ) But the simple DBNameing is not working

  7. I am looking at your REQUIRE_CFG_JS
    and it is pointing has a line

    But I cant find anything about that anywhere including Source..
    Where is it and is that correct

  8. I am also trying to load your CST_FL_CTRL_J_JS

    I am getting
    Uncaught ReferenceError: jQuery is not defined

    var pressTimer;

    var $jqCNTLJ = jQuery.noConflict();

  9. I guess I found a new version of CSK_FL_CTRL_J_JS still an issue... AM I missing the CSK_JQUERY_PRIVATE_JS'

    CSK_FL_CTRL_J_JS_MIN_153.js:3 Uncaught TypeError: jqCNTLJ is not a function

  10. @William - Sorry for the delay in responding.

    A copy of CSK_JQUERY_PRIVATE_JS can be found here:

    The latest code for the JavaScript Injection Framework can be found here:

  11. Thanks I found that but the Control-j replacement did not work..
    It looks like your blog shows one version and you Fiddler account shows another. Both seems to have issues...

    I guess I found a new version of CSK_FL_CTRL_J_JS still an issue... AM I missing the CSK_JQUERY_PRIVATE_JS'

    This is from your Fiddler Account
    CSK_FL_CTRL_J_JS_MIN_153.js:3 Uncaught TypeError: jqCNTLJ is not a function

    1. Yes. You need to create a new HTML object called CSK_JQUERY_PRIVATE_JS and use the code that I shared in the above comment.

      And yes - I updated the jsfiddle since I wrote the original post to made some adjustments but it should work.

      You problem is not with the control j script, it appears that jQuery is not loading properly.

      I would also check your requireJS configuration and see if you are using the right path for jQuery in that.

  12. I searched for it an it seems to match where you are looking for it. on our system


  13. Your Blog rocks. Thanks for sharing and all the work you put in.

  14. Sasank, we are upgrading to PeopleSoft HCM 9.2, PT8.55. We found your blog and thought your auto-expansion feature would be a great way to help us transition to the new fluid navigation. One of the contractors helping us with the upgrade implemented the auto-expansion feature but it never worked consistently and then we discovered that it broke Query Viewer. We asked him to back out the mod. He did, but it won’t go away. I read your blog and reviewed the project and I believe we have removed all of the objects. We have downed the servers and cleared all of the cache, but to no avail. We assume that the Java Script is still cached somewhere. We would appreciate any suggestions you have. Thank you.

    1. Hi Gerard - I am not sure what was done in your environment so it is hard for me to tell.

      Re: The issue with Query Viewer. This was identified and fixed by updatintg CSK_FL_BOOTSTRAP_JS as described in this comment.

      To remove the auto expansion code, I suggest that you follow this blog post and remove code accordingly. At a high level, the flow of code should be as follows:

      I would first check PT_UTIL to see if you have any customizations in there. Compare with demo version of this object. Remove the customization. That should completely remove the whole JavaScript Injection Framework (which is described in the following post).

      Hope this helps.