Dans cet article
The Banana invoice is constructed with a Javascript program. The Extension also allows you to add Javascript programming so that you can completely customize the content and format of the invoice (this functionality requires the Advanced plan).
Add your custom Javascript file
Three steps are required to define and use your CSS file:
- Add the document table to the Banana Accounting file.
If it is not already present you need to add the Documents table in the Banana document with the menu command Tools → Add new features → Add document table. - Add a new Javascript type document to the document table.
- In the ID column enter the file name including the extension .js (e.g. "myFile.js").
- In the Description column enter a comment (optional).
- In the Attachments column, double click on the cell or select the edit symbol, then select Javascript Code and confirm with OK.
- An editor will open in which you can write the code.
- Enter the appropriate Javascript code.
You can modify the content of any time.
Documents table - Javascript Code attachment
- Specify the the customized Javascript file .
- Select Settings of the Print invoices dialogue.
- In the JavaScript File → File name enter the name of the newly created Javascript file (e.g. "myFile.js").
- Click Ok to confirm.
Settings Dialogue - Javascript File Property
Empty Javascript file
This file only contains commented text, with all the available hook functions.
/**
* Hook functions.
* function hook_set_variables(variables, userParam) {}
* function hook_print_header(repDocObj, userParam, repStyleObj, invoiceObj, texts) {}
* function hook_print_info_first_page(repDocObj, invoiceObj, texts, userParam) {}
* function hook_print_info_other_pages(repDocObj, invoiceObj, texts, userParam) {}
* function hook_print_customer_address(repDocObj, invoiceObj, userParam) {}
* function hook_print_shipping_address(repDocObj, invoiceObj, texts, userParam) {}
* function hook_print_text_begin(repDocObj, invoiceObj, texts, userParam) {}
* function hook_print_details_net_amounts(banDoc, repDocObj, invoiceObj, texts, userParam, detailsTable, variables) {}
* function hook_print_details_gross_amounts(banDoc, repDocObj, invoiceObj, texts, userParam, detailsTable, variables) {}
* function hook_print_final_texts(repDocObj, invoiceObj, userParam) {}
* function hook_print_footer(repDocObj, texts, userParam) {}
* function hook_formatItemsValue(value, variables, columnName, className, item) {}
* function hook_modify_settings_qr(invoiceObj, qrcodeData) {}
*/
Javascript Hook Replacement Functions
The invoice layout i is created with a set of Javascript functions. The hook functions are Javascript replacements functions to be used instead of the the predefined.
- The name of the hook function is the name of the function used in the layout, preceded by the text "hook_".
- The parameters must be the same as those used in the main function.
- If you create your own hook function, it is necessary to know how it work the function you want to replaces.
- If you want to change the header printing you have to define a hook_print_header(repDocObj) that will replace the print_header(repDocObj) function.
- The Extension checks if there is a hook replacement function and in case it uses it to replace the default code.
- Hook functions let you selectively change some part of how the invoice is build, without directly modifying the original script of the invoice Layout.
The hook functions are as follows:
![]() |
|
hook_print_header() |
||
|
hook_print_info_first_page() and hook_print_info_other_pages() |
|||
|
hook_print_customer_address() |
|||
|
hook_print_shipping_address() |
|||
|
hook_print_text_begin() |
|||
|
hook_print_details_net_amounts() and hook_print_details_gross_amounts() |
|||
|
hook_print_final_texts() |
|||
|
hook_print_footer() Function that prints the footer. |
Call to original Javascript function
Within your hook function you can call the original hook function. This way you can limit the changes to the code.
For example this hook function call the original one, only in a specific case.
/**
* This function prints the final text only for INVOICES and not for CREDIT NOTES.
* Invoices = DocType 10
* Credit notes = DocType 12
*/
function hook_print_final_texts(sectionClassFinalTexts, invoiceObj, userParam) {
// We can check the DocType and print the text only when is not 12
if (invoiceObj.document_info.doc_type !== "12") {
print_final_texts(sectionClassFinalTexts, invoiceObj, userParam);
}
}
hook_set_variables(variables, userParam)
This function let you replace default variable. This function does not replace a function that set the predefined function, therefore you can selectively change only some variables.
// Example of hook function usage that sets
// the decimals of the Amounts columns to 4
// the font type to Times New Roman
function hook_set_variables(variables, userParam) {
variables.decimals_amounts = 4;
variables.$font_family = "Times New Roman";
}
Predefined variables
Here you can see the list of variables of the set_variables() function and how they are set.
The variables for decimals start with "decimals_". (e.g. decimals_quantity, decimals_amounts,...).
Variables for css styles start with "$" ($text_color, $font_size, ...).
/* Variable that sets the decimals of the Quantity column */
variables.decimals_quantity = "";
/* Variable that sets the decimals of the Unit Price column */
variables.decimals_unit_price = 2;
/* Variable that sets the decimals of the Amount column */
variables.decimals_amounts = 2;
/* Variables that set the colors */
variables.$text_color = userParam.text_color;
variables.$background_color_details_header = userParam.background_color_details_header;
variables.$text_color_details_header = userParam.text_color_details_header;
variables.$background_color_alternate_lines = userParam.background_color_alternate_lines;
/* Variables that set the font */
variables.$font_family = userParam.font_family;
variables.$font_size = userParam.font_size+"pt";
/* Variables that set the font size and margins of the Invoice Begin Text */
variables.$font_size_title = userParam.font_size*1.4 +"pt";
/* Variables that set font size, margins, padding and borders of the Invoice Details */
variables.$font_size_header = userParam.font_size*1.2 +"pt";
variables.$font_size_total = userParam.font_size*1.2 +"pt";