This entry is about how to enhance the usability of your PeopleSoft applications.
PeopleSoft always did well against competitors when comparing user interfaces, but there is still plenty of room for improvement. I don’t know of any PeopleSoft users that would disagree with that. Let’s take a look at one example of how we can improve the user interface in existing PeopleSoft applications.
It’s common in PeopleSoft applications to see lots of grid controls on the pages. One issue that grid controls have is that they don’t provide great keyboard navigation for power users. There are hotkeys that you can use to insert and delete rows from a grid (alt-7 and alt-8) as well as more advanced things like searching the grid, toggling between showing all rows of data or just a subset. You can see a list of the system hotkeys by pressing Control-K on any page in PeopleTools 8.4x applications.
If you’d like to do something like move through a grid like you do in a spreadsheet (up key moves up a row, down key moves down a row), then you have to do some work. So, that’s what we’re going to do. Along the way we’ll also show how to highlight the field with the cursor in it. I did that to help make the demo video (see below) a little more obvious, but it’s a useful tip in and of itself.
Step one is to capture the up and down keystrokes in the grid. PeopleTools has a delivered keystroke handler that gets inserted each page at runtime. Unfortunately there’s no support for you changing how that works. You do have access to the code for the generic keyhandler, but I’d recommend against changing it. It’s a little bit complicated to understand, and there’s an easier way to insert our logic.
For the purposes of keeping the demo fairly simple, we’ll insert our logic into to the page by placing an HTML area on the page definition. There are better ways of getting your logic into PeopleSoft pages without touching the delivered PeopleSoft definitions (which is the only way that we at Grey Sparling build our products), but those are beyond our scope today.
Note that in this demonstration I attached this to the USER_ROLES page, but it will work on any page with a grid control in PeopleSoft 8.4 and above. I’ve attached the code that goes in the HTML area as a separate file. Here’s what the code inside the HTML area looks like:
We start off with a little CSS that defines how the field with the current focus looks. Here we’re just setting the background to yellow, but you can do anything that you want. This gets turned on and off in the onfocus and onblur events for the fields.
Next we define a couple of helper functions (getEvent and getEventSource) to smooth over some browser differences.
Then comes our main function for handling the up and down keys, gridKeyHandler. We want this to get called everytime a key is pressed. The code looks at which key got pressed (38 is the keycode for up and 40 is the keycode for down). If it’s not something we’re interested in, then we don’t do anything.
If it was an up or down key, then we use a regular expression to see if we’re in a grid field. Grid fields have IDs of the form RECORD_FIELD$row_number. On the user roles page, the grid control is for the record PSROLEUSER_VW, so we see fields like PSROLEUSER_VW_ROLENAMEid=”mce_marker”, PSROLEUSER_VW_ROLENAME$2, etc. in the generated HTML. Our regular expression looks for some text followed by a dollar sign, followed by some digits. If we find that, then we add or subtract one from the row number (depending on whether up or down was pressed), and then try to move to the appropriate field.
The next two functions (oninputfocus and oninputblur) exist as event listeners for when focus moves between the fields. This technique comes directly from the HTMLDog folks Suckerfish series. Go check out some of their demo pages. Great stuff!
The last little bits make use of the addEvent function to wire things up. We can hook up our grid key handler right away, but we need to delay the attaching of our field level handlers until the page finishes loading (otherwise we might not have all of the fields even defined in the DOM yet) so we put that logic in a separate function and use addEvent to call that at page load. Alternatively, you could just make sure that this extra logic that we’re adding always gets put into the HTML page after all of the fields that are having handlers attached to them.
I put together a short Flash demo of this code in action. This was my first time using the Wink tutorial/presentation software. It lets you record what you’re doing and then lets you go back and do things like add text boxes, etc. highlighting what is happening in the demo. The lack of artistic ability in the demo is definitely due to me and not Wink!
There’s lots of things that I would do to beef this up to make it production ready.
As you can see, there are ways of enhancing the usability of existing PeopleSoft applications without too much effort. The grid navigation enhancement is just an example of what is possible.
Let me know if you end up implementing this in your PeopleSoft apps and how your users like it.
P.S. That picture of me on our company “About Us” page? That was Larry’s way of letting me know that I should have been in attendance when we were getting pictures taken 🙂 I’m tempted to leave that picture up though.
P.P.S. I still haven’t put up a new picture, but I delete the reference at the top to some conferences that have come and gone.
Labels: PeopleSoft, User