Home > .net 1.1, c#, MCMS 2002 > Creating Customized CMS 2002 Print Pages (without Custom Templates)

Creating Customized CMS 2002 Print Pages (without Custom Templates)

January 29, 2007

One of the most challenging, and mind-numbing, tasks of CMS 2002 revolves around creating and maintaining custom “print page” templates.  I’ve seen, and worked with, quite a few convoluted examples and ideas and, in the end, build off of a simplistic print page created by a prior coworker of mine.

The concept focus on using basic JavaScript to re-render the page specified in DIV tags.

 What does this require?

  1. Enclosing the areas of content into DIV tags.
  2. Creating the JavaScript to capture your DIV tags and re-render them out.
  3. Adding an include file for your JavaScript on your templates (most likely through a UserControl so you don’t have to update it on every page in the future).

Step #1 – Modifying your Templates

For example, let’s take a news story posting.  A news posting will have a heading and a body.  For our CMS site, we use Telerik’s R.A.D. Editor for CMS, so we do not need to worry about picture fields and such—they’re all enclosed in the body field.

Enclose your heading tags—either CMS controls or HTML tags—with div tags.

<div id=”print_header”>
 <uc:HeaderControl id=”HeaderControl1” runat=”server” />

And now, your content body.

<div id=”print_body”>
 <uc:Breadcrumb id=”Breadcrumb1” runat=”server” />
 <cc1:RadEditorPlaceHolderControl id=”rad1” PlaceholderToBind=”PageBody” … />

Step #2 – The Print Script

Remember basic ASP, includes, and JavaScript?  Let’s relive that for a (very) brief moment.

Create a new file, we’ll name it PrintPage.inc.  This JavaScript page is responsible for capturing your DIV tags and rerendering them out.

The cool thing about JavaScript and DIV tags is that you can capture them into variables and do with them as you please—due to JavaScript’s document object.

function ClickToPrintPage()


var print_body = document.getElementById(“print_body”).innerHTML;
var print_header = document.getElementById(“print_header”).innerHTML;
var print_title = document.title;
var window_setting=”toolbar=yes,location=no,directories=no,scrollbars=yes,width=650,height=800″;
var printdoc=window.open(“”, “”, window_setting);

Okay, from here, we’re ready to start customizing our page.  Think of this as an exercise in Response.Write ala JavaScript.

printdoc.document.write(‘<LINK href=”/usd259/styles/base.css” mce_href=”/usd259/styles/base.css” type=”text/css” rel=”stylesheet”/>’);
printdoc.document.write(‘<LINK href=”/usd259/styles/print.css” mce_href=”/usd259/styles/print.css” type=”text/css” rel=”stylesheet”/>’);
printdoc.document.write(‘<title>’ + print_title + ‘</title>’);
printdoc.document.write(‘<table width=”100%” border=”0″><tr>’);
printdoc.document.write(‘<td align=”center”><img src=”~/printheader.gif” class=”img1″></td>’);
printdoc.document.write(‘<hr color=”black” height=”1″>’);

Step #3 – Adding to Your Templates

You can either add the include file to every template or to a custom control that exists on every template (I prefer the latter).  For the example, I’ll add it to the same control that the “Print This Page” button exists on.

<!—#include file=”printpage.inc” —>

On the Printer button (or image in this case), add the JavaScript call; as above in Step #2.

<A href=”javascript:ClickToPrintPage();” mce_href=”javascript:ClickToPrintPage();”>
<img id=”IMG1″ alt=”Printer Friendly Page” src=”~/print_icon.gif” mce_src=”~/print_icon.gif” border=”0″>

That’s it.  Recompile and run. 

Categories: .net 1.1, c#, MCMS 2002
  1. January 17, 2008 at 1:29 pm

    I need to put a print button all on my web site in order for people to print
    Recipes. Can you help? Thank you!
    I am computer illiterate, a little bit!

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: