Thursday, September 14, 2006

Where am I?

Highlighting the active text field in PeopleSoft.

This past week I have been working with Monkeygrease. Monkeygrease is a very powerful tool for developers that want to enhance their existing PeopleSoft application user interface. In the next few paragraphs I will demonstrate how I used Monkeygrease and jQuery to highlight the active user input control on PeopleSoft pages without modifying any pages. To implement this example, you will need access to your PeopleSoft web server's PORTAL web application folder.

The most common file location for JavaScript and CSS files is the /scripts and /css directories. In keeping with this standard, I created the scripts and css folders in the root of the PORTAL web application. The only file location requirement for your scripts and css files is that they must be accessible to the client through your web server. The script and css file locations shown below are suggestions. If you place these files in different locations, then be sure to modify the monkeygrease.xml file accordingly.

Since this example depends on jQuery, download the compressed jQuery library from the jQuery website and save it in your web server's /scripts/ directory.

The JavaScript -- saved in file /scripts/highlight-active.js:


$(document).ready(function(){
$("input[@type='text'], input[@type='password'], select, textarea").focus(function(e) {
$(this).addClass("hasfocus");
}).blur(function(e) {
$(this).removeClass("hasfocus");
});
});




The CSS -- saved in file /css/highlight-active.css


.hasfocus {
background-color: #FFFF99;
}



Download the monkeygrease.xml file to your web server's WEB-INF directory. The only thing interesting about the monkeygrease rules file is the url patterns. The first url pattern, /ps[cp].*\?cmd=(?:loginlogout).*, matches the login and logout pages. The second url pattern, /ps[cp].*/h/.+tab=.*, matches homepage tabs. The third url pattern, /ps[cp].*/c/[^/]+, matches all components. If you use a pattern like /.*, then you will match all URL's. While that may be preferable, I chose not to match IScript, worklist, and external file URL's.

Since Monkeygrease is a Servlet Filter, you will need to modify the portal web application's web.xml file. See the Monkeygrease documentation for details. I was able to paste the web.xml code snippet from the documentation directly into my web.xml file without any modifications.


That's it!

12 comments:

Derek said...

Hi Jim,

Great documentation on this. I had it working in our dev environment in about 5 minutes.

(I had already had Monkeygrease running)

mohan said...

hi jim,
there is a comments field on an mss page.i should do something by which user will see a warning message as soon as his comments length exceeds 255 characters. if i write code in field change or field edit. it gets fired as the user tabs out. but i want it to warn user as the limit exceeds when he is still typing.i am in urgent need of help . please help me

Jim Marion said...

You will need to use JavaScript to do this. Add an HTML Area to your page with some JavaScript. Use the JavaScript to bind to the text area onchange, keydown, or keypress events. This will allow you to check the character count for each key typed.

Lazy Donkey said...

Hi jim,
The posting on AJAX and webservices is awesone.I am strugling to get following done for our business any help is appreciated.I want to kick off an exe which resides on every client machine through a peoplesoft button field change event.

Jim Marion said...

Sorry Raju, you can't run an exe directly. You can use a hyperlink or JavaScript to set window.location to the path of the exe. If you do this, then the user's browser will prompt the user to run the exe. As an alternative, if your users use Internet Explorer, then you could create a signed ActiveX control that launches the exe.

Lazy Donkey said...

Jim,
thanks for the quick reply.
In the first method can appserver talk to the client machine using the javascript. and how can I initiate digitally signed active x control through field change event. any help is appreciated.

Jim Marion said...

Since FieldChange requires a post back and is, therefore, stateless (client-side speaking), you have a couple of options:

1. If you have PeopleCode that needs to execute on FieldChange, then use FieldChange to add your ActiveX and/or JavaScript to a custom HTML Area on the page.

2. If you are only using FieldChange to trigger the ActiveX, then use the JavaScript DOM event for the field to trigger the ActiveX control.

Duane said...

Hi Jim,

We recently upgraded to IE7. When we did that our Monkeygrease "Where am I" code started funtioning differently. Now it takes two clicks to actually open a dropdown. The first click gives the field 'focus' and the second click opens the dropdown. Do you know where to find a patch or problem resolution for this?

Thanks,
Duane

Jim Marion said...

@Duane, I have not experienced this. If you comment out the monkeygrease rule, do drop-down's start working correctly? Are you current on your jQuery libraries? The code is relatively trivial and should have no affect on the behavior of drop-downs. Changing class attributes should not affect the way drop-downs function. Can you provide anymore details?

Thathagai said...

Hi Jim,

The monkeygrease documentation link doesnt work any longer. Could you please share the code snipet you used in web.xml to include monkeygrease.xml?

Jim Marion said...

@ Monkeygrease moved here: http://code.google.com/p/monkeygrease/. Unfortunately, I don't have my web.xml anymore. I stopped using monkeygrease a few years ago so I could use compression. Instead of Monkeygrease, I use the "Configurable User Interface" concept from Part II of my book PeopleTools Tips & Techniques.

Ashish said...

Hi Jim,

We have a requirement to highlight the keywords in a document (say i type "java" in my edit box and 5 resumes are shown in the grid, if i open any one of the attachments i should see "Java" keyword in Yellow) that just opened as a result of the keywords i typed in a Edit Box on a PS Page?

Any Clue Please..?

Regards,
Ash