[
BluePrint > 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:
| Column | Details |
|---|
| Column 1 | has 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 2 | is 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 3 | has 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:
| Column | Details |
|---|
| Column 1 | uses 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 2 | is 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 3 | is 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
This tutorial has provided you with an understanding of how to create fully customizable Headers and Footers. It introduced the Blueprint tags, BPHeader and BPFooter used to manage this. The HTML which is presented within these tags will be displayed on every page that is printed.
In the next tutorial, we will explain how to use Blueprint for Outlook to support your custom forms.
Continue to Tutorial 4: Custom Forms