Invoice customisation with JavaScript

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:

1. 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.
2. Add a new Javascript type document to the document table.
   1. In the ID column enter the file name including the extension .js (e.g. "myFile.js").
   2. In the Description column enter a comment (optional).
   3. In the Attachments column, double click on the cell or select the edit symbol, then select Javascript Code and confirm with OK.
   4. An editor will open in which you can write the code.
   5. Enter the appropriate Javascript code.
      You can modify the content of any time.
      
      
      Documents table - Javascript Code attachment
       
3. Specify the the customized Javascript file .
   1. Select Settings of the Print invoices dialogue.
   2. In the JavaScript File → File name  enter the name of the newly created Javascript file (e.g. "myFile.js").
   3. 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() Function that prints the header part of the invoice (logo and texts).
				hook_print_info_first_page() and hook_print_info_other_pages() Functions that print the information parts of the invoice.
				hook_print_customer_address() Function that prints the customer address part of the invoice.
				hook_print_shipping_address() Function that prints the shipping address part of the invoice (in case it exists).
				hook_print_text_begin() Function that prints the title and begin text parts of the invoice.
				hook_print_details_net_amounts() and hook_print_details_gross_amounts() Functions that print the invoice details using net/gross amounts. Use the hook_formatItemsValue() function to change the format and style of the items.
				hook_print_final_texts() Function that prints the final texts, notes and greetings parts of the invoice.
				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";