PeopleTools 8.55+ JavaScript Injection Framework

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:
  • 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

19 comments:

  1. UnknownFebruary 1, 2017 at 12:18 PM

    Hi Sasank,

    Thank 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

    ReplyDelete
    Replies
    1. Sasank VemanaFebruary 1, 2017 at 12:30 PM

      Hi Sardar,

      The 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

      Delete
    2. UnknownFebruary 1, 2017 at 3:49 PM

      Sasank,

      Thank 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

      Delete
    3. UnknownFebruary 1, 2017 at 3:54 PM

      i get this error of "custom javascript error TypeError: backNavigation is undefined" when i just add the navigator script only in PT_UTIL (HTML).

      Delete
    4. Sasank VemanaFebruary 1, 2017 at 3:58 PM

      Sardar - You could try that. I have not, so not sure how it will work.

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

      Delete
  2. JasonSeptember 1, 2017 at 4:35 PM

    Sasank,

    As usual this is awesome! Very powerful and I love the idea of conditionally injecting based on page labels too.

    Thanks very much for this!

    ReplyDelete
  3. Sasank VemanaFebruary 13, 2018 at 6:09 AM

    @Jwalant Dange - What is the javascript object name in App Designer? HEX_GA_JS or HEX_GA_JS_1?

    Also, you may want to check if you are seeing any errors in your browser console.

    ReplyDelete
  4. Sasank VemanaFebruary 13, 2018 at 7:26 AM

    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.

    ReplyDelete
  5. Sasank VemanaFebruary 13, 2018 at 7:39 AM

    I am not sure what may be causing this issue for you.

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

    ReplyDelete
  6. Sasank VemanaFebruary 13, 2018 at 9:20 AM

    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.

    That 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!

    ReplyDelete
  7. Sasank VemanaFebruary 14, 2018 at 6:18 AM

    As I said, you should not include the script start and end tags in the javascript.

    You 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

    ReplyDelete
  8. Sasank VemanaFebruary 14, 2018 at 7:32 AM

    You are welcome! :)

    ReplyDelete
  9. CaseySeptember 19, 2018 at 4:32 PM

    Sasank,

    I 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!

    ReplyDelete
    Replies
    1. Sasank VemanaSeptember 19, 2018 at 4:38 PM

      Hi Casey,

      You 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!

      Delete
    2. CaseySeptember 19, 2018 at 4:54 PM

      Sasank,

      Yes, 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

      Delete
  10. UnknownApril 11, 2020 at 5:01 PM

    Hi, Sasank
    Do you have any updated JavaScript Injection Framework for PeopleTools 8.58?
    Thank You,
    Lori

    ReplyDelete
    Replies
    1. Sasank VemanaApril 11, 2020 at 9:46 PM

      Hi Lori,

      This 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

      Delete
  11. Josh FreemanFebruary 25, 2022 at 1:52 AM

    nice

    ReplyDelete

Subscribe to: Posts (Atom)