Print a PeopleSoft Page with JavaScript

1.  You will need a Long character field to hold the HTML string. You can use the delivered field HTMLAREA if there is no need to create a custom field.

2.  Create a new page.

3.  Place an HTML Area on the page.

4.  Assign a record and field to the HTML Area Properties page. (Note: The field used for the HTML Area needs to be of type LONG character.)

5.  Verify the HTML Area is at Level0.

6.  Add the push button to the page that will kick off the Print request. Make the Destination dropdown box be “External Link”. The External Link frame should have the “Dynamic” radio button selected.

Note: Make sure that the push button field that you use is long enough to contain the code that will be added in a future step (min of 25 characters).

7.  On the General tab of the Push Button/Hyperlink Properties page, make sure to fill in a Page Field Name. For this example, you see PRINT_BTN which will be placed in the print HTML below as #PRINT_BTN. This page field name is used so that the print function knows which button(s) to hide when the page is printed.

8.  Add the following PeopleCode to the Component Record PeopleCode RowInit event.

MY_TEST_WRK.HTMLAREA.Value = "<style type=""text/css"">@media print {body { zoom:80%;} #PAGEBAR,.PSHEADERTOOLBARFRAME, #PRINT_BTN { display: none }}</style>";

Explanation of the HTML above:

Zoom: The percentage listed after zoom will be how to shrink the web page on the printout (or expand if greater than 100). In this example, the HTML is printing the page at 80% of its normal size.

#PAGEBAR and .PSHEADERTOOLBARFRAME get a handle on the delivered PeopleSoft headers and navigation bar on the page.  By also listing #PRINT_BTN the HTML is instructed to hide these areas on the printed page.

Additional buttons that you have on your page can be placed into this HTML text. The Page Name field just needs to be prefaced with the pound symbol (#).

All buttons that you desire to hide must be at Level0.

Alternatively, the code can be placed as a constant value on the HTML Area Properties page if the zoom percentage will never change (page size remains constant).

To dynamically control the percentage to shrink or expand the output, use code similar to this and place in a function that would be called whenever the page dimensions are changed by user activity:

/* I Want to dynamically control Page Percentage so all will fit */&Percnt = 80 - &somenumber_or_equation;MY_TEST_WRK.HTMLAREA.Value = "<style type=""text/css"">@media print {body { zoom:" | &Percnt |"%;} #PAGEBAR, .PSHEADERTOOLBARFRAME, #PRINT_BTN { display: none }}</style>";

9.  On the Component Record Field PeopleCode FieldDefault event for the push button, place the following code:

MY_TEST_WRK.MY_TEST.Value = "javascript:window.print()";

10.  Run the page in the browser. The HTML area is not visible since there is no text, only a script.

11.  Pressing the Test Print button will bring up the printer dialog box where you can switch to another printer, along with setting the printing preferences (landscape vs. portrait orientation, etc):

12.  When the page prints, notice that the Test Print push button that was specified to not display is not shown on the printed page. Also, the PeopleSoft navigation bars and headers are not shown either.