I’ve often receive requests for a solution regarding printing a PeopleSoft page by clicking a button. This tutorial presents a step-by-step instruction for the simple requirement of printing the current page.

Problem/Requirement Definition

Insert a button on a standard PeopleSoft page. Clicking this button will print the current page. The button itself, the pagebar (the portion containing the New Window and Help links), and the action toolbar will not be included in the printout.

Solution

Step 1. Choose a field from a derived record which you’ll use as the field for your pushbutton control. It should be in MixedCase format and at least 25 characters long. I recommend creating a new field for this purpose, so that you can assign a suitable label to the field.

Step 2. Insert the pushbutton on your page. Set the Destination to External Link and type is Dynamic. For this tutorial, I’ve created the field JS_PRINT and attached it to the DERIVED_WORK record. This is the field that the pushbutton is assigned to.

Pushbutton properties

Step 3. Go to the General tab and fill in the Page Field Name. Enter the value PRINT_BTN.

Pushbutton’s Page Field Name

Step 4. We assign a value to the external link pushbutton via PeopleCode. In the FieldDefault PeopleCode of DERIVED_WORK.JS_PRINT, put the following PeopleCode:


DERIVED_WORK.JS_PRINT = "javascript:window.print()";

This is the code that triggers the print command in the browser when the button is clicked.

Step 5. Insert an HTML area at level 0 of the target page. Set the Value to Constant and put the following text: 


<style type="text/css">
@media print {
  #PAGEBAR, .PSHEADERTOOLBARFRAME, #PRINT_BTN { display: none }
}
</style>

This CSS declaration tells the browser to omit the pagebar, the tool bar, and the print button from the printout.
Note: This tutorial assumes that the print button is placed at the level 0 of the page.

And there you have it!

Normally, I have reservations about inserting the CSS in the body of an HTML document. However, it is much simpler and appears to work in most browsers including IE6 and Firefox. This post presented a more elaborate technique.

Additional Requirement

Suppose it is desired that the Folder Tabs (top) and Hyperlinks (below) for page navigation should also be omitted on the printout.

Solution

This requirement is little more tricky since PeopleTools doesn’t assign an id or a class to these sections of the page. We would need assign a class to these elements via javascript. The following script adds the class of PS_PAGETABSNAV to the Folder Tabs and Hyperlinks; the style is updated to omit PS_PAGETABSNAV from the printout.
Caveat: This may not work on all 8.4x versions and may stop working in future versions of PeopleTools. This is tested only on 8.45

Modify the content of the HTML area for step 5 above.


<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() {
pg_tables = document.%FormName.getElementsByTagName('table');
for (var i1=0, el_tbl; el_tbl=pg_tables[i1]; i1++) {
  if (el_tbl.className=='PSPAGECONTAINER') continue;
  tds = el_tbl.getElementsByTagName('td');
  for (var j=0, el_td; el_td=tds[j]; j++) 
    if (el_td.className=='PSACTIVETAB'||el_td.className=='PSHYPERLINK') {
      if (el_tbl.className) el_tbl.className+=' PS_PAGETABSNAV';
      else el_tbl.className='PS_PAGETABSNAV';
      break;
    }
}
});
</script>
<style type="text/css">
@media print {
  #PAGEBAR, .PS_PAGETABSNAV, .PSHEADERTOOLBARFRAME, #PRINT_BTN { display: none }
}
</style>