[Skip Navigation LinksBluePrint > Support > Template Tutorial > 5. Creating Multi Item Styles ]

Tutorial 5. Creating Multi Item Styles

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: MI_MESSAGE_TABLE_CSS.htm

In this tutorial, we will explain how to use Blueprint for Outlook to create flexible printouts which manage the presentation of multiple items. This tutorial assumes a basic understanding of the Blueprint template mechanism. For further help see Template Tutorial

This tutorial will explain how to use the following features:

  • The Blueprint FolderList and FolderList Items
  • Creating Outlook Style Tables
  • The Blueprint Folder tag (BPFolderProp)
  • Other Multi Item template examples

  • The Blueprint FolderList and FolderList Items

    To understand the concepts described within this tutorial, this section wil provide an overview of how Blueprint manages the presentation of multiple items.

    In previous tutorials, the HTML presentation was based on extracting Outlook properties from one item (Memo style). The HTML displayed was not modified.

    However, in order to support the concept of presenting and creating HTML for multiple items, Blueprint will dynamically add HTML sections for each item to be presented. The following diagram displays the HTML Blueprint elements which are used:

    The 'BPFolderList' id is used to identify the start of the list presentation. The [HTML sections] define the following:

    HTML sectionDescription
    [Start HTML] The contents between the 'BPFolderList' id and 'BPFolderListItem' id defines the start of the HTML list section.
    [Item HTML]The contents inside the 'BPFolderListItem' tag defines the presentation of each item in the list collection. (I.e. Blueprint will repeat this HTML for each item). This HTML contents uses the same structure as standard Blueprint Memo style templates (e.g. using BPMessProp to define item properties.)
    [End HTML]The contents between the end of and the 'BPFolderListItem' id the end of the 'BPFolderList' section defines the HTML that will be added at the end of the list section.
    [Separator HTML]The contents inside the 'BPFolderListSeparator' is used to manage the HTML presented between each List Item. If this item is not required, it can be ommited.

    Therefore, for example, if the user selected three items, and printed using a multi-item template, Blueprint would generate HTML as the following:

    This demonstrates the general process of how Blueprint will manage the presentation of the HTML for multiple items. This provides a very flexible mechanism for generating a wide range of distinct templates to satisfy the requirements of your presentation.

    In reality, Blueprint will construct the HTML by performing the following:

    [Start HTML] + [Item 1 HTML] + [Separator HTML] ... + [Item n HTML] + [End HTML]

    The following sections will provide examples of how this can be used for creating Outlook-style table views, and a useful paper saving template for multiple items.

    Creating Outlook Style Tables

    This section demonstrates how to use the multi item support in Blueprint to create Outlook-style tables. It will reference the template, MI_MESSAGE_TABLE_CSS.htm. Within this document, the 'BPFolderList' is used to specify the location of the table. The final output of this template, when processed by Blueprint will be a standard HTML TABLE. To achieve this, the TABLE elements are defined within the sections of the [HTML sections].

    The definitions of the [HTML sections] are:

    [Start HTML]

    This defines the TABLE start tag, and provides the description of the Table Headers (TH). For this example table, the columns will be used to display the Receive Time, From recipient, Subject, Importance and Categories.

    <TABLE class="tabular_list" cellpadding="0" cellspacing="0">
      <THEAD>
        <TH>Received Time</TH>
        <TH>From</TH>
        <TH>Subject</TH>
        <TH>Importance</TH>
        <TH>Categories</TH>
      </THEAD>
      <TBODY>

    * Note. Some elements prior to the TABLE definition have been removed to simplify this example. In the template, a number of extra <DIV> and <FORM> definitions are provided to improve the presentation of the displayed Table.

    [End HTML]

    This section ends all the tags which were defined in the [Start HTML] section

      </TBODY>
    </TABLE>

    * Note. By constructing the Blueprint templates in this way, it ensure that the HTML stored within the templates remains well formed.

    [Item HTML]

    Now the TABLE structure is set up, it now needs the contents. This is provided using the contents of the BPFolderListItem id, [Item HTML]. As previously described, the contents of this item will be repeated for each item in the Multi item selection. The Blueprint tag, BPMessProp, and associated Formatting rules can be used to provide the message specific contents. See
    Technical Reference page for further information.

    <TR>
      <TD id="BPMessProp">NAME=ReceivedTime</TD>
      <TD id="BPMessProp">NAME=From</TD>
      <TD id="BPMessProp">NAME=Subject</TD>
      <TD id="BPMessProp">NAME=Importance|POSSIBLE_VALUES=0:Low,1:Normal,2:High</TD>
      <TD id="BPMessProp">NAME=Categories</TD>
    </TR>

    [Separator HTML]

    This example does not require a separator. Therefore, this element can be ommited.

    Example preview

    When the user selects three messages within the Inbox folder, selects 'Blueprint Preview', and selects the Multi Item style table, the Preview window will display as following:

    Tip: If you are looking to add even more columns to your table, you could print out the message in Landscape. Just click the 'Page setup' button within the 'Blueprint Preview' window, and select 'Landscape'. Remember, once you have done this, Blueprint will save these settings, and use them next you print using the template.

    Using an external stylesheet (CSS) file

    In order to reduce the complexity of the HTML template file, and to separate the structure of the contents from the presentation, CSS stylesheets have been used. The stylesheet file, folderlist_styles.css is located in the Templates folder, and is referenced from the MI_MESSAGE_TABLE_CSS.htm using the following HTML located under the HEAD section:

    <link href="folderlist_styles.css" type="text/css" rel="stylesheet" />

    Note. A useful tutorial and reference guide for cascading stylesheets (CSS) is http://www.w3schools.com/css

    The Blueprint Folder tag (BPFolderProp)

    As discussed in Tutorial 1, when a user prints a message using the Memo style, all properties are tagged using the id - BPMessProp. This includes properties in Headers and Footers. For Multi Item prints, the use of the BPMessProp is not used outside of the BPFolderListItem tag, as it would not be clear which message should be used to display the properties.

    However, it is possible to add Folder based properties to the presented print. This can be achieved by using the id - BPFolderProp. This functions in the same way as the BPMessProp tag. For example, in the previous template, the following HTML was used to display the Name of the current folder:

    <span id="BPFolderProp">NAME=FolderName</span>

    This will display the name of the Folder of the Multi Item selection. For example, Inbox.

    Other Multi Item template examples

    This section will provide an overview of the other multi item template examples delivered with Blueprint for Outlook (ver 2.0 +).

    Continuous Outlook Style Print

    The template - MI_MESSAGE_CONTINUOUS.html - allows a user to select a number of messages within a folder, and print them as a continous stream of messages. Therefore, when one message finishes, the next message begins. The subject of the message is used as the title to help separate each message:

    Tip: This is a great way to save paper when the message body is short!!

    Summary

    This tutorial provided details of how to design multi item templates. It demonstrates how Blueprint for Outlook dynamically generates HTML for each item in the Multi Item selection, and provides a flexible mechanism for creating custom templates.