Invoice template editor

Template editor

Edytor formatek faktur w mKsięgowej umożliwia dodawanie nowych, usuwanie lub edycję istniejących formatek. Przygotowanie formatki wymaga znajomości HTML i CSS.

Dodane przez Użytkownika formatki faktur są widoczne jedynie w Jego programie.

W Ustawieniach programu można wybrać formatkę, która jest używana do wydruku faktury.

Add new template

  • Go to Setup -> Company setup -> Invoice templates
  • Click on template editor
  • Select simple.twig in the upper right corner which provides an example template

In order to add a new template:

  • Add a unique name for the template, then click the "Create" button
  • Add HTML code in the "HTML" tab and CSS code in the "CSS" tab
  • Each code change requires saving the changes by clicking the "Update" button

HTML Code

The editor accepts most tags by HTML standard with the exception of: head, body, style, script

Those do not need to be added to the template code.

The editor allows you to inject company data into the HTML code, which are available in the panel on the right side of the screen:

HTML element with company logo:

<img src = "data: image / {{company.logo.format}}; base64, {{company.logo.base64}}" />
An element with a selected document value, e.g .:
sales invoice date: <td class = "value"> {{invoice.issueDate}} </td>
sales invoice number: <td class = "value"> {{invoice.reference}} </td>
An element with a selected value of the company's or contractor's data, for example:
Contractor name: <td class = "value"> {{company.name}} </td>
Selected functions that enable dynamic adding of elements in a document template:
Add value: {{value}}
conditionally adding the value: {% if customer.vat%} VAT No {{customer.vat}} {% endif%}
Number formatting: {{invoice.vatTotal | number_format (2, '.', '')}}
Value loop:
{% for item in invoice.lines%}
 
<tr class = "border">
 
<td> {{loop.index}} </td>
 
<td> {{item.net | number_format (2, '.', '')}} </td>
 
</tr>
 
{% endfor%}

CSS code

In order to style the template, add the appropriate CSS code in the CSS tab based on the classes and attributes of the added HTML objects

.

Print Preview

At each stage of work, it is possible to view the edited invoice template by:

  • Save changes to the template code
  • Clicking on the HTML or PDF tab in the right section of the screen (document preview).