[Skip Navigation LinksBluePrint > Support > Template Tutorial > 3. Working with Headers and Footers]

Tutorial 3. Working with Headers and Footers

Note. In order to make full use of this tutorial, it is essential to first install Blueprint for Outlook. Further details can be found on the 'Download' page

To explain the concepts with this tutorial, the following blueprint template example will be referenced: MESSAGE_HEADERFOOTER.htm

In the previous tutorial, we described how to construct an Outlook style template. It introduced the idea of working with tables to control the presentation of your prints by presenting the fields in columns, and providing intelligence to hide rows or entire tables based on the value within a property. In addition, support for numeric values was introduced to allow the text representation of a numeric property to be defined within the blueprint template.
In this tutorial, we will expand further and discuss how to create fully customisable Headers and Footers for each page of your message. We will also discuss how a watermark can be added to your blueprint templates.

This tutorial will explain how to use the following features:

  • The Blueprint Header tag
  • The Blueprint Footer tag
  • Creating a Watermark



  • The Blueprint Header tag

    To understand the concepts described within this tutorial, open the MESSAGE_HEADERFOOTER.htm blueprint template. This template builds upon the MESSAGE_OUTLOOK.htm template used in the previous tutorial. In addition, support has been added for presenting a Header and Footer on each page.

    This section will describe the Header section of the template. At the top of the <BODY> section of the template, a new <DIV> has been defined as follows:

    <DIV id="BPHeader">
    ...
    </DIV>

    The id, "BPHeader" tells the Blueprint printing mechanism that everything within this
    tag defines the HTML to be placed on top of each new page when printed.

    WARNING: There must be only one <DIV id="BPHeader"> section defined within a blueprint template.

    There are no restrictions on the HTML that can be placed within the Header section. Therefore, Blueprint fully supports the use of images, message properties and HTML formatting. The following is an extract of the BPHeader HTML defined in the MESSAGE_HEADERFOOTER.htm template:

    <TABLE width="100%">
    <TR>
    <TD width="25%"><IMG height="50" src="blueprint.jpg" > </TD>
    <TD style="TEXT-ALIGN: center;FONT-SIZE: 14pt; COLOR:RED;"> <b><span id="BPMessProp">NAME=Categories</span></b>
    </TD>
    <TD width="25%" style="TEXT-ALIGN: right">
    <b><span id="BPMessProp">NAME=Sensitivity|POSSIBLE_VALUES=0: ,1:PERSONAL,2:PRIVATE,3:CONFIDENTIAL</span></b>
    </TD>
    </TR>
    </TABLE>

    In this header, a table is constructed with only one row. This row is broken down into three columns:

    ColumnDetails
    Column 1has a width of 25% of the row. It is used to present a company logo image. Note. The image path must be relative to the path of the blueprint template.
    Column 2is used to present the Microsoft Outlook Categories property (e.g. Business, Ideas). As before, the BPMessProp is used to define this. In addition, the font style of the categories have been modified so that it is large and red.
    Column 3has a width of 25% and displays the sensitivity of the message. The sensitivity is managed as a numeric value, and therefore the POSSIBLE_VALUES tag is used to define the printed values. (For more details on POSSIBLE_VALUES, see Tutorial 2). This column is also right aligned to ensure it is displayed on the the right hand side of the header.

    Therefore, when a message which contains categories and a sensitivity, the header for each page will be displayed as follows:


    An extract of a printed message containing a header

    The Blueprint Footer tag

    The tag used to define the Footer is managed using the same principle as described for the Blueprint Header tag. Therefore, within the MESSAGE_HEADERFOOTER.htm, locate the <DIV> tag at the bottom of the document:

    <DIV id="BPFooter">
    ...
    </DIV>

    The id, "BPFooter" tells the Blueprint printing mechanism that everything within this <DIV> tag defines the HTML to be placed on bottom of each new page when printed. The following is an extract of the BPFooter HTML defined in the MESSAGE_HEADERFOOTER.htm template:

    <TABLE width="100%" border="0">
    <TR>
    <TD width="50%" style="FONT-SIZE: 10pt"><span id="BPMessProp">NAME=CurrentTime|FORMAT_STRING=Print Time: %s</span></TD>
    <TD><span id="BPPageNo"></span></TD>
    <TD align="centre" width="30%" style="FONT-SIZE: 10pt">Your Company, Your Address</TD>
    </TR>
    </TABLE>


    In this footer, a table is constructed with only one row. This row is broken down into three columns:

    ColumnDetails
    Column 1uses the Blueprint property tag, CurrentTime, which is replaced by the current time. In addition, the tag element FORMAT_STRING is also defined. This is used to allow the processed property to be place within some addition text. For more information on its usage, see the Technical Reference page
    Column 2is used to define the current page number. This is defined using the Blueprint property tag, BPPageNo. This will replace the text of the element with the current page number.
    Column 3is used to provide some basic text about your company.

    Therefore, when a message is printed, the footer for each page will be displayed as follows:


    An extract of a printed message containing a footer

    Creating a Watermark

    This section will describe how to easily add a watermark to your templates.

    Locate the blueprint template, MESSAGE_WATERMARK.htm. This template is identical to the MESSAGE_HEADERFOOTER.htm, apart from the <BODY> tag, which can be modified in the following way to include a watermark:

    <BODY style="background: url(c:\background.jpg)">

    In the above example, the style property on the <BODY> tag has been modified to include a background image through a URL.

    Note. Due to internal reasons, it is necessary to supply the full path to the image that will be used as the watermark.



    Summary