One way to customize a PeopleSoft page is to execute javascript to manipulate the DOM. Some possible scenarios that may make this necessary:

  • add dynamic elements to your page (set some elements as draggable maybe? or perhaps adding mouseover behavior to PeopleSoft page elements)
  • removal/manipulation of elements not accessible via Application Designer (automatically added elements outside of a page definition: navigation elements, Close/Ok/Apply buttons in modal pages, etc.)

In Application Designer, insert a HTML Area on the page definition. The HTML Area can be placed anywhere on the page, however the attached javascript should not directly perform the DOM manipulations. To ensure all of the objects you want to manipulate are already loaded, attach the code on the window.onload event handler. The onload event should not be directly overridden either, lest you override any function already assigned by the PeopleSoft page processor. The proper way of javascript insertion is to append to the onload event. The best way to do this is using this technique by Simon Willison.

The HTML Area should look like the following:


<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
 window.onload = func;
} else {
 window.onload = function() {
   oldonload();
   func();
 }
}
}
 
addLoadEvent(function() {
/* code to run on page load */
});
</script>