Home > ApEx, CSS > “Return” and “Print” links on Printer Friendly pages

“Return” and “Print” links on Printer Friendly pages

A Printer Friendly version of any ApEx page can be viewed by accessing a URL of the form:

http://.../f?p=1002:460:2122245186391314::NO::::YES

where the YES at the end of the URL tells ApEx that we want to view the page in Printer Friendly mode. This causes the page to be displayed using the Printer Friendly page template. This removes lots of the bits and pieces from the screen (such as navigation lists, breadcrumbs etc.) that we have no interest in printing. The user can then click the File menu in their browser and click “Print” to actually print the page. They can then click the “Back” button in their browser to return to the application proper. Great.

But wouldn’t it be nice if we could put our very own buttons/links on the Printer Friendly page to allow the user to print the page and then “go back” without having to use the browser’s File Menu or Back Button? Well, we can…

1) In Application Builder, Select Shared Components > User Interface > Templates
2) Find and click the “Printer Friendly” page template.
3) In the HEADER text area, add the following just before the </head> closing tag:

<style>
@media print
{
.screenOnly {display:none;}
}
</style>

This creates a CSS class called screenOnly which causes those HTML elements to which it is applied not to be rendered when printing.

4) Add the following to the very top of the BODY text area:


<!-- Display PRINT and GO BACK links -->
<BR/>
<a href="javascript:history.go(-1);" class="screenOnly">
<img src="&IMAGE_PREFIX.prev_arrow.gif" align="absmiddle" hspace="2">
Click here to return to the application
</a>

<a href="javascript:window.print();" class="screenOnly">
<img src="&IMAGE_PREFIX.print02.gif" align="absmiddle" hspace="2">
Click here to print this page
</a>
<hr class="screenOnly"/>
<!--End display of PRINT and GO BACK links -->

Click “Apply” to save your changes.

5) Now run any of your pages in Printer Friendly mode. You’ll see a bar at the top of the page looking like this:

Print Links Screen Capture

Clicking the Print icon will open your browser’s print dialog. Clicking the Go Back link will take you back to your application. And, what’s more, when you print this page neither of these links or the the Horizontal Rule that’s just below them will appear on the printed page spoiling the layout (this is achieved through the screenOnly CSS class applied to the <a> and <hr> tags).

As an example, go to any page in my sample app (such as here: http://apex.oracle.com/pls/otn/f?p=666666:4) and click the Print link in the top right of the page.

Advertisements
Categories: ApEx, CSS
  1. Jincy
    August 9, 2017 at 2:22 pm

    Hi, I am on APEX 5.1.1.00.08. We have an application and there are some read only pages the users want to print. But any APEX page I print I see an extra blank page at the end. Is there anyway to remove this extra blank page?
    Regards,
    Jincy

  2. December 12, 2016 at 5:52 pm

    I just had to fine-tune my template a bit to remove navigation bar and the app_user / logout links.

    thank you very much Andrew, it ‘s brilliant.

  3. Wayne
    January 29, 2014 at 4:10 am

    Nice solution, so if you have a multi-page App, what URL would sit behind the “Print” link (as per your Demo page) to accommodate being on one of many pages when needing to print ??

    something like …f?p=&APP_ID.:&APP_PAGE_ID.:&APP_SESSION.:YES

    thanks in advance

  4. Werner
    September 29, 2011 at 1:29 pm

    How would I tell APEX in printer friendly mode to display the checkbox
    which normally is hidden ?
    .screenOnly {display:none; except checkbox ??????}
    Thank you for support, Werner

  5. Helen
    March 30, 2011 at 4:40 am

    This article fixed my today’s headache. Thanks, Andy.

  6. Andrew Tulley
    August 28, 2007 at 3:51 pm

    Mike,

    What version of ApEx are you using?
    Are you using apex.oracle.com or your own intallation?

    The images that the above HTML references (namely print02.gif and prev_arrow.gif) come as standard in the images folder of every version of ApEx I believe. The above images won’t display if you don’t have the files print02.gif and prev_arrow.gif in your ApEx images folder. If you don’t have these files in your images folder for whatever reason you can download them from the following URLS, save them into your images folder and that should fix that problem.

    Let me know if that doesn’t fix it,

    Andy

  7. Mike
    August 28, 2007 at 2:32 pm

    Hummm…
    the images for the print friendly do not display…

  8. Andrew Tulley
    May 18, 2007 at 7:04 pm

    Cheers Patrick, URL fixed.

  9. May 18, 2007 at 6:52 pm

    Hi Andy,

    nice article! But it looks like that the URL at the top of the article isn’t fully displayed.

    Greetings
    Patrick

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: