Wednesday, March 16, 2016

PeopleTools 8.54+ - Branding - Part 5D - Fluid Branding (Continued)

Overriding the "Processing" Icon:


This requirement is similar to overriding the Favorite Icon. The "Processing/Spinning" icon generally appears when the PeopleSoft PIA is still processing a request. This "Processing" icon is simply a GIF image - PT_PROCESSING_FMODE delivered image object. In some scenarios, this delivered icon may not really fit in with the custom Branding theme. If we want to override this icon then there are two options.

Option 1: Replace delivered GIF image object PT_PROCESSING_FMODE with a custom GIF image object. This is not something I would recommend but it is an option for those looking for a quick and dirty override (along the lines of Doc ID 2004996.1).

Option 2: Use the jQuery image replacement technique detailed in the previous post for overriding this delivered image PT_PROCESSING_FMODE with a custom image (CSK_PROCESSING_FMODE).

I am using the following image as my custom "Processing" icon:


Delivered PT_PROCESSING_FMODE image for reference:


I am updating my image replacement javascript object CSK_FL_IR_JS again. I am finding all the occurrences of PT_PROCESSING_FMODE (delivered image) with id = "processing" and replacing it with a custom image (CSK_PROCESSING_FMODE) using jQuery.


Updated javascript (CSK_FL_IR_JS) for reference:

// Get Image URL for CSK_LOGO (FavIcon);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskFavIcon&img=CSK_LOGO_FAVICON' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK_LOGO (Fluid);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskLogo&img=CSK_LOGO_SVG' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK_LOGO (Fluid SFF);
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskLogoSFF&img=CSK_LOGO_SFF_SVG' type='text/javascript'%3E%3C/script%3E"));

// Get Image URL for CSK Custom Processing Icon for Fluid;
document.write(unescape("%3Cscript src='/psc/" + site + "/EMPLOYEE/EMPL/s/WEBLIB_FL_CSK.ISCRIPT1.FieldFormula.IScript_Set_Image_URL_Variable?var=cskProcessingFmode&img=CSK_PROCESSING_FMODE' type='text/javascript'%3E%3C/script%3E"));

var $jq = jQuery.noConflict();
$jq(document).ready(function(){

  // Get current Image Source;
  var imageSrc = $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src');

  if (imageSrc != null) {
    if (imageSrc.indexOf("PTNUI_ORACLE_LOGO_SFF") < 0) {

      // Use Regular Image;
      $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src', cskLogo);

    } else {

      // Use Small Form Factor Image;
      $jq('#PTNUI_LP_HEADER_PTNUI_LOGO img').attr('src', cskLogoSFF);

    }
  }

  // Replace Browser Favorite Icon(s);
  $jq('head link[href*=LOGO_FAVICON]').attr('href', cskFavIcon);

  // Fluid Processing Icon;
  // 20160420 - Updated selector to be more specific to Fluid using src attribute wildcard;

  $jq('#processing[src*=PT_PROCESSING_FMODE]').attr('src', cskProcessingFmode);

});


Result:


Check out this demo video >>>> Override Processing Icon

7 comments:

  1. Thanks Shasank for the additional work...funny enough I am looking and working my way through the blog and was wondering where the original CSK_FL_IR_JS code you used in previous sections.. I am jumping around a little so, can you point out which section? Thanks,

    ReplyDelete
  2. Sorry. It is a series of posts, I should have been clearer and I see how it can be confusing.

    Here is the original bootstrap code for injecting javascripts to Fluid:
    http://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5b-fluid.html#FluJSInjectionBootstrap

    Here is where I started creating the CSK_FL_IR_JS and kept building on it:
    http://pe0ples0ft.blogspot.com/2015/11/peopletools-854-branding-part-5c-fluid.html#jQueryToOverrideFluImages

    Hopefully it gives you what you are looking for. Just let me know if I am still missing any steps!

    ReplyDelete
    Replies
    1. No worries.. I have just finished going through the entire Fluid 5 series, excellent work... I did figure it out it was a matter of going through 5c past the point where I was to see the code.

      I do like the JS image injection work you have done. I was on a project where discussed a similar approach to do some changes but the pace of the work prevented us from exploring things further. Oh well, nice to see you worked a very good solution.
      ...STB

      Delete
  3. Great post Sasank!
    -Amar

    ReplyDelete
  4. Hello Sasank,

    I would like to hide the peoplesoft home link form Header, can you please suggest how can i able to that

    ReplyDelete
    Replies
    1. Are you referring to the Home link on the Classic or Fluid?

      For Classic, you can go to the header that you are using and delete it.

      For example: https://snag.gy/Av9c8b.jpg

      Delete