Tags:
create new tag
, view all tags

How to create a print button that opens up a print dialog box

2014-05-16 - 03:57:52 by PeterThoeny in Development
I was tasked to add a print button to a TWiki application that opens up a print dialog box. This one-click option is more user friendly than the standard Print Version => File => Print option. Searching the internet I discovered that this is possible with some JavaScript.

The button could be added directly in topics, but it makes more sense to add it to a header topic that is included by application topics.

Example header topic of a knowledge base application:

Knowledge Base Card

Title: The sky is falling
Status: Work in progress, under construction Work-in-progress
Categories: Climate, Environment

Edit Card

Title:
Status:
Categories:


 

The print button works, go ahead and try it out! The edit tab does not save data - this is just a print demo.

The HTML for the print button looks like this:

<div style="float:right; width:160px;" class="commentPlugin">
<a onclick="window.print('%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?cover=print'); return false;"
   href="%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?cover=print"
   class="twikiButton"
   style="display: inline-block; border-radius: 4px;">
&nbsp;%ICON{printtopic}% Print this page&nbsp;
</a>
</div>

Explanation:

  • The <div> tag is used to float the button to the right.
    • The class="commentPlugin is added so that the print button does not show up in the printout. TWiki's print skin hides the comment box. If you install PatternSkin 2014-05-15 or later you can specify class="hideInPrint instead.
  • The <a> tag, an HTML anchor, has the following parameters:
    • onclick - when clicked, the window.print() JavaScript function is called, passing along the print URL of the base topic. The %SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC% is the URL of the base topic (the topic including the header topic), the cover=print URL parameter enables the print skin. The return false tells the browser to take no further action on the click event.
    • href - this is a fallback in case JavaScript is not available (defensive coding).
    • class and style - to give the anchor link a TWiki button look.

Note: Newlines are added in the <a> tag for clarity, they must be removed if used in TWiki topics!

I hope this small feature comes in handy for your next TWiki application project.

Comments

.

Topic revision: r1 - 2014-05-16 - PeterThoeny
 

Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Help
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.