25/11/2010

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.

6 comments:

  1. I tried to add this to the PT_PAGESCRIPT but could not see the link in Page.
    I am using IE 8.0 and FireFox 8.0

    ReplyDelete
  2. Hi PKS. First off, I wrote that using PeopleTools 8.50. Is that the version you're on? PT8.51 should be ok too.

    In addition to the code above, did you also include the jquery library in your PT_PAGESCRIPT HTML definition? If not, go to http://jquery.com and choose the download link to get the latest edition of jquery. And paste that into your PT_PAGESCRIPT. But be sure to place it before this code otherwise this code will try to use jquery before it has been loaded.

    If you have included the jquery library in your PT_PAGESCRIPT HTML definition, you could try deleting your web and app server caches.

    Another thing you could do is open your PT_PAGESCRIPT JavaScript file directly in your browser to verify that everything looks ok. Inspect the HTML of your PeopleSoft page to find the URL to the PT_PAGESCRIPT JavaScript file. It should be something like <webserver:port>/cs/<website_name>/cache/PT_PAGESCRIPT_win0_1.js. Paste that URL into your web browser's address bar.

    Let me know how you make out.

    Neil

    ReplyDelete
  3. In more recent versions of PeopleTools, common page functions were moved to PT_COMMON. The problem with PT_PAGESCRIPT is that there is one instance per form/component. On a homepage, for example, you might have multiple instances of PT_PAGESCRIPT. I recommend moving anything that doesn't have %FormNane to PT_COMMON.

    ReplyDelete
  4. That makes perfect sense Jim. Thanks for pointing that out.

    ReplyDelete
  5. Hi,
    I am very new to jQuery; as mentioned above " go to http://jquery.com and choose the download link to get the latest edition of jquery.
    And paste that into your PT_PAGESCRIPT" can you please elaborate how this is to be done; do we have to edit the jquery-3.1.1.min.js
    downloaded file and then paste the code or do we have to do this in some other. Could you please help me with this.
    Thanks

    ReplyDelete
    Replies
    1. My post is quite old now. PeopleSoft even delivers a version of jquery as an HTML Defintion in newer version of PeopleTools. (Try to find PT_JQUERY_1_6_2_JS in App Designer.) And as Jim Marion pointed out above the PT_PAGESCRIPT is not the best place to put jQuery if you want to use it on EVERY page in PeopleSoft. A better way now in PT8.54+ may be to use the improved Branding options under PeopleTools > Portal > Branding.

      But the simplest way to get juery working on a PeopelSoft page is to do this:

      1.) Open the jquery-3.1.1.min.js and copy all the text.
      2.) In App Designer create a new HTML definition, paste in the text and save the HTML with a name like NY_JQUERY_3_1_1_JS.
      3.) Create another HTML Definition (save it as NY_TEST_JQUERY) with the following JavaScript/jquery code:

      <script type="text/javascript" src="%bind(:1)"></script>
      <script type="text/javascript">
      $( document ).ready(function() {
      $(".PSEDITBOX").css("background-color", "red");
      });
      </script>

      4.) Create a new page (NY_TEST_JQUERY) and add 2 fields: an edit box (I used DERIVED_PTPP.PORTAL_NAME) and an HTML Area (DERIVED_PTPP.HTMLAREA)
      5.) Add the following Activate PeopleCode for this page:
      DERIVED_PTPP.HTMLAREA = GetHTMLText(HTML.NY_TEST_JQUERY, %Response.GetJavaScriptURL(HTML.NY_JQUERY_3_1_1_JS));
      6.) Add the page to a test component.
      7.) Navigate to the component/page in PIA. You should see the Edit Box has had the background color changed to red.

      I hope that helps. But keep in mind there is a lot of other considerations when it comes to using jquery in PeopleSoft. I recommend reading through Jim Marion's blog. He has blogged about it quite a lot here.

      Neil

      Delete