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