×
UX/Mobile/Responsive

Enhancing the Usability of PeopleSoft Applications

By Larry Grey • February 13, 2006

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:

SCROLL BOX

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!

So how do we get these functions to execute at the proper times? The addEvent function from Scott Andrew LePera. PeopleTools attaches it’s key event handler by directly assigning the PeopleTools JavaScript key handler function to the onkeydown and onkeyup properties of the document object. That works, but only for mapping one function to the event. addEvent allows us to “attach” additional functions to these browser DOM events independent of the PeopleTools function. For those are interested in using this technique more extensively, be sure to read these follow up articles that explain why this technique isn’t the end-all, be-all method for doing this. It suits our purposes well enough though, so we’ll use it here.

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.

  • Don’t use an HTML area to get this code into the page.
  • Move the CSS for the current field focus out of this code and use a regular PeopleTools style sheet definition.
  • Add some unit tests for it with Selenium or JSUnit.
  • Add some code to handle “wrapping around”. If someone is on row 1 and presses the up arrow, then this should wrap around to the last row in the grid. If they are on the last row in the grid and they press down, then they should move to row 1.
  • Beef up the regular expression test to handle the add row/delete row buttons. If you do a view source on a PeopleSoft page, you’ll see that these buttons don’t follow the same naming standard as the rest of the fields in a grid.
  • Do some more testing on pages with grids at level 2 and 3.

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

Stay Updated

13 Replies to “Enhancing the Usability of PeopleSoft Applications”

  1. Sorry that I am replying to to this blog so late.
    But would kindly request you to help me out with the below given problem:

    My requirement is that I want to read the values of a set of columns from a grid(level 1) in javascript.
    Depending on the values some manupulation has to be done in the script.
    But I am actually facing problem in reading these level1 field from the javascript.
    It would be really helpful if you could help me in this respect.

  2. > extra parameters I try to pass

    Pass extra parameter to what? The gridKeyHandler function? You can’t pass extra parameters to that because you aren’t calling it; the browser is.

    You can access global scope from within gridKeyHandler or you can create the gridkeyHandler function differently and use closures for extra “parameters”.

    What are you actually trying to accomplish?

  3. Sorry for posting so late after this was originally written, but i’ve been going batty trying to figure this out.

    How would you go about passing additional parameters to gridKeyHandler? Any extra parameters I try to pass are losing their scope inside gridKeyHandler.

  4. Hi,

    I want to diable the “+” button on a row in a scroll dynamically.Peoplecode has the insert enabled property for a rowset class but not on a row class. I tried a couple of approaches with java script but wasn’t able to achieve. Can someone please help me on this.

    Thanks.

  5. @sreekanth

    There are several generic “count the characters in a field” JavaScript examples out there. Here’s one for example.

    http://www.shiningstar.net/articles/articles/javascript/dynamictextareacounter.asp

    To apply this to a PeopleSoft page, you just need to put this code into the page somehow (probably an HTML Area is easiest if you just have one page to modify), and change the code so that it references the PeopleSoft comment field (which will be named according the record/field that it is tied to).

    @Anonymous

    The Row object has a property called “Selected” that you can test in PeopleCode and then gray the field that you want based on the row selected.

  6. I find this blog very interesting and informative. Keep up the good job.

    Recently, I encountered a problem with the PeopleSoft grid. I would be curious to know everyone’s thoughts on this problem.

    Problem Background:
    ————————
    * I have a page with a grid at level 1.
    * The row selection property of the grid is set to radio button. So the user could choose only one value from the grid.
    * I want to gray out a field on the page (that is not on the grid) when the user clicks on the radio button of the grid row.

    What are my choices here? I mean, to accomplish the above.

  7. My Requirement is something like this.

    I have a page with Two Levels that is LEVEL 0 and LEVEL 1.

    *********on LEVEL 0 I have ************

    SUBPAGE DERIVED_WORK_BI,

    SUBPAGE BI_PB_WRK,

    SUBPAGE BI_HDR,

    SECPAGE

    *************Level 1 SCROLL AREA I have *********************

    3 fields from BI_HDR_NOTE record ,

    1 Field From NOTE_TYPE record,

    1 field (Long Edit Box) from DERIVED_WORK_BI record,

    1 Field from STD_NOTE_EF_VW

    Limit of the LONG EDIT BOX field is 254 characters. On Page LONG EDIT BOX allows you to enter more than 254 Characters but when you save the page it will automatically truncate the data after 254 chars. Here I was planning to Place HTML area and display how many Characters are left while USER entering the data in the long edit box. I wanted to place the HTML AREA as field from DERIVED_WORK_BI

    Example : If User entered 54 chars then in the HTML Area I have to show how many chars remaining to be entered.

    Here I have to Link Up Long Edit Box with HTML Area. While I am keying in the data in Long Edit Box I have to Count the chars and display in HTML Area.

    Can you please guide me thru this. How to Approach and What is code that I need to use and where?

    I really Appreciate if you can Provide me the guidence.

  8. I’m assuming that you mean insert a new row on the client dynamically.

    Being able to insert new rows from the browser without taking a trip to the web server is one of the great new features that are targetted for PeopleTools 8.50 (which is coming out some time in 2009).

    Pre 8.50, it doesn’t buy you that much to insert new rows on the client. You can actually do this with some crafty JavaScript now, but the problem is that the component processor on the server has no idea about these new rows so they won’t be of much use.

    Is that what you were after?

  9. Hi

    I would be thankful to you if you could tell me how to insert row dynamically like in people soft
    The code here is not visble to me

    Thanks & Regards
    Namita

  10. Chris,

    Well done. It works great with a simple grid.

    Challenge: I have a page that has a grid with RowInit peoplecode that enables/disables textboxes based on other values in the row. One row may have an input type=”text” element and the next row may have a span element (same column). Since span’s don’t have id attributes by default, the keydown code doesn’t work.

    Maybe if I set the “Page field name” property… nope. That doesn’t add an ID attribute.

    Anyway, it appears that disabled fields mixed with enabled fields within the same column, but different rows complicates this solution.

    By the way, take a look at jquery. You may find that it simplifies the code quite a bit.

  11. Yes, there’s no end to the things that can be added. Another great one would be to hook up a calculator to numeric fields. I’m sure that would make a few people happy.

    You should start a blog and post some fo your stuff.

  12. Hey Guys…I’ve recently found your blog and have enjoyed reading it. The usability and version control (would love to see your pspcmprog decoder) articles are great.

    I’m especially passionate about the usability side. I’ve been using javascript to enhance the usability of PS pages for awhile now.

    One example of this is a javascript library I’ve created that adds realtime character counters and an expand collapse button to all of the textarea controls on a page and sorts all of the drop down lists by value rather than label. This script can be dropped in on any page and will loop through all the controls after page load finishes and apply the additional features using techniques similar to what you have demonstrated.

    I’m gradually adding things to this library as different clients have different requests.

    It’s cool to see others out there doing the same thing. If you are interested I’ll send you a copy of the library I wrote. Keep up the good work.

  13. Very cool…I just mocked up a quick page with a grid and put your code on it, works great! I’m going to mess around with it more on Monday. Thanks for sharing that!

Comments are closed.

Request a Demo