I used this slide during my presentation at Oracle OpenWorld 2016. I thought it would be useful to break down the javascript injection framework in simple terms. I understand that there are a series of blog posts related to Branding that utilize this framework and it is not easy to follow if you jump directly to a post without the entire background. Also, you will notice that I made some minor adjustments to my framework as I was finding better and more stable options.
The framework is pretty much as described in PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 4.
JavaScript Injection Framework:
Updated on August 26, 2017:
I moved the javascript files from jsFiddle (previous links) to GitHub. It will be provide a better way to manage the versions of all related objects as a project.
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework
The framework is pretty much as described in PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 4.
JavaScript Injection Framework:
- There is a one line customization to PT_UTIL which helps with injecting our framework (via CSK_FL_BOOTSTRAP_JS) to all pages across the application.
- CSK_FL_BOOTSTRAP_JS is a javascript that contains several helper functions, includes CSK_INJECT_JS (serves as the configuration for adding javascripts), loads RequireJS (and it's configuration) and invokes a function in CSK_INJECT_JS as callback.
- CSK_INJECT_JS serves as an abstracted configuration script which we can use to load other custom javascript objects as per our requirements.
Updated on August 26, 2017:
I moved the javascript files from jsFiddle (previous links) to GitHub. It will be provide a better way to manage the versions of all related objects as a project.
GitHub Project: https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework
Hi Sasank,
ReplyDeleteThank you for the efforts. I have created the JavaScript online all 3 of them but I am unable to undertsand the part where we have to load them or inject them. Please let me know what to add into PT_UTIL (HTML) or PTNUI_NAVBAR (component) or how to load the JS.(I am a system admin only)
Regards
Saad
Hi Sardar,
DeleteThe framework and the code changes that I did to PT_UTIL are described in this blog:
https://pe0ples0ft.blogspot.com/2016/06/peopletools-855-using-oracle-jet-jquery.html
You may want to also review the links mentioned in that post to get a better understanding.
Thanks,
Sasank
Sasank,
DeleteThank you for the response. Is it possible to call just one CSK_NB_INIT_JS (that deals with the navigator) only in PU_UTIL or I have to add the three that you mentioned?
Thanks
Saad
i get this error of "custom javascript error TypeError: backNavigation is undefined" when i just add the navigator script only in PT_UTIL (HTML).
DeleteSardar - You could try that. I have not, so not sure how it will work.
DeleteOne thing to keep in mind, is to remove the require block in CSK_NB_INIT_JS if you want to directly add it to PT_UTIL. Basically, you will need to re-write CSK_NB_INIT_JS.
Sasank,
ReplyDeleteAs usual this is awesome! Very powerful and I love the idea of conditionally injecting based on page labels too.
Thanks very much for this!
Thanks Jason! :)
Delete@Jwalant Dange - What is the javascript object name in App Designer? HEX_GA_JS or HEX_GA_JS_1?
ReplyDeleteAlso, you may want to check if you are seeing any errors in your browser console.
The console should tell you which script has this unexpected token. Take a look at that script and see if you find anything odd in there.
ReplyDeleteI am not sure what may be causing this issue for you.
ReplyDeleteIf you can share a screenshot of your HEX_GA_JS_1 file that may help provide additional feedback. You can use https://snag.gy/ or other tools to share the screenshot (make sure you redact any GA code information that might be specific to your organization).
The problem is because you are including the script tag in the script. The expectation my injection framework is that the code will be pure javascript.
ReplyDeleteThat said, your code looks completely different from what I have used in my latest post on Google Analytics. I am using the latest analytics.js code from this location:
https://developers.google.com/analytics/devguides/collection/upgrade/reference/gajs-analyticsjs
It appears that you are using ga.js instead.
Refer this post on how I included this analytics.js code using my framework:
https://pe0ples0ft.blogspot.com/2016/09/peopletools-using-ga-analytics-js.html
If you switch to the latest analytics.js code, I am sure you will not receive this error. Hope this helps. Thanks!
As I said, you should not include the script start and end tags in the javascript.
ReplyDeleteYou need to remove the first line (script) and the last line (/script) in your code.
This is a screenshot of how my javascript is created:
https://4.bp.blogspot.com/-fbimiFkdcuY/V9lG2rVgrKI/AAAAAAAACO0/hTefxGk7DoQj1dXH_Z-V4g3ErtSVTwKuQCLcB/s640/2.png
You are welcome! :)
ReplyDeleteSasank,
ReplyDeleteI have used your JavaScript Injection Framework, and it's working really great. But we have just noticed issues on the Worklist page. The javascript is not being loaded.
I suspect something is not working properly there because the URLs for this page is different. Instead of something with a content /c/ in it, it contains a /w/.
/EMPLOYEE/HRMS/c/MENU.COMPONENT.GBL
/EMPLOYEE/HRMS/w/WORKLIST?ICAction=ICViewWorklist&Menu=Worklist&Market=GBL&PanelGroupName=WORKLIST
Do you know if your framework can accomodate these worklist URLs? And any pointers of where i can look in your code to find the issue I am having.
Thanks!
Hi Casey,
DeleteYou may be referencing an older version of the framework. I moved this code to github:
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework
If you refer the bootstrap object (CSK_FL_BOOTSTRAP_JS), you can see that I updated the regular expression to include w ... see chswq.. in the below line.
var parts = mainUrl.match(/ps[pc]\/(.+?)(?:_\d)*?\/(.+?)\/(.+?)\/[chswq]\//);
You may also want to include external urls "e" basically replace "chswq" with "chswqe". Hope this helps!
Sasank,
DeleteYes, i must have had an earlier version. I just tried [chswqe], and that fixed my issue. Makes sense. Thanks so much for the quick response. I will check out the latest link you sent as well and see what is new.
Thanks again so much
Casey
Hi, Sasank
ReplyDeleteDo you have any updated JavaScript Injection Framework for PeopleTools 8.58?
Thank You,
Lori
Hi Lori,
DeleteThis is a slightly older post. I would recommend you to review this post as well:
https://pe0ples0ft.blogspot.com/2019/03/javascript-injection-framework-updates.html
To answer your question, yes the framework should work in 8.58 as well. Only thing is that the requireJS configuration must be updated to refer to the latest jQuery library (versions) on the web server.
Here is the update that is required for 8.58:
https://github.com/SasankVemana/PeopleTools-JavaScript-Injection-Framework/commit/731fff8d50c66451ef9a608b4398fe007cf6a92d#diff-404e69da474e498ac1f2bb09b748690e
Let me know if you have any additional questions.
Sasank
nice
ReplyDelete