Custom Invoice Templates
A custom invoice template is an HTML document with some special placeholders that get filled in with the generated data. Using Klok you can generate a basic one. From there you can open your template file and modify the HTML as needed to get the look you want. Once you have a template, you must save it to the correct location.
- Windows XP:
- C:\Documents and Settings\[User Name]\Application Data\Klok2.DD7F2188B985C2439837C76B42A187050457E61B.1\Local Store\invoice templates
- Windows Vista\7:
- C:\Users\[User Name]\AppData\Roaming\Klok2.DD7F2188B985C2439837C76B42A187050457E61B.1\Local Store\invoice templates
- Mac OSX:
- user/Library/Preferences/Klok2.DD7F2188B985C2439837C76B42A187050457E61B.1/Local Store/invoice templates
(In Lion, the Library folder is hidden. To view it. Open Finder. Then hold down the Option key while clicking the “Go” menu. When the dropdown menu appears, the “Library” item will be visible. See http://www.macworld.com/article/1161156/view_library_folder_in_lion.html) - Linux (Ubuntu):
- ~/.appdata/Klok2.DD7F2188B985C2439837C76B42A187050457E61B.1/Local Store/invoice templates
The global placeholders available in the template are as follows.
| Variable | Description |
|---|---|
| {{date}} | The current date |
| {{to}} | The name of the recipient |
| {{to_contact_email}} | The recipient's email address |
| {{to_contact_phone}} | The recipient's phone number |
| {{description}} | This will be replaced by "Invoice for services tendered between [invoice start date] and [invoice end date]" |
| {{invoice_number}} | The invoice number |
| {{grand_total}} | The total invoiced amount. This is calculated based on the hours and the hourly rates specified for billable projects. |
| {{amount_paid}} | This will always be 0 |
| {{amount_due}} | The total invoiced amount. This is calculated based on the hours and the hourly rates specified for billable projects. |
| {{due_date}} | The date by which the invoice should be paid |
| {{thanks}} | A thank you message |
If you want to itemize your invoice with a line item per project, you can create a section of items by using some special tags as follows.
| Variable | Description |
|---|---|
| {{$row}} | This isn't technically a placeholder. Instead this indicates that the content between it and the next ${{row}} should be repeated for each line item. You must have exactly two of these. |
| {{description}} | The name of the project |
| {{quantity}} | The number of hours |
| {{unit_cost}} | The hourly rate for this project |
| {{amount}} | The hourly rate multiplied by the number of hours |
Below is a very simple example of a template. You would typically want to add some CSS for formatting.
<html>
<body>
<p>
TO:
{{to}}<br />
{{to_contact_email}}<br />
{{to_contact_phone}}
</p>
<p>
<b>Invoice Date:</b><br />
{{date}}<br/>
<b>Invoice Number:</b><br />
{{invoice_number}}<br/>
</p>
<p>{{description}}</p>
<table id="lineItems">
<tr><th>Description</th> <th>Quantity</th> <th>Unit Cost</th> <th>Amount</th> </tr>
<tbody id="main">
{{$row}}
<tr><td>{{description}}</td><td>{{quantity}}</td><td>{{unit_cost}}</td><td>{{amount}}</td></tr>
{{$row}}
</tbody>
<tr ><td colspan="2"> </td><td>Total</td><td>{{grand_total}}</td></tr>
<tr ><td colspan="2"> </td><td>Paid</td><td>{{amount_paid}}</td></tr>
<tr ><td colspan="2"> </td><td>Due</td><td>{{amount_due}}</td></tr>
</table>
<p>Due date: {{due_date}}</p>
<p>
{{thanks}}
</p>
</body>
</html>