PDF Templates
To create a new template simply click the "New Template" option.
To delete a template simply click the "Delete Template" option.
To swap to another template use the drop down menu and select the template you wish to edit.
"Template name" allows you to name the template, this name will be shown in any of the drop down menus referring to templates. In the Data Table the PDF will have the name mentioned as well so you can easily see which template you're going to click on.
The 'Preview' section allows you to view a live preview of your code. This is updated automatically as you change your template. Note that the preview may vary slightly from the final version, always press the "Show Test PDF" button when you are finished to double check.
This is a HTML5 feature and isn't available in older browsers, please keep this in mind, as such Internet Explorer 10 and 11 still have problems with automatically loading the data into the preview when the page loads. However simply start typing in the code box and the preview will be generated and work normally.
The "Quote Template HTML" section is where the entire PDF template is constructed. Here you can use any HTML 4 or CSS 2.1 properties.
The templates show a basis of how to structure the PDF in a few different methods.
If you wish to have/change a page number on each page you simply use the css styles relating to "@page @bottom" to vary the content.
You can use as many different css classes as you want or inline styles, and you're be able to use external stylesheets too (keeping in mind some browsers will only allow https references of external https sites).
To start looping through the content stored in the database for the quote you must use specific HTML comments to Start and End the looped content. NOTE: If a corresponding Start or End comment is missing for a section it will not generate the expected PDF. However if both Start and End comments for a section aren't included that section will be skipped over.
The loop-able content sections are as follows:
-
Problems
- Using:
<!-- Start Problem Section -->
and
<!-- End Problem Section --> -
- Solutions
- Using:
<!-- Start Solution Section -->
and
<!-- End Solution Section --> -
- Materials
- Using:
<!-- Start Materials Section -->
and
<!-- End Materials Section --> -
- Reference Images
- Using:
<!-- Start Reference Images Section -->
and
<!-- End Reference Images Section --> -
The sections must be Ended in reverse order of being opened. So for example you wanted a standard Problem, solution, price model you would do something similar to the following:
<!-- Start Problem Section -->
<h1>Problem #problemCounter</h1>
#problemPhoto
<br />
#problemDescription
<!-- Start Solution Section -->
<h1>Solution #solutionCounter</h1>
#solutionPhoto
<br />
#solutionDescription
<h3>Cost Breakdown:</h3>
<table>
<tr>
<td style="width:5%;">
</td>
<td style="width:90%;">
<table cellspacing="0">
<tr>
<th>Qty</th>
<th></th>
<th>Item/Service</th>
<th>Cost</th>
<th>Hours</th>
</tr>
<!-- Start Materials Section -->
<tr>
<td style="width:40px;">#amount</td>
<td style="width:20px;">x</td>
<td style="width:375px;">#itemName</td>
<td style="width:80px;">#subtotal</td>
<td style="width:65px;">#hours</td>
</tr>
<!-- End Materials Section -->
</table>
</td>
<td style="width:5%;">
</td>
</tr>
</table>
#additionalInfo
<div>
The total estimated cost of this solution is #totalCost, and will take an estimated #totalHours in order to complete the solution outlined above.
</div>
<!-- End Solution Section -->
<!-- End Problem Section -->
As you can see from the above code block, first the Problem is started with a few details about it. Then the solution loop is started which details both it and the first row in the materials table. Finally the materials loop is opened which loops through all materials required for the solution placing them in seperate rows of a table.
After the materials block is finished there is a "End Materials Section" comment to simply say don't use anything below this point in the loop for materials. Allowing you to close off open HTML tags for the solutions section, before closing off the solution loop with it's end comment tag. This works the same for problems as well.
The Reference Images comment tags however don't work this way, between the Start and End comments for Reference Images there should be no HTML or CSS, this is because the images are already given HTML and headings as they are designed as an appendix. What goes in this section is which images to use (based off the image variables)/which order to show them.
"Group Images by" sets how the Images template should be handled:
- "Problem" orders the images based on their problem.
- "Category" groups the images as all the Problem images, all the Solution Images, all the Item Images and displays them group together.
Any text/HTML outside of the looped sections is only displayed once. This allows you to write introductions and conclusions to your quotes.
On the right side of the HTML section is a list of variables that can be clicked on and will be placed where ever you are typing. These variables all contain a # at the start, and will be turned into the actual data stored when generating a PDF. The variables are broken down into the sections they can be used in:
- Generic: anywhere within the template.
- Problem: anywhere within the problem loop
- Solution: anywhere within the solution loop
- Materials: anywhere within the materials loop
- Image: anywhere within the images loop
The PDF automatically creates new pages when needed. However you can force a new page to be made anywhere by using the #newPage variable. Using this variable within multiple looped sections will space the content out quite a lot, so use it in moderation.