Improving PeopleSoft with jQuery - Some Examples (Part 1)
2012-06-08 17:30
127 查看
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.)
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.
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(" "+newText); //%append the new Print Anchor to the end of the Page Bar $(pgBarLinksCell).append(" ").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.
相关文章推荐
- Improving PeopleSoft with jQuery - Some Examples (Part 2)
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- Effects with the Pixel Bender Toolkit – Part 7: Improving the displacement filter
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
- Automation for the people: Improving code with Eclipse plugins
- 存档: Automation for the people: Improving code with Eclipse plugins
- Improving SharePoint User Experience With JQuery-Client Side Form Validate
- Highlight On Mouseover Effect With JQuery
- (转载)How to create a mobile WordPress theme with jQuery Mobile
- Idea on improving cellphone soft keyboard
- 【ALE SAP part 2】Using ALE with Middleware --General Introduction
- OpenStack with Opendaylight Part 1: Intro to Pipeline
- PeopleSoft Security Logging
- Getting Started with jQuery
- [Clojure] A Room-Escape game, playing with telnet and pure-text commands - Part 4
- iOS7 Networking with NSURLSession: Part 2
- Getting Started with AngularJS 1.5 and ES6: part 6
- PeopleSoft error report: Error: Data Integrity Error
- 用你自己的插件扩展jQuery(Extend jQuery with Your Very Own Plugin)