Select All / Clear All via JavaScript

Good UI dictates that if you have a grid that allows users to check one or more rows, then you should also have Select All / Clear All buttons available to the user. Most of the delivered grids in PeopleSoft with the Multiple Row selection option include these. The code is straight forward, and you can even copy an existing example.

However, as with all PeopleCode, your choice is to defer it to the next server trip or force a server trip. Since it's an action that needs immediate feedback, you can't defer it. Thus you're left with a page flicker for a somewhat innocuous task.

In the never ending hunt to make usuable software, I decided to step outside PeopleTools and put together JavaScript to accomplish the task. By pushing the work to the browser, it happens immediately and without a server trip. While I impressed myself, the users did not notice—but I had what I wanted, software that doesn't get in the users' way.

Here's the JavaScript that does the work:

var ROSO_CHECKBOX_MGR = {
grid: "",
title: "",

addButton: function(f, check) {
$A($$('a[id^="'+f+'"]')).each(function(pb) {
pb.href='javascript:ROSO_CHECKBOX_MGR.check('+check+')';
});
},

check: function(v) {
$(ROSO_CHECKBOX_MGR.grid).select('[title="'
+ ROSO_CHECKBOX_MGR.title + '"]').each(function(cb) {
if (cb.checked != v) {cb.click();} });
}
};

 

The code above is a JavaScript library called ROSO_CHECKBOX_MGR_JS. The first function, addButton, attaches listeners to the Select All and Clear All buttons. The second function, check, is invoked by the listener and loops through the rows in the grid to select or clear the buttons.

Here's the JavaScript that invokes the library:

<script type='text/javascript' 
src='%Javascript(PROTOTYPE_V1601_JS)'> </script>
<script type='text/javascript'
src='%Javascript(ROSO_CHECKBOX_MGR_JS)'> </script>
<script type='text/javascript'>
U_CHECKBOX_MGR.grid = 'GRID_REC_NAME$scroll$0';
U_CHECKBOX_MGR.title = '%bind(:1)';
U_CHECKBOX_MGR.addButton('GRID_WRK_SELECT_ALL_PB', true);
U_CHECKBOX_MGR.addButton('GRID_WRK_CLEAR_ALL_PB', false);
</script>

 

The first thing to notice is the import of the trusty Prototype library. The next line imports the library from above. Within the script tag, there's not much left to do. It sets the id of the grid (as generated from the Page Field name and the component processor), then requires the Hover Text from the checkbox (it gets passed in from the PeopleCode). The Hover Text, which is the title attribute in the HTML, is used to identify all the check boxes. Finally, the addButton function is called once for each button, Select All and Clear All.

The real payoff in this case was the grid I implemented this feature on. It could commonly contain more than 1,000 rows. As such, it wasn't a half-second annoying screen flicker that I had avoided, but a 3-or-more second server trip.



Post a Comment:
Comments are closed for this entry.