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.
01 | Function GetFavicon() Returns string |
03 | Local string &Favicon; |
06 | &Favicon = %Response.GetImageURL(Image.<<DEV_IMAGE>>); |
09 | &Favicon = %Response.GetImageURL(Image.<<TST_IMAGE>>); |
14 | &Favicon = "<link href=""" | &Favicon | """ rel=""shortcut icon"" type=""image/x-icon"" />"; |
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):
2 | <html dir="%Direction" lang="%LanguageISO"> |
6 | <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):
2 | <meta http-equiv='content-type' content='text/html; charset=%bind(:1)'> |
5 | <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:
1 | &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:
1 | 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.
Testing
You should be able to sign in and see the results immediately. Good luck and let me know how you get on!
Like this:
Be the first to like this post.
You can also put the favicon.ico in your webserver root directory (where your browser automatically looks). If it’s weblogic you’ll need to restart the webserver for it
to be picked up. This works in 8.48+
Provided you can remember to put it there after every redeploy of the PIA that’s certainly a quicker and less intrusive way. Presumably it’s a single Favicon across all sites/environments underneath that web server?
You’re right you need to remember to do it, the hardest part. And it’s only per site. We seperate our sites for dev and test etc, so it will depend on your architecture.
We have taken a different approach, with the intent to achieve the same thing.
Instead if coding an iScript, changing HTML, etc., we simply replace the NEW_PS_LOGO image.
We create a .JPG file that designates the name of the database and save that in Application designer as NEW_PS_LOGO image. We have also built a project with that image and exported it to a file. Whenever we refresh one of our databases, we import the project and the image will now show the name of the database….no coding and the testers love it.
We do this too (although we have some code that changes it based on %DBName so there’s no post-refresh activity), but if you have four minimised windows you can’t see which is which until you’ve cycled through them all.
Dear all,
Today I ran the steps in PeopleTools 8.51.02 with success. Unfortunately the AppDesigner cannot display the ico image.
Thanks,
John Desmet – Belgium