PDF Template
Supista ERP provides robust support for custom PDF templates, enabling users to dynamically generate downloadable PDFs populated with ERP data. These templates are especially useful for creating:
- Invoices
- Reports
- Certificates
- Letters
- Tickets
- Custom printables
Use {{...}} to inject dynamic values into your PDF.
Use {{#each}}, {{#if}}, and other helpers to loop, conditionally render, or display structured data.
Looping Over an Array
<ul>
{{#each teamMembers}}
<li>{{this.name}} - {{this.role}}</li>
{{/each}}
</ul>Conditional Display
{{#if isActive}}
<p>Status: Active</p>
{{else}}
<p>Status: Inactive</p>
{{/if}}Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invoice</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8f8f8;
display: flex;
justify-content: center;
padding: 30px;
}
.invoice-container {
width: 100%;
max-width: 900px;
background-color: #ffffff;
box-shadow: 0 0 15px rgba(0,0,0,0.08);
border-radius: 8px;
overflow: hidden;
}
.invoice-header {
background-color: #e0f2f7;
padding: 25px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.invoice-header h1 {
font-size: 2.8em;
font-weight: 700;
}
.invoice-logo-circle {
width: 80px;
height: 80px;
background-color: #a0aec0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.invoice-details {
padding: 30px 40px;
display: flex;
justify-content: space-between;
}
.invoice-items {
padding: 0 40px 30px 40px;
}
.invoice-items table {
width: 100%;
border-collapse: collapse;
}
.invoice-items th {
background-color: #34495e;
color: white;
padding: 12px;
}
.invoice-items td {
padding: 12px;
}
.invoice-notes-terms {
padding: 20px 40px;
}
.invoice-footer {
background-color: #34495e;
padding: 15px 40px;
}
</style>
</head>
<body>
<div class="invoice-container">
<div class="invoice-header">
<h1>INVOICE</h1>
<div class="invoice-logo-circle">
LOGO
</div>
</div>
<div class="invoice-details">
<div>
<h3>Your Company Name</h3>
<p>[Street address]</p>
<p>[City, State]</p>
<p>[Country]</p>
<p>[Postal]</p>
</div>
<div>
<h3>INVOICE TO:</h3>
<p>Company Name</p>
<p>[Street address]</p>
<p>[City, State]</p>
<p>[Country]</p>
<p>[Postal]</p>
</div>
<div>
<p>Invoice Number: <strong>#0001</strong></p>
<p>Date of Invoice: <strong>2021-01-17</strong></p>
<p>Due Date: <strong>2021-01-17</strong></p>
</div>
</div>
<div class="invoice-items">
<table>
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{{#each row.data}}
<tr>
<td>{{row.Description}}</td>
<td>{{row.Qty}}</td>
<td>{{row.[Unit Price]}}</td>
<td>{{row.Total}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="invoice-notes-terms">
<h3>NOTES:</h3>
<p>
Please make payment within 14 days of the invoice date.
Thank you for your business!
</p>
<br/>
<h3>TERMS AND CONDITIONS:</h3>
<p>
Payment is due upon receipt.
Late payments may incur a penalty fee.
All services rendered are subject to our standard terms.
</p>
</div>
<div class="invoice-footer">
</div>
</div>
</body>
</html>Example Input
{
"row": {
"Description": "consultation fee",
"Qty": 1,
"Unit Price": 500.00,
"Total": 500.00
},
"assets": {}
}Example Output
Last updated on