Template Variables Reference
This document lists all available variables that can be used in PDF templates for different document types.
Common Variables (All Documents)
| Variable | Type | Description | Example |
|---|---|---|---|
{{documentNumber}} | String | Document number/ID | "SALE-2024-001" |
{{locationName}} | String | Location/branch name | "Main Store" |
{{currency.symbol}} | String | Currency symbol | "$", "Q" |
{{currency.name}} | String | Currency name | "USD", "GTQ" |
Sale Document Variables
Basic Information
Customer Information
FEL (Electronic Tax Document) Information
Items (Array)
Totals
Payment Details (Array)
Purchase Document Variables
Basic Information
Supplier Information
Items (Array)
Totals
Payment Details
Service Booking Variables
Basic Information
Customer Information
Service Details
Vehicle Information (if applicable)
Handlebars Helpers
Date Formatting
Currency Formatting
Number Formatting
Conditional Rendering
If Statement
Unless Statement
Each Loop
With Block
Example Template Snippets
Basic Header
<div class="header">
<div class="company-name">FlowPOS</div>
<div class="location">{{locationName}}</div>
<div class="document-number">No. {{documentNumber}}</div>
<div class="date">{{formatDate saleDate "dd/MM/yyyy HH:mm"}}</div>
</div>
Customer Info Section
<div class="customer-info">
<div class="info-row">
<span class="label">Cliente:</span>
<span>{{taxName}}</span>
</div>
<div class="info-row">
<span class="label">NIT:</span>
<span>{{taxId}}</span>
</div>
{{#if taxAddress}}
<div class="info-row">
<span class="label">Dirección:</span>
<span>{{taxAddress}}</span>
</div>
{{/if}}
</div>
Items Table
<table class="items-table">
<thead>
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{{#each items}}
<tr>
<td>{{this.name}}</td>
<td>{{formatNumber this.quantity}}</td>
<td>{{formatCurrency this.unitPrice ../currency.symbol}}</td>
<td>{{formatCurrency this.amount ../currency.symbol}}</td>
</tr>
{{/each}}
</tbody>
</table>
Totals Section
<div class="totals">
<div class="total-row">
<span>Subtotal:</span>
<span>{{formatCurrency subtotal currency.symbol}}</span>
</div>
<div class="total-row">
<span>IVA:</span>
<span>{{formatCurrency tax currency.symbol}}</span>
</div>
<div class="total-row grand-total">
<span>TOTAL:</span>
<span>{{formatCurrency totalAmount currency.symbol}}</span>
</div>
</div>
Payment Methods
<div class="payment-methods">
<h3>Forma de Pago</h3>
{{#each paymentDetail}}
<div class="payment-row">
<span>{{this.paymentMethodName}}</span>
<span>{{formatCurrency this.amount this.currency.symbol}}</span>
</div>
{{/each}}
</div>
Best Practices
-
Always check for variable existence before using it:
-
Use helpers for formatting:
- Always use
formatCurrencyfor money amounts - Always use
formatDatefor dates - Use
formatNumberfor quantities
- Always use
-
Access parent scope in loops:
-
Handle missing data gracefully:
-
Use descriptive CSS classes for styling consistency
-
Test templates with various data scenarios before deployment
Embedded Media Variables
These variables are injected at render time by the backend and do not come from the document record itself.
logoDataUrl
A base64 data-URL PNG of the business logo, fetched from GCS and cache-busted with the business updatedAt timestamp.
The variable is omitted (not undefined, simply absent from the template context) when:
- The business has no
logoUrlconfigured. - The GCS fetch fails or times out (3 s hard limit).
qrDataUrl
A base64 data-URL PNG of a QR code pointing to the document's public validate page. Requires the FRONTEND_URL environment variable to be set to a valid https:// URL (or http://localhost).
| Document type | QR target URL |
|---|---|
| Quote | {FRONTEND_URL}/quotes/validate?quoteId=<uuid> |
| Sale | {FRONTEND_URL}/sales/validate?saleId=<uuid> |
| Order bill | {FRONTEND_URL}/bills/validate?billId=<uuid> |
The variable is omitted when:
FRONTEND_URLis not set or is not a validhttps://(or localhost) URL.- QR encoding fails for any reason (errors are swallowed to prevent PDF generation failures).
QR code options: errorCorrectionLevel: "M", margin: 1.