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.

26 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
  13. Your Blog rocks. Thanks for sharing and all the work you put in.

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

    ReplyDelete
    Replies
    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.
      https://pe0ples0ft.blogspot.com/2016/08/pt-855-flu-drop-down-menu-vs-navigator.html#c8826688259471894474

      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:
      PT_UTIL > CSK_FL_BOOTSTRAP_JS > CSK_INJECT_JS > CSK_NB_INIT_JS

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

      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

      Hope this helps.

      Delete
  15. Sasank,

    This is a great post. I used your method to inject javascript for branding through PT_UTIL object. It worked fine until we hit a snag on WORKLIST page. Links on worklist page don't work when we insert javascript on PT_UTIL. Did you see any knid of issues with worklist page ?

    Thank you.

    ReplyDelete
    Replies
    1. Hi Subash - Yes, this is a known issue from a previous version of the framework.

      Please refer to this comment thread:
      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html#bc_0_24B

      Let me know if you still run into issues. Thanks!

      Delete
    2. Thanks Sasank That helped !

      Delete
  16. We are using 8.56 tools and it is classic worklist page that we are having issues with

    ReplyDelete
  17. Hi Sasank,

    Is there a way by which we could mention the "navigation" of a component in PS FLUID like it appears on the "Structure and Content" component.

    This would help us to know in Fluid navigation, the path followed to reach a component.

    Regards,
    Sidd

    ReplyDelete
    Replies
    1. The information is stored in Structure and Content table (PSPRSMDEFN). You could write some queries to identify the navigation for Fluid Tiles.

      Delete
  18. Please advice how can I edit PT_UTIL and where it's located

    ReplyDelete
    Replies
    1. Hi Lurii - PT_UTIL is a HTML object which can be found in App Designer.

      Delete