Using JavaScript to print a PeopleSoft Page

When working with Peoplesoft more than once we need/want to print the page we are working with.

Unfortunately, until a few time ago, I only knew one way to do that: printing the page throug the web Browser option.
But this method adds the navigation bar and menu to the printing page. I think these things are, at least, unnecesary.

With some simple steps we will see a new way of printing the page content, and avoid showing those unwanted sectors.

Let's have a practical example:

1) We have the Purchase Order page we have seen in the previous blog.

2) We will add an HTML area, based on a LONG type field.

3) We also add a push button to print the page. In this case, we will change some usual options.

This field must have a minimum of 25 characters, since we need to populate it with a string. I have chosen the DESCR field, in stead of a PRINT button field.

The target must be an External Link since we won't execute a FieldChange event. We are going to run a script in an external page.

The external link must be set as Dynamic, since we are generating it through PeopleCode.

We also set a Page Field Name property, in case we want to manipulat it through the HTML code.

Just to let the page having sense, we change the field label.

4) Here we have the final page in the Designer.

5) Set up the fields by PeopleCode.

In the RowInit Event we set the HTMLAREA field as well as the DESCR field.

The script we must set in the button to be run is  "javascript:window.print();"

On the other side, I will explain HTLMAREA value step by step.

a) <style type=""text/css"">
b)    @media print {
c)            #PAGEBAR, .PSHEADERTOOLBARFRAME {
d)                    display: none }
e)      }
f) </style>

a) Open a style tag, specifying CSS language will be used.
b) Specify this style will only be used when Printing the document.
c) Choose those HTML elements in the document that will be set up with the properties. In this case #PAGEBAR and .PSHEADERTOOLBARFRAME are the navigation bar and page header used by PeopleSoft pages.
d) Set display property to none, meanning these properties won't be shown in the printing document.
e) Close the "@media" key.
f) Close the "style" tag.

6) We navigate to the page in PeopleSoft.

7) When clicking the print button, the event is executed

8) The printed page will be shown as follows:

9) In addition to this step by step, we could also hide the "Print" button when printing the page, adding the #PRINT ID to the CSS script, in the RowInit event.

If we print it once again, the Print button is not shown anymore.

I hope this blog could be so useful to you as it is to  me.
Regards.
Facundo Salerno.