Improving PeopleSoft with jQuery - Some Examples (Part 2)

Making a Collapsible Data Area a Bit Better
Have you ever turned on the Collapsible Data Area property on a group box or grid? If you do, all you get on the page to expand or collapse your group box or grid is a little tiny triangle at the far left of the group box or grid label. It isn't that easy to click. Wouldn't it be better if you could click the entire bar to make your grid or group box expand or collapse? Well, here's a little snippet of JavaScript using jQuery that lets you do this.

//% New JavaScript used for making the entire bar of an Expandable/Collapsible Group Box clickable.


//%This line finds all <img> elements with a title of "Expand section" or "Collapse Section", then gets the parent <a>,
//%then the parent <td>. On this <td> it 1.) updates the css to make the cursor a pointer and 2.) adds a click handler
$("img[title='Expand section'],img[title='Collapse section']").parent('a').parent('td').css('cursor','pointer').click(function(){

//%The click handler added to this <td> is a new function taken from the first <a> element that can be found in relation to this <td>
var theClick=new Function($("a img[title='Expand section'], a img[title='Collapse section']", this).parent('a').attr("href"));


Points to Consider
  • Based on PeopleTools 8.50 with a SWAN stylesheet.
  • This code works on group boxes with a title positioned on the left of the group box. With group boxes where the title is positioned in the center or to the right it might not work. Or with grids that have any of the navigation bar items displayed then this will likely not work.
  • Because of these limitations, I would not include this code on PT_PAGESCRIPT to make it a system wide feature. I instead would only include it on specific pages where I know the group box(es) or grid(s) will be formatted in the correct manner.
This has been another relatively simple example of how jQuery can make your PeopleSoft pages that much better.


Improving PeopleSoft with jQuery - Some Examples (Part 1)

I must thank Jim Marion for turning me on to jQuery. He has made various posts over the last 3 or 4 years about it (see here.) I've also sat in on one or 2 presentations he's made where he's mentioned it. It's a great JavaScript library that lets you make even more improvements to your PeopleSoft application.

Since PeopleTools 8.50 (or maybe it was a late patch of tools 8.49) there is no longer a size limit on HTML Definitions. PT_PAGESCRIPT is the JavaScript definition that is included in all (or at least most) pages served up by PeopleSoft. This is now the best place for including the jQuery library.

So now that we have access to jQuery, what kind of things can we do with it? Here's the first of a couple of examples I've come up with.

Add options to the Page Bar
Have you ever tried to print a PeopleSoft page using your browsers print functionality. It doesn't always look good. Depending on the browser and what exactly has the focus when you choose Print, it may include the Portal Heading and the target content may have scroll bars included. I think it would be great if the Page Bar had an option to print the page. Here's a way of getting JavaScript and jQuery to do it for you.

Why do you need jQuery to do it? Because as a PeopleSoft developer, you don't have access to the Page Bar. It is not generated via an iScript, HTML Definition or an Application Package. You could use something like MonkeyGrease on your web servers to rewrite the response to include a new link on the Page Bar. But that seems to be a bit overkill. By using jQuery, everything is under control within Application Designer like most any PeopleSoft customisation.
So onto the code! Add the following to PT_PAGESCRIPT after the jQuery library. (I hope it is self documented well enough for you to follow through.)

//%New Print button added to Page Bar
//%Ensure that document is ready before proceeding
$(document).ready(function() {
//%Check if the Page Bar is on the page
if($("#PAGEBAR").length==1) {
//% Declare local variables
var printAnchor;
var printImg;
var newText = "Print Page";
//%Add new style to prevent #PAGEBAR from displaying when printing
$('<style media="print"> #PAGEBAR {display: none} </style>').appendTo('head');
//%Get the Page Bar div and table cell
var pgBar = $("#PAGEBAR");
var pgBarLinksCell = $("table > tbody > tr:eq(0) > td:eq(2)", pgBar);
//%Check if there are any anchors on the Page Bar
//%Though it seems if there is a Page Bar then there is always an anchor
if ( $("a", pgBarLinksCell).length > 0 ) {
//% If it is, clone the last one and separate the image from the anchor
printAnchor = $("a:last", pgBarLinksCell).clone();
printImg = $("img", printAnchor);
} else {
//%otherwise build it manually
printAnchor = $("<a tabindex='0'></a>");
printImg = $("<img hspace='0' border='0' align='absmiddle' vspace='0' ></img>");
var cssObj = {
'font-size' : '9pt',
'font-weight' : 'normal',
'font-style' : 'normal',
'color' : 'rgb(51, 102, 153)',
'text-decoration' : 'none'
//%set (or overwrite) the anchor attributes
printAnchor.attr("id", "OXFPRINT");
printAnchor.attr("name", "OXFPRINT");
printAnchor.attr("href", "");
printAnchor.attr("tabindex", parseInt(printAnchor.attr("tabindex"))+1);
//%set (or overwrite) the image attributes
printImg.attr("title", newText);
printImg.attr("alt", newText);
//%Add a click event to the anchor
printAnchor.click(function(event) {
//%prevent the default from occuring
//%IE work-around printing in an iframe
try {
document.execCommand('print', false, null);
catch(e) {
return false;
//%Combine (or recombine) anchor, image and text
//%append the new Print Anchor to the end of the Page Bar
else {
//%write the code to include a Page Bar

Here's what it looks like
Points to Consider
  • The path to the Printer image is hard coded. Meta-HTML %Image won't work in this situation because it is a JavaScript library. To make it better, you could use %URL or create an iScript that uses %Request.GetImageURL to return the path to the image and use jQuery within the script to make an AJAX call to the iScript.
  • Also, I think the image is too gray. It's based on the older style. To match the newer swan style it should have more blue.
  • I've tested this on IE7, FireFox 3.6 and Google Chrome 7.0.5. It's possible it won't work with other browsers.
With jQuery you have an extra layer of control over your user's interface. This was just one example of what can be done using the jQuery JavaScript library. I hope to post another couple examples soon.


PeopleSoft Branding

Here's one way to change your PeopleSoft Portal Header from this

to something like this

I was grateful I discovered @peoplesoftwiki's great post about PeopleSoft Branding. It meant that this post wouldn't have to be quite as long. Because as it turned out I followed the same steps as @peoplesoftwiki (extending Application Package PT_BRANDING and overriding the Branding Package on PeopleTools Options page.) I went one or 2 steps further it seems so I'd like to expand on that.

Before I begin, I need to tell you the main assumption I made. We are moving to PeopleTools 8.50 and we have decided to use the new Swan style. This is important as there is code in PT_BRANDING methods that is wrapped in if statements checking whether the style = "swan". That meant I only had to focus on making changes to items where this was true.

And one more thing before going any further: configuration good, customisation bad. (Though I don't always follow that mantra.)

Application Package
So just like @peoplesoftwiki, I extended PT_BRANDING. I made a few changes, including:
  1. adding new methods to get data out of the system that I wanted to display in the Portal Header
    • setGreeting, to prefix the Users greeting as set in Personalize Content with the description of the Environment as set in PeopleTools Options
    • getOxfamLinks, to read and labels and links from the message catalog (labels being the message, and the links being the explanation text) to be displayed along the top of our branded portal.
  2. replacing calls to the delivered HTML Definitions that formed the basis of the Portal Header. Those 3 methods and the HTML defintions are
    • getIframeHeaderHTML - PT_IFRAME_HDR_SWAN
The changes made to the methods getIframeHeaderHTML, GetExpPasswordHdrHTML and GetPortalUniHeaderNNS were all very similar, so I'll just go in to details for the method getIframeHeaderHTML. I basically left the code all the same, except for adding calls to my new methods setGreeting and getOxfamLinks and another call to get some more text from the message catalog and a call to the GetPortalHomepageURL() function to retrieve the Homepage URL.

HTML Definition
To make use of all this, I would either need to change the delievered HTML definition or create my own. So I created my own by opening the delivered PT_IFRAME_HDR_SWAN and doing a Save As to create OXF_IFRAME_HDR_SWAN. By doing this I had complete control over the HTML I wanted displayed. The main change I made was to the pthdr2container <div>, changing it from

<div id="pthdr2container">
<div id="pthdr2logoswan"> </div>
<div id="pthdr2greeting">
<span class="greeting">

<ul id="pthdr2links">
<div id="pthdr2container">
<div class="oxfblend">
<div id="pthdr2logoswan"
onclick="javascript:window.location='%bind(:27)';return false;">

<div id="pthdr2greeting">
<span class="oxfps">%bind(:26)</span>
<span class="oxfgreeting">%bind(:15)</span>
<ul id="oxfhdrlinks">
<ul id="pthdr2links">
<span>%bind(:17) </span>
<div id="oxfheaderLine3">
<div class="clearer"></div><!--Important - ensures floats
are contained-->

The main changes were adding new <div> oxfblend, oxfheaderLine3 and clearer, new <span> oxfps and oxfgreeting and new <ul> oxfhdrlinks. I also removed %bind(:16), the search box, which we didn't think made any sense to have in the Portal Header.

To make all these new elements on the page look any good, I had to update the Stylesheet. PSHDR2_SWAN held all the styles to control the Portal Header. For example, it defined the style pthdr2logoswan which has the background image as the Oracle Logo. Well we wanted to use the Oxfam Logo so I made a copy of PSHDR2_SWAN to create OXF_HDR2_SWAN and I made my changes to that.

Remember, configuration good, customisation bad. So I copied PSSTYLEDEF_SWAN to create OXF_STYLEDEF_SWAN. And in OXF_STYLEDEF_SWAN, I replaced PSHDR2_SWAN with OXF_HDR2_SWAN. When you switch to the new swan style, you update Default Stylesheet on PeopleTools Options to PSSTYLEDEF_SWAN. I instead switched it to OXF_STYLEDEF_SWAN.

I had to create 4 image definitions in App Designer. Each of these are referenced in the stylesheet OXF_HDR2_SWAN as background images for 4 different elements.

Bringing it all Together
So here's how it all works together. The PT_BRANDING extended Application Package (with new methods) calls the new HTML Definitions. Updated or newly created bind parameters are passed to the custom HTML Definition to generate the content of the Portal Header. The new stylesheets and images provide the formatting for the Portal Header HTML. What you can come up with is only limited by your imagination.


Most Recently Used

A new feature of PeopleTools 8.50 is the horizontal navigation menu that runs across the top of the screen below the header. It means the menu down the left hand side is no longer needed. This new horizontal menu has a Favourites menu item, and on this it keeps track of the most recently accessed components you have navigated to. But it is capped at the last 5. Wouldn't it be great to increase this, to 10 maybe. The Most Recently Used items are set using the PT_HNAV_JS HTML Definition. Line 1474 has a CONSTANT called MAX_MRU which is set at 5 as delivered. Increase this to 10 (or more if you want) and voila, your Most Recently Used items increase to 10.


Welcome to my PeopleTools blog. I've been a PeopleSoft Developer for over 10 years. I've been regularly following a number of blogs for the last 2 years now and I thought it was about time I gave something back. So expect to find posts about various PeopleTools topics: App Designer, PeopleCode, Portal, PIA, App Servers, Integration Broker, and so on. And tell all of your PeopleSoft friends.