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:

Object Name: CSK_FL_DBNAME_JS


The only change was the window.self == window.top 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.

15 comments:

  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.
    Mary

    ReplyDelete
    Replies
    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.

      Delete
  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

    ReplyDelete
  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:
      https://pe0ples0ft.blogspot.com/2015/04/peopletools-854-branding-objects.html

      Delete
  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....

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  7. I am looking at your REQUIRE_CFG_JS
    and it is pointing has a line
    'jquery-private':getScriptUrl('CSI_JQUERY_PRIVATE_JS')

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

    ReplyDelete
  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();

    ReplyDelete
  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

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

    A copy of CSK_JQUERY_PRIVATE_JS can be found here:
    https://gist.github.com/SasankVemana/476ce04225786b43bd3a79e2eb3116d4

    The latest code for the JavaScript Injection Framework can be found here:
    https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html
    https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework

    ReplyDelete
  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

    ReplyDelete
    Replies
    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.

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

    /psoft/ptcfg855/webserv/fndev/applications/peoplesoft/PORTAL.war/fndev/oraclejet/js/libs/jquery

    ReplyDelete