Changing the Favicon in PeopleSoft – The “How to” May 12, 2011Posted by Duncan in PeopleTools.
Last week I posted a blog entry highlighting why I think adding a favicon to PeopleSoft can be a helpful visual aid for your users. This post walks through how I did it – note: I’ve only tested this in Tools 8.50.
Step 1 – Create your icons
It’s probably a good idea to have one for each environment excluding Production that shows the environment name, and then have Production as the corporate logo (or your PeopleSoft system logo etc). I created my 32×32 pixel images in GIMP as it can save as a .ico file, but any graphics package will do (as will this online ico creator). I didn’t experiment with other sizes or file formats, let me know if you do and I’ll update the post.
Upload your icons as images in App Designer.
Step 2 – Create a Function to return your Favicon
We need to create a function to provide the correct image for each environment as we’ll be calling this from more than one place. I added my function to WEBLIB_PT_NAV.ISCRIPT1 as we’ll be customising it later anyway.
Function GetFavicon() Returns string Local string &Favicon; Evaluate %DbName When = "DEV" &Favicon = %Response.GetImageURL(Image.<<DEV_IMAGE>>); Break; When = "TST" &Favicon = %Response.GetImageURL(Image.<<TST_IMAGE>>); Break; ...etc... End-Evaluate; &Favicon = "<link href=""" | &Favicon | """ rel=""shortcut icon"" type=""image/x-icon"" />"; Return &Favicon; End-Function;
Step 3 – Amend the HTML Definitions
You need to amend both PT_HNAV_TEMPLATE and PT_IFRAME_HDR_SWAN HTML templates so that the code for the Favicon can be passed in.
Amend PT_HNAV_TEMPLATE thus (I’m just showing the top 6 lines – lines 4 and 5 are the ones I’ve added):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="%Direction" lang="%LanguageISO"> <head> <!--Favicon--> %bind(:23) <meta http-equiv="X-UA-Compatible" content="IE=8"> ...
Amend PT_IFRAME_HDR_SWAN thus (I’m just showing the top 5 lines – lines 3 and 4 are the ones I’ve added):
<head> <meta http-equiv='content-type' content='text/html; charset=%bind(:1)'> <!--Favicon--> %bind(:25) <link rel="stylesheet" href="%bind(:2)" type="text/css"> ...
Note: Your bind numbers may vary. You can check they’re correct when we get to the calling functions shortly.
Step 4 – Pass the Favicon into the HTML templates
The final step is to amend the PeopleCode so that the string provided by our GetFavicon function is passed into our HTML definitions. Open PT_BRANDING.BrandingBase. Scroll down to where the delivered code is declaring functions (it’s around line 155 for me) and declare the function that you created in Step 2.
Next, find method ‘getIframeHeaderHTML’ and scroll down to near the bottom. You’ll see a call to one of the HTML objects that you just amended ‘PT_IFRAME_HDR_SWAN’. Add your function as a parameter to the end thus:
&hdrHTML = GetHTMLText(HTML.PT_IFRAME_HDR_SWAN, &charSet, ... , &hoverNavLoc, GetFavicon());
As a double-check, you should also make sure that it’s the same number parameter as the bind variable that you added in the previous step.
You’ll need to make a similar change for the other HTML template. Open WEBLIB_PT_NAV.ISCRIPT1.FieldFormula and search for the function ‘buildIframeTemplate’. Again, scroll down to the end of the function and add your function as a parameter to the end:
Return GetHTMLText(@("HTML." | &templateHTMLObjName), &charSet, &requiredToolsSS, ... , &ptcxmCollapseImgURL, GetFavicon());
Again, make sure that the parameter number matches the bind number in the HTML file (PT_HNAV_TEMPLATE) earlier.
You should be able to sign in and see the results immediately. Good luck and let me know how you get on!