Advanced AdvoDoc Template Features

Updated on Feb 27, 2022

AdvoDoc templates use HTML and CSS to format the resulting document. This allows template designers the ability to customize document output beyond the format options provided in the designer's toolbar. CSS properties can be used to creatively format elements of the document.

Fine tuning the document format is accomplished via the Source button found in the AdvoDoc Template Designer's toolbar.

1. Page Headers and Footers

The following example can be added to the AdvoDoc template to create document page headings and footings.

1.1. Define the Header and Footer Design Layout

1.1.1. For PDF Output Format

Due to a platform limitation, the HTML to render the header and footer must be placed at the top of the editor code in the Template Editor source for an AdvoDoc Template set to generate PDF output. If this is placed anywhere else within the editor source, then the header and footer won't repeat on the generated pages in the output document but will appear only on the last page of the document.

<div class="header">
    <center>
        <h1>Page Header Title</h1>
    </center>
</div>
<div class="footer">
    <div>
        <div class="subfooter">{!$System.Today}</div>
        <div class="subfooter right">Page <span class="pagenumber">&nbsp;</span> of <span class="pagecount">&nbsp;</span></div>
    </div>
</div>

1.1.2. For DOCX Output Format

<style type="text/css">
    p.MsoHeader, li.MsoHeader, div.MsoHeader {
        margin: 0in;
        margin-top: 0.0001pt;
        mso-pagination: widow-orphan;
        tab-stops: center 3in right 6in;
    }
    p.MsoFooter, li.MsoFooter, div.MsoFooter {
        margin: 0in;
        margin-bottom: 0.0001pt;
        mso-pagination: widow-orphan;
        tab-stops: center 3in right 6in;
    }
    @page Section1 {
        size: 8.5in 11in;
        margin: 0.5in 0.5in 0.5in 0.5in;
        mso-header-margin: 0.5in;
        mso-footer: f1;
        mso-footer-margin: 0.5in;
        mso-paper-source: 0;
    }
    div.Section1 {
        page: Section1;
    }
    table#hrdftrtbl {
        margin: 0in 0in 0in 9in;
    }
</style>
<div class="Section1">
    <table border="1" cellpadding="0" cellspacing="0" id="hrdftrtbl">
        <tbody>
            <tr>
                <td>
                    <div id="f1" style="mso-element: footer;">
                        <p class="MsoFooter">&nbsp;</p>
                        <table border="1" cellpadding="0" cellspacing="0" width="100%">
                            <tbody>
                                <tr>
                                    <td width="30%">
                                        Left Footer
                                    </td>
                                    <td align="center" width="40%">
                                        Center Footer
                                    </td>
                                    <td align="right" width="30%">Page <span style="mso-field-code: PAGE;">&nbsp;</span>&nbsp;of&nbsp;<span style="mso-field-code: NUMPAGES;">&nbsp;</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

1.2. Optionally Customize the Format of the Heading and Footing

<style type="text/css">
  @page {
    @top-center {content: element(header);}
    @bottom-left {content: element(footer);}
  }
  .centered {text-align: center;}
  div.header {padding: 5px; position: running(header);}
  div.footer {padding: 5px; position: running(footer);}
  .pagenumber:before {content: counter(page);}
  .pagecount:before {content: counter(pages);}
  div.subfooter {display: inline-block;}
  div.right {float: right;}
</style>

2. Customizing List Data

Both the heading and data cells may be custom formatted for a variety of use cases.

2.1. Creating Two Rows for Each Record

<table border="0" cellpadding="4" cellspacing="0" class="relTableDefault" style="width:100%;" width="100%">
    <tbody>
        <tr>
            <th style="border-bottom:1px solid #000;">Date</th>
            <th style="border-bottom:1px solid #000;">Timekeeper</th>
            <th style="border-bottom:1px solid #000;">Status</th>
            <th style="border-bottom:1px solid #000;">Rate</th>
            <th style="border-bottom:1px solid #000;">Time</th>
            <th style="border-bottom:1px solid #000;">Total</th>
        </tr>
    </tbody>
    <tbody id="tableData">
        <tr>
            <td>{@advpm__Entry_Date__c}</td>
            <td>{@advpm__Timekeeper__c}</td>
            <td>{@advpm__Billing_Status__c}</td>
            <td>{@advpm__Rate__c}</td>
            <td>{@advpm__Time_In_Hours__c}</td>
            <td>{@advpm__Total_Amount__c}</td>
        </tr>
        <tr>
            <td colspan="6">{@advpm__Description__c}</td>
        </tr>
    </tbody>
</table>

3. Other Examples

A wide array of formatting options are available using a variety of HTML and CSS techniques.

3.1. To Convert a Field to Uppercase

 <span style="text-transform:uppercase;">{!advpm__Matter__c.Name}</span>

3.2. To Capitalize the First Letter of a Text Value

 <span style="text-transform:capitalize;">{!advpm__Matter__c.Name}</span>

Previous Article The AdvoDoc Template Designer

Next Article How do I create a new document with AdvoDoc?

AdvoLogix Help