In this article
In Banana Accounting Plus (Advanced plan only) you can take an existing invoice layout, modify it and use it as a new custom layout.
A layout is an Extension that is specific for printing an invoice.
The following steps describe how to adapt to your needs the existing [CH10] Layout with Swiss QR Code and [UNI11] Layout 11 Programmable Invoice layouts.
- Choose the layout to start from
- Save the layout files
- Modify the layout
- Add your layout to the Banana Extensions
- View an invoice with the custom template
Choose the layout to start from
On GitHub you can find the following layouts:
These layouts extensions are packed into .sbaa files that include all the required files needed to run the extensions.
- CH10 Swiss layout, ch.banana.ch.invoice.ch10.sbaa:
- ch.banana.ch.invoice.ch10.js
The javascript code of the layout. - ch.banana.ch.invoice.ch10.texts.js
The javascript code of the layout texts. - ch.banana.ch.invoice.ch10.parameters.js
The javascript code of the layout parameters. - ch.banana.ch.invoice.ch10.printpreferences.js
The javascript code of the layout preferences. - invoice.css
The css stylesheet code. - swissqrcode.js
The javascript code of the QR Code part. - checkfunctions.js
The javascript code of some check functions.
- ch.banana.ch.invoice.ch10.js
- UNI11 Universal layout, ch.banana.uni.invoice.uni11.sbaa:
- ch.banana.uni.invoice.uni11.js
The javascript code of the layout. - ch.banana.uni.invoice.uni11.texts.js
The javascript code of the layout texts. - ch.banana.uni.invoice.uni11.parameters.js
The javascript code of the layout parameters. - ch.banana.uni.invoice.uni11.printpreferences.js
The javascript code of the layout preferences. - invoice.css
The css stylesheet code.
- ch.banana.uni.invoice.uni11.js
Save the layout files
Choose the layout you want to start from and download all the files included in the .sbaa package on your computer.
- Open the links above.
- Right click on the page.
- Select Save page.
All the files must be saved in the same directory.
Modify the layout
- Open the local file ch.banana.ch.invoice.ch10.js or ch.banana.uni.invoice.uni11.js with a text editor program.
- Right click on the file.
- Open with and select the text editor program.
- Change the @id with a new one.
Each new invoice layout must have a different @id text. - Change the @description with a new one.
The description will appear in the print dialog window when selecting the invoice layout. - Modify then the script as you want.
Find more information about the content of the Json Object of the invoice. - Save the file.
Add your layout to the Banana Extensions
At this point you can choose the way you want to add the layout to the Banana Extensions.
You have two options:
- Install the layout without recreating a new package.
- This can be useful if you don't need to share the layout with someone else, and also if you want to test your changes faster.
- From Banana, menu Extensions → Manage Extensions.
- Click on the button Add from file... and choose the file you just downloaded and modified (ch.banana.ch.invoice.ch10.js or ch.banana.uni.invoice.uni11.js).
- Create a new Extension Package (.sbaa file).
- This can be useful if you need to share the layout with someone else.
- Use the following manifest and QRC files and adapt them as you need:
- ch.banana.ch.invoice.ch10.manifest.json
- Open the link, right click on the page, select Save page.
- Open the file using a text editor program and change description and title.
- ch.banana.ch.invoice.ch10.qrc.
- ch.banana.ch.invoice.ch10.manifest.json
- From Banana, menu Extensions → Manage Extensions.
- Click on the button Add from file... and choose the file .sbaa you just created.
Important: Do not delete the extension file from your pc or move it to another directory after the installation, otherwise the extension will no longer work. If you want to move the extension to another directory, you must reinstall it from the new location.
View an invoice with the custom layout
- From Banana, menu Reports → Customers → Print Invoices select the layout you just added.
- Confirm with Ok to see the preview.