Sunday, May 29, 2016

PeopleTools 8.55+ - Using Oracle JET (JQuery, JQueryUI, requireJS and more) - Part 2

In my recent post (click here), I detailed how we could use Oracle JET to safely and efficiently take advantage of some the common open source libraries such as JQuery, JQueryUI, requireJS, etc. I also created a cleaner version of my JavaScript Injection Bootstrap and used it to inject a custom javascript (which uses JQuery) to add an environment specific header for both Fluid and Classic in PeopleTools 8.55.

In this post, I want to continue with that process and re-write the configurable image replacement technique that I described for PeopleTools 8.54 (click here for more details).

IScript for Image Object Source URL Resolution:
 
Reference to the previous version of the IScript: Click here.

Since using meta-HTML such as %Image and %JavaScript does not work in JavaScript objects, I created my own version of  an IScript which returns the URL referencing an image object on the web server (loaded on the cache directory).

WEBLIB_FL_CSK.ISCRIPT1.FieldFormula - IScript_CSK_GET_IMG


PeopleCode for reference:

Function IScript_CSK_GET_IMG
  
   Local string &img = %Request.GetParameter("img");
  
   &url = %Response.GetImageURL(@("Image." | &img));
   %Response.RedirectURL(&url);
 
End-Function;


Create a custom javascript function and add it to the JavaScript Injection Bootstrap (CSK_FL_BOOTSTRAP_JS):

This function would help us to mask some of the details to access the preceding IScript to get the Image URL (similar to the getScriptURL function which I borrowed from Jim Marion's blog).

Function Name: getImageURL


Let us add this function to the JavaScript Injection Bootstrap:


Configurable JavaScript for Image Replacement (CSK_OVERRIDE_IMAGE_JS):

Object Name: CSK_OVERRIDE_IMAGE_JS



This javascript object CSK_OVERRIDE_IMAGE_JS is a re-write of my previous version which was called CSK_FL_IR_JS. You will notice that I am using requireJS to load the JQuery library that I need for this function execution. I am also using the getImageUrl function which I previously detailed to get the URL of the custom images. These URLs will be used to override the corresponding delivered counterparts. Right now, I have two examples for image replacement: 1) Replace the delivered Favorite Icon with a custom image (CSK_LOGO_FAVICON) and replace the delivered 'Processing' icon for Fluid with a custom image (CSK_PROCESSING_FMODE).

LOGO_FAVICON (delivered):


CSK_LOGO_FAVICON (custom):


PT_PROCESSING_FMODE (delivered):


CSK_PROCESSING_FMODE (custom):


Similarly, we can configure additional image replacements by simply appending code to the CSK_OVERRIDE_IMAGE_JS javascript object.

Load Image Replacement JavaScript using the Fluid JavaScript Injection Bootstrap:

Simply add CSK_OVERRIDE_IMAGE_JS to the cskInjectJS function in CSK_FL_BOOTSTRAP_JS object.


Results:



10 comments:

  1. Thank you for putting all this content together. I appreciate it. I was able to replace the processing icon to the custom image. However, when i login with a user with out the peoplesoft admin role, they are not able to see it. It display a blank image. Do you know if we need to add additional security to a user to make this work for them?

    Thank you for your time
    Lorraine

    ReplyDelete
    Replies
    1. I figured it out. Full access was needed on the weblib. Thank you

      Delete
    2. Lorraine - That is great. Thank you for letting me know!

      Delete
  2. Hi Sasank,

    We discovered a flaw in the javascript being shown for the getImageUrl and others like getScriptUrl. The var parts statement is splitting apart the PeopleSoft URL. However, the last piece that it is looking for a match on is the Content Type. The versions I have seen on your postings are only looking to match on the letters c, h, or s. However, Oracle has more possible values that could be in this position. If the URL goes to one of those like q for the Query execution page, the functions can fail due to the parts array getting set to null and unable to build a proper URL. I would recommend changing that to the complete set [cefhnqsw] as found in PeopleBooks under the Portal URL Formats section (http://docs.oracle.com/cd/E66686_01/pt855pbr1/eng/pt/tprt/concept_PortalURLFormats-c071f6.html#uf7dee711-7cb9-4d2a-8cf0-f43c5e52a9ce)

    Your posts have been wonderful. Appreciate the sharing.

    ReplyDelete
    Replies
    1. @MMiszewki - Thank you so much for reporting this. Yes - I discovered the same as well. It requires a small change the the regex which I updated a while back.

      You can find the latest the JavaScript Injection Framework code here:
      https://pe0ples0ft.blogspot.com/p/javascript-injection-framework.html

      It has links to github which I will be using the maintain these objects in the future. Thanks!

      Delete
  3. Hello Sasank,

    Could you please guide us how we can make a multiple links directly on a Tile? Do you have any example for it?

    Thank you for your support on this Fluid exploration. Seriously, it is very useful.
    Paul

    ReplyDelete
    Replies
    1. I don't have any examples.

      You might want to take a look at Tile Wizard and the various options available with the Tile API.

      Here is a good example:
      http://nnf.questdirect.org/questmediaviewer.aspx?video=202654598&_ga=2.147835255.1389718819.1509322439-1275318460.1509322439

      - Approximately around 25:00 minutes of the video you will see an example of how you can use tile wizard API and HTML area option to create custom HTML content specifically for the display of tiles.

      Delete
    2. Thank you, that helped.

      Delete
  4. Hello Sansank,

    Can we achieve this? Can we display all the navigation collection links on a tile and when clicked on a link, the tile should work as a Fluid navigation collection.

    Basic change is- the Tile which is built as a navigation collection should also the display the same links on the tile.

    I see that through App Package, we can display the links on a tile and through Nav Collection, we can display the different links and how can we combine this? Is this achievable?

    Thanks!
    Paul

    ReplyDelete
    Replies
    1. Hi Paul - I have not tried something like that so I am not sure if it will work or not.

      But I have seen others use Tile Wizard achieve something similar. Take a look at this webinar:
      http://nnf.questdirect.org/questmediaviewer.aspx?video=202654598&_ga=2.44847981.857917706.1510576923-1734608313.1510576923

      @23:17 you will notice a tile with similar functionality as described in your comment. Hope this gives you some ideas. Thanks!

      Delete