I have customized invoice template and named it but now the custom fields are not displayed on invoice.
Help?
You probably started your customized view template using the example that appears when you click New View Template. If so, you must understand that is only an example. It is not the HTML code used to generate a sales invoice. In fact, standard sales invoices are not generated from HTML code any longer.
Many features, including things like OVERDUE stamps and amounts credited, do not show on the example. So unless you code everything you want yourself, you will get only a barely functional sales invoice that does not incorporate many aspects of the standard one. What does show, however, will be correct. But it will be very limited compared to the standard.
That’s because you are doing customized HTML template. You need to decide where and how to show those fields using variables.
If you don’t know HTML, then don’t bother with custom HTML template. And stick to default one.
Thank you
Hello Lubos,
Can I get the exact code of the default template so that I can tweak a little, like font size and color.
Thanks
Default template is not written in HTML. It’s too complex at this point.
There is simpler HTML template you can use instead:
<table style="width: 100%">
<thead>
<tr>
<td style="font-size: 36px; font-weight: bold; vertical-align: top; line-height: 36px">INVOICE</td>
<td style="text-align: right">{% if business.logo != empty %}<img src="{{ business.logo }}" style="max-width: 300px; max-height: 150px">{% endif %}</td>
</tr>
<tr>
<td colspan="2" style="padding: 20px 0px">
<table style="width: 100%">
<tr>
<td style="vertical-align: top; font-weight: bold; width: 1px; white-space: nowrap; padding-right: 10px">
To
</td>
<td style="vertical-align: top">
<div>{{ customer.name }}</div>
<div>{{ billing_address | newline_to_br }}</div>
<div>{{ customer.identifier }}</div>
</td>
<td style="vertical-align: top; width: 100px; padding-right: 20px; vertical-align: top; text-align: right">
<div style="font-weight: bold">Issue date</div>
<div>{{ issue_date | date_to_string }}</div>
{% if due_date != null %}
<div style="font-weight: bold; margin-top: 10px">Due date</div>
<div>{{ due_date | date_to_string }}</div>
{% endif %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Invoice number</div>
<div>{{ reference }}</div>
{% if sales_quote != empty %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Sales quote</div>
<div>{{ sales_quote }}</div>
{% endif %}
{% if purchase_order != empty %}
<div style="font-weight: bold; margin-top: 10px; white-space: nowrap">Purchase order</div>
<div>{{ purchase_order }}</div>
{% endif %}
</td>
<td style="vertical-align: top; width: 100px; border-left: 1px solid #000; padding-left: 20px; vertical-align: top">
<div style="font-weight: bold; white-space: nowrap">{{ business.name }}</div>
<div style="white-space: nowrap">{{ business.contact_information | newline_to_br }}</div>
<div style="white-space: nowrap">{{ business.identifier }}</div>
</td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div style="font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</div>
<table style="width: 100%">
<tr>
<th style="border: 1px solid #000; padding: 5px 10px">Item</th>
<th style="border: 1px solid #000; padding: 5px 10px">Description</th>
<th style="width: 40px; border: 1px solid #000; padding: 5px 10px; text-align: center">Qty</th>
<th style="width: 80px; border: 1px solid #000; padding: 5px 10px; text-align: center">Unit price</th>
<th style="width: 60px; border: 1px solid #000; padding: 5px 10px; text-align: center">Discount</th>
<th style="width: 100px; border: 1px solid #000; padding: 5px 10px; text-align: center">Amount</th>
</tr>
{% for line in lines %}
<tr>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; vertical-align: top">{{ line.item.name }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none">{{ line.description | newline_to_br }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.qty }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: right; vertical-align: top">{{ line.unit_price | money_without_currency }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; border-bottom: none; border-top: none; text-align: center; vertical-align: top">{{ line.discount }}</td>
<td style="border: 1px solid #000; padding: 5px 10px; text-align: right; border-bottom: none; border-top: none; vertical-align: top; white-space: nowrap">{{ line.total | money_without_currency }}</td>
</tr>
{% endfor %}
<tr>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
<td style="border: 1px solid #000; padding: 5px 10px; border-top: none"> </td>
</tr>
{% if amounts_include_tax %}
{% if rounding != 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
</tr>
{% endif %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
</tr>
{% for tax_component in tax_components %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
</tr>
{% endfor %}
{% else %}
{% assign tax_components_count = tax_components | size %}
{% if tax_components_count > 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Subtotal</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ subtotal | money }}</td>
</tr>
{% endif %}
{% for tax_component in tax_components %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">{{ tax_component.code }}</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ tax_component.amount | money }}</td>
</tr>
{% endfor %}
{% if rounding != 0 %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px">Round off</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; white-space: nowrap">{{ rounding | money }}</td>
</tr>
{% endif %}
<tr>
<td colspan="5" style="text-align: right; padding: 5px 10px; font-weight: bold">Total</td>
<td style="border: 1px solid #000; text-align: right; padding: 5px 10px; font-weight: bold; white-space: nowrap">{{ total | money }}</td>
</tr>
{% endif %}
</table>
<div>{{ notes | newline_to_br }}</div>
</td>
</tr>
</tbody>
</table>
1 Like
@neo, be aware that the HTML template @lubos just gave you does not have all the same functionality as the built-in sales invoice.
Thanks a lot for a quick reply but this one is same as available in the application. Some fields are permanently there like discount even if there isn’t any discount in my invoice. I don’t even get the “Paid” stamp if I use this template. I just want to do few changes in the default invoice.
Thanks
Unless you know HTML, stick with default template.
Why do you want to customize default template? What’s missing?
This is exactly what I meant, @neo. Your “few changes” are not possible unless you completely recode the template. If you search this forum, you will find many topics related to this.
it’s not like something is missing, the invoice works great. I do know basics of HTML and just want to change it’s design, the functionality in the default template is awesome, I just want to redesign the layout and make it little colorful.
Thanks
I’m planning to support HTML injecting. This means you will be able to inject custom HTML or CSS into existing views. And that will be much easier than creating new HTML template from scratch.
1 Like
Yes, things are missing. For example, a partially paid invoice will not show the amount credited and remaining balance due. And Paid in Full and Overdue stamps will not appear.
Not at the present time.
Yeah that’s all I need to change the view of existing views. Hope you will develop it soon… Amen… Best of luck more power to you.
Thanks
Thats a very very good idea. Do you have any idea when this function would be available. All I want to do is change the size of fonts and the background colour of the header row basically. So minimal changes. However using the templates is unworkable because it doesn’t support newer features as mentioned and also things like item name is showing on invoice instead of item code like default invoice.