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.
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.
Hi Sasank, you posts on creating an environment specific header for non-prod DBs have been super useful. Thank you!
ReplyDeleteI 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
Hi Mary - I have not seen that issue with the header.
DeleteAre 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.
Sasanak
ReplyDeleteThis 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
Sorry Forgot flag
ReplyDeleteHi William - You can migrate the JS objects (which are stored as HTML objects in App Designer) using App Designer.
DeleteThere 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
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...
ReplyDeleteI tried console.log and I do not see any messages nothing....
Actually I have looked at to console log... PT_Util seems to run the Bootstrap.. It seems to load. Bu
ReplyDeletet I do not see any thing working
Okay after some playing I Got a piece working (the Opening up of Navigation with one click ) But the simple DBNameing is not working
ReplyDeleteI am looking at your REQUIRE_CFG_JS
ReplyDeleteand 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
I am also trying to load your CST_FL_CTRL_J_JS
ReplyDeleteI am getting
Uncaught ReferenceError: jQuery is not defined
var pressTimer;
var $jqCNTLJ = jQuery.noConflict();
I guess I found a new version of CSK_FL_CTRL_J_JS still an issue... AM I missing the CSK_JQUERY_PRIVATE_JS'
ReplyDeleteCSK_FL_CTRL_J_JS_MIN_153.js:3 Uncaught TypeError: jqCNTLJ is not a function
@William - Sorry for the delay in responding.
ReplyDeleteA 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
Thanks I found that but the Control-j replacement did not work..
ReplyDeleteIt 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
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.
DeleteAnd 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.
I searched for it an it seems to match where you are looking for it. on our system
ReplyDelete/psoft/ptcfg855/webserv/fndev/applications/peoplesoft/PORTAL.war/fndev/oraclejet/js/libs/jquery
Your Blog rocks. Thanks for sharing and all the work you put in.
ReplyDeleteSasank, 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.
ReplyDeleteHi Gerard - I am not sure what was done in your environment so it is hard for me to tell.
DeleteRe: 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.
Sasank,
ReplyDeleteThis 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.
Hi Subash - Yes, this is a known issue from a previous version of the framework.
DeletePlease 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!
Thanks Sasank That helped !
DeleteWe are using 8.56 tools and it is classic worklist page that we are having issues with
ReplyDeleteHi Sasank,
ReplyDeleteIs 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
The information is stored in Structure and Content table (PSPRSMDEFN). You could write some queries to identify the navigation for Fluid Tiles.
DeletePlease advice how can I edit PT_UTIL and where it's located
ReplyDeleteHi Lurii - PT_UTIL is a HTML object which can be found in App Designer.
Delete