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);
        printAnchor.html("");
      } 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'
        }
        printAnchor.css(cssObj);
      }
      //%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);
      printImg.attr("src","/cs/FSQA850/cache/PT_PRINT_1.gif");
 
      //%Add a click event to the anchor
      printAnchor.click(function(event) {
 
        //%prevent the default from occuring
        event.preventDefault();
 
        //%IE work-around printing in an iframe
        try { 
          document.execCommand('print', false, null); 
        } 
        catch(e) { 
          window.print(); 
        }
        return false;
      });
 
      //%Combine (or recombine) anchor, image and text
      printAnchor.wrapInner(printImg).append("&nbsp;"+newText);
 
      //%append the new Print Anchor to the end of the Page Bar
      $(pgBarLinksCell).append("&nbsp;&nbsp;&nbsp;").append(printAnchor);
   }
   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.

Summary

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.