Banana.Report
The class Banana.Report enables you to create reports, preview, print and export to pdf or other formats.
Introduction
The report logic is similar to the HTML / CSS logic:
- Create a Report object .
- A report contains a list of ReportElements (paragraphs, texts, tables and other)
- The element can contain other sub-elements
- For each element you can add a class that is used for rendering the element
- Create a StyleSheet using the Banana.Report.newStyleSheet() function.
- Add syle elements to the stylesheet.
- A stylesheet is composed of StyleElements.
- You preview and print a report by passing the Report and the Stylesheet object.
// Example "Hello World" report
// Create a report object
var report = Banana.Report.newReport("Report title");
report.addParagraph("Hello World !!!", "styleHelloWorld");
// Create stylesheet object
var stylesheet = Banana.Report.newStyleSheet();
// Add style elements to the stylesheet object
var style = stylesheet.addStyle(".styleHelloWorld");
style.setAttribute("font-size", "96pt");
style.setAttribute("text-align", "center");
style.setAttribute("margin-top", "50mm");
var style2 = stylesheet.addStyle("@page");
style2.setAttribute("size", "landscape");
// Print preview using the report and the stylesheet
Banana.Report.preview(report, stylesheet);
Report structure
Each report sturcture has:
- A Report Element list.
- A Header Element list.
- A Footer Element list.
Methods
logoFormat(name)
Returns the logo format with 'name'. The returned object is of type Banana.Report.ReportLogo.
Returns null if no logo format with name 'name' exists.
Logo formats are defined through the dialog File → Logo Setup .
var headerLogoSection = report.addSection("");
var logoFormat = Banana.Report.logoFormat("Logo");
if (logoFormat) {
var logoElement = logoFormat.createDocNode(headerLogoSection, reportStyle, "logo");
report.getHeader().addChild(logoElement);
}
Since: Banana Accounting 9.0.4
logoFormatsNames()
Returns a list with the logo formats names.
Logo formats are defined through the dialog File → Logo Setup .
var logoNames = Banana.Report.logoFormatsNames();
// returns ["logo", "first_page_logo", "invoice_logo", ...]
Since: Banana Accounting 9.0.4
newReport(title)
Creates a report with title 'title'. The returned object is of type Banana.Report.ReportElement.
To the report you can then add the desired elements, like paragraphs, texts, tables, and so on that construct the structure of the report.
var report = Banana.Report.newReport("Report title");
newStyleSheet()
Creates an empty stylesheet. The returned object is of type Banana.Report.ReportStyleSheet.
To the stylesheet you can add the styles that format the report.
var stylesheet = Banana.Report.newStyleSheet();
newStyleSheet(fileName)
Creates a stylesheet from a file. The file has the same syntax as CSS stylesheets. The file path is relative to the script's path. The path can't contain a '..'' (parent directory).
The returned object is of type Banana.Report.ReportStyleSheet.
You can add further styles to the returned stylesheet.
var reportStyles = Banana.Report.newStyleSheet("styles.css");
*** Content of file styles.css ***
.helloWorldStyle
{
font-size: 96pt;
text-align: center;
margin-top: 50mm;
}
@page
{
size: landscape;
}
*** End of file styles.css ***
preview(report, stylesheet)
Opens a print preview Dialog and shows the report with the given stylesheet.
The param report is an object of type Banana.Report.ReportElement. The param stylesheet is an object of type Banana.Report.ReportStyle.
The page orientation is given by the stylesheet. The default size and orientation is taken from the default printer, or can be set through the stylesheet.
// Set landscape orientation
stylesheet.addStyle("@page {size: landscape}");
// Set page size and orientation
stylesheet.addStyle("@page {size: A5 lanscape}");
// Displays the report
Banana.Report.preview(report, stylesheet);
preview(title, reports, stylesheets)
Opens a print preview Dialog with title 'title' and shows the reports with the given stylesheets. This method allows you to print two or more distinct reports together.
The param report is an array of objects of type Banana.Report.ReportElement. The param stylesheet is an array of objects Banana.Report.ReportStylesheet.
Each report's title will appear in the index of the printed pdf. The numbering of pages will restart from 1 at the beginning of each printed report.
The page orientation is given by the stylesheet. The default size and orientation is taken from the default printer, or can be set through the stylesheet.
var docs = [];
var styles = [];
// Report
for (var i = 0; i < 10; i++) {
var report = Banana.Report.newReport("Report title");
report.addParagraph("Hello World #" + i + " !!!", "styleHelloWorld");
report.setTitle("Document " + i); // The report's title will appear in the pdf's index
report.getFooter().addFieldPageNr();
docs.push(report);
// Styles
var stylesheet = Banana.Report.newStyleSheet();
var style = stylesheet.addStyle(".styleHelloWorld");
style.setAttribute("font-size", "24pt");
style.setAttribute("text-align", "center");
style.setAttribute("margin-top", "10mm");
var style2 = stylesheet.addStyle("@page");
style2.setAttribute("size", "landscape");
styles.push(stylesheet);
}
// Print preview of 10 documents together
Banana.Report.preview("Multi documents printing example", docs, styles);
Since Banana Accounting 9.0.4
qrCodeImage(text, qrCodeParam)
Creates a QRCode image according to the passed text. The returned object is a svg image.
- qrCodParam.errorCorrectionLevel
string value H (high), L (low), M (medium), Q (quartile) (default value M) - qrCodeParam.binaryCodingVersion
int value from 0 to 40 (default value 40) - qrCodeParam.border
int value from 0 to 100 (default value 0) - qrCodeParam.errorMsg
in case of error the method returns the error message in this property
since: Banana Accounting+
var text = 'hello world';
var qrCodeParam = {};
qrCodeParam.errorCorrectionLevel = 'M';
qrCodeParam.binaryCodingVersion = 25;
qrCodeParam.border = 0;
var qrCodeSvgImage = Banana.Report.qrCodeImage(text, qrCodeParam);
if (qrCodeParam.errorMsg && qrCodeParam.errorMsg.length>0) {
Banana.document.addMessage(qrCodeParam.errorMsg);
}
if (qrCodeSvgImage) {
var repDocObj = Banana.Report.newReport('Printing QRCode img');
repDocObj.addImage(qrCodeSvgImage, 'qrcode');
}
setFirstPageNumber(pageNr)
The passed argument pageNr will be used by the method Banana.Report.ReportElement.addFieldPageNr as first page number.
Example: Hello world
// Simple test script using Banana.Report
//
// @id = ch.banana.script.report.helloworld
// @api = 1.0
// @pubdate = 2017-01-02
// @publisher = Banana.ch SA
// @description = Report Hello world
// @task = app.command
// @doctype = *
// @inputdatasource = none
// @timeout = -1
//
function exec(string) {
// Create the report
var report = Banana.Report.newReport("Report title");
// Add a paragraph to the report
report.addParagraph("Hello World !!!", "helloWorldStyle");
// Define some styles
var stylesheet = Banana.Report.newStyleSheet();
var style = stylesheet.addStyle(".helloWorldStyle");
style.setAttribute("font-size", "96pt");
style.setAttribute("text-align", "center");
style.setAttribute("margin-top", "50mm");
var style2 = stylesheet.addStyle("@page");
style2.setAttribute("size", "landscape");
// Open Preview
Banana.Report.preview(report, stylesheet);
}
An example with tables, page breaks and differents styles
Result
Script
// Test script using Banana.Report
//
// @id = ch.banana.script.report.report
// @api = 1.0
// @pubdate = 2017-01-02
// @publisher = Banana.ch SA
// @description = Test report api
// @task = app.command
// @doctype = *
// @outputformat = none
// @inputdatasource = none
// @timeout = -1
//
function exec(string) {
// Report
var report = Banana.Report.newReport("Report title");
var pageHeader = report.getHeader()
pageHeader.addClass("header");
pageHeader.addText("Page header");
report.getFooter().addFieldPageNr();
var watermark = report.getWatermark();
watermark.addParagraph("Sample built with Script Report API");
report.addParagraph("Report title", "titleStyle");
report.addParagraph("1. Text", "chapterStyle").setOutline(1);
report.addParagraph("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do " +
"eiusmod tempor incididunt ut labore et dolore magna aliqua. " +
"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " +
"ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit " +
"esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
"proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
var paragraph2 = report.addParagraph();
paragraph2.addText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ");
paragraph2.addText("eiusmod tempor incididunt ut labore et dolore magna aliqua. ", "blueStyle");
paragraph2.addText("Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ", "boldStlyle");
paragraph2.addText("ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit ", "underlineStyle boldStyle");
paragraph2.addText("esse cillum dolore eu fugiat nulla pariatur.");
paragraph2.addLineBreak();
paragraph2.addText("Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "italicStyle");
report.addParagraph("2. Table", "chapterStyle").setOutline(1);
var table = report.addTable();
table.getCaption().addText("Table caption");
var tableHeader = table.getHeader();
var tableHeaderRow = tableHeader.addRow();
tableHeaderRow.addCell("Description", "", 2);
tableHeaderRow.addCell("Income");
tableHeaderRow.addCell("Expense");
tableHeaderRow.addCell("Balance");
var tableRow = table.addRow();
tableRow.addCell();
tableRow.addCell("Initial balance");
tableRow.addCell();
tableRow.addCell();
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("157.00")).addClass("balanceStyle");
var tableRow = table.addRow();
tableRow.addCell(Banana.Converter.toLocaleDateFormat("2014-02-11"));
tableRow.addCell("Transfer from post office account");
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("500.00"));
tableRow.addCell();
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("657.00")).addClass("balanceStyle");
var tableRow = table.addRow();
tableRow.addCell(Banana.Converter.toLocaleDateFormat("2014-02-20"));
tableRow.addCell("Various payments");
tableRow.addCell();
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("7250.00"));
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("-6593.00")).addClass("balanceStyle negativeStyle");
var tableRow = table.addRow("totalrowStyle");
tableRow.addCell();
tableRow.addCell("Total transactions");
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("500.00"));
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("7250.00"));
tableRow.addCell(Banana.Converter.toLocaleNumberFormat("-6593.00")).addClass("balanceStyle negativeStyle");
report.addParagraph("3. Bookmarks and links", "chapterStyle").setOutline(1);
report.addParagraph("3.1 Internal links", "chapter2Style").setOutline(2);
report.addParagraph("-> link to bookmark on page 2").setLink("bookmarkpage2");
report.addParagraph("3.2 External links", "chapter2Style").setOutline(2);
report.addParagraph("-> link to Banana.ch web page").setUrlLink("http://www.banana.ch");
report.addPageBreak();
var chapter4 = report.addParagraph("4. Pages", "chapterStyle");
chapter4.setOutline(1);
report.addParagraph("Bookmark on page 2").setBookmark("bookmarkpage2");
// Styles
var docStyles = Banana.Report.newStyleSheet();
var pageStyle = docStyles.addStyle("@page");
pageStyle.setAttribute("margin", "20mm 20mm 20mm 20mm");
var headerStyle = docStyles.addStyle("phead");
headerStyle.setAttribute("padding-bottom", "1em");
headerStyle.setAttribute("margin-bottom", "1em");
headerStyle.setAttribute("border-bottom", "solid black 1px");
var footerStyle = docStyles.addStyle("pfoot");
footerStyle.setAttribute("text-align", "right");
var paragraphStyle = docStyles.addStyle("p");
paragraphStyle.setAttribute("margin-top", "0.5em");
var captionStyle = docStyles.addStyle("caption");
captionStyle.setAttribute("margin-top", "1em");
var titleStyle = docStyles.addStyle(".titleStyle");
titleStyle.setAttribute("font-size", "24");
titleStyle.setAttribute("text-align", "center");
titleStyle.setAttribute("margin-bottom", "1.2em");
docStyles.addStyle(".chapterStyle", "font-size:16; margin-top:2em; margin-bottom:0.2em");
docStyles.addStyle(".chapter2Style", "font-size:12; margin-top:1.4em; margin-bottom:0.2em");
var tableStyle = docStyles.addStyle("table");
tableStyle.setAttribute("border", "2px solid red");
docStyles.addStyle("td", "border: 1px dashed black; padding: 2px;");
var tableColStyle = docStyles.addStyle(".balanceStyle");
tableColStyle.setAttribute("background-color", "#E0EFF6");
tableColStyle.setAttribute("text-align", "right");
var totalRowStyle = docStyles.addStyle(".totalrowStyle");
totalRowStyle.setAttribute("font-weight", "bold");
var totalBalanceStyle = docStyles.addStyle(".totalrowStyle td.balanceStyle");
totalBalanceStyle.setAttribute("text-decoration", "double-underline");
docStyles.addStyle(".blueStyle", "color:blue");
docStyles.addStyle(".underlineStyle", "text-decoration:underline;");
docStyles.addStyle(".italicStyle", "font-style:italic;");
docStyles.addStyle(".boldStyle", "font-weight:bold");
// Open Preview
Banana.Report.preview(report, docStyles);
}
Banana.Report.ReportElement
The class Banana.Report.ReportElement represents the report itself and every element in the report, such as sections, paragraphs, tables, texts and the report itself.
Once you create a new report through the method Banana.Report.newReport() you can start adding sections, paragraphs, texts, tables and so on.
When you add an element with one of the add methods, you get as return value an object of type
Elements as a container of other elements
Banana.Report.ReportElement that represents the added element.
To this object you can add further elements and by this way construct the structure of the report.
Report
+ Paragraph
+ Table
+ Row
+ Cell
+ Cell
+ Row
+ Cell
+ Cell
...
Even if this interface allows you to add tables to text elements or columns to paragraphs, the result will be undefined.
Formatting text size, text color, margins, and so on are set separately through a Banana.Report.ReportStyleSheet object.
Methods
addAttachment(name, content)
Add an attachment to the document.
- The param name defines the name of the attachment inclusive extention (.png, .pdf, .xml) that will appear in print preview attachment's list on in the printed pdf.
- The param content contains the path to the file to attach or the data to attach.
- The path can be relative to the script's folder, the document's folder, the name of a document attacched to the file or a data uri scheme (for images imbedded in the document).
- file:script/<relative_path_to_script_folder>/<image_name>
- file:document/<relative_path_to_file_folder>/<image_name>
- documents:<document_name>
- data:[<media type>][;charset=<character set>][;base64],<data>
Example:
//Create the report
var report = Banana.Report.newReport('Report attachments');
//Add a paragraph with some text
report.addParagraph('Report with attachments');
//Attach file on computer path relative to the accounting file
report.addAttachment('doc1.pdf', 'doc1.pdf');
report.addAttachment('doc2.pdf', 'documents/doc2.pdf');
//Attach text files created on the fly
//We use the prefix 'data:...' to tell that the string is not an url but is itself the content of the file
report.addAttachment('text file 1.txt', 'data:text/plain;utf8,This is the content of the text file 1.');
report.addAttachment('text file 2.txt', 'data:text/plain;utf8,This is the content of the text file 2.');
report.addAttachment('text file 3.txt', 'data:text/plain;utf8,This is the content of the text file 3.');
//Attach an image stored in the document table
//We use the prefix 'document:...'
report.addAttachment('logo.jpg', 'documents:logo');
//Add an xml element
//We just add the new created Banana.Xml.newDocument
var xmlDocument = Banana.Xml.newDocument("eCH-0217:VATDeclaration");
var rootNode = xmlDocument.addElement("eCH-0217:VATDeclaration");
rootNode.addElement("title").addTextNode("Vat Declaration 2018");
report.addAttachment('vat_declaration.xml', xmlDocument);
//Print the report
var stylesheet = Banana.Report.newStyleSheet();
Banana.Report.preview(report, stylesheet);
Since Banana Accounting 9.0.4
addClass(classes)
Add classes to the node. A class binds the element to the corresponding class style definend in Banana.Report.ReportStyleSheet as used in CSS Stylesheets.
var report = Banana.Report.newReport("Report title");
report.addParagraph("1250.00").addClass("balanceStyle");
addDocInfo(name, value [, description])
addDocInfo(name, value [, description])
Add document's informations to the document. When you generate multiple documents from your script and want to export them as separated pdfs, document's informations are used by the application to build meaningful file names for the exported pdf files, like "Invoice 1234 - Joe Black.pdf". The document's information "name" contains the default file name used by the application. The user when creating the pdf files, can choose to use the default "name", or combine freely the other document's informations for the file names.
For the following names, the application add a default description. For other names, like "doc_status", you can add your own description.
name
doc_title
doc_number
doc_date
doc_amount
doc_currency
customer_number
customer_name
customer_city
customer_email
account
cur_date
cur_time
You can add document's informations only to a document object.
report.addDocInfo("name", "Invoice 1234 - Joe Black.pdf");
report.addDocInfo("doc_title", "Invoice 1234");
report.addDocInfo("doc_number", "1234");
report.addDocInfo("customer_name", "Joe Black");
report.addDocInfo("doc_amount", "1023.00");
report.addDocInfo("doc_status", "paid", "Document status");
addSection([classes])
addSection([classes])
Add a section and return the created section as a Banana.Report.ReportElement object.
You can add sections only to sections, cells, captions, headers or footers.
var report = Banana.Report.newReport("Report title");
//Add a section with a style
var section = report.addSection("sectionStyle");
section.addParagraph("First paragraph");
section.addParagraph("Second paragraph");
addParagraph([text, classes])
addParagraph([text, classes])
Add a paragraph and return the created paragraph as a Banana.Report.ReportElement object.
You can add paragraphs only to sections, cells, captions, headers or footers.
var report = Banana.Report.newReport("Report title");
//Add an empty paragraph
report.addParagraph(" ");
//Add a paragraph with a text
report.addParagraph("Hello World !!!");
//Add a paragraph with a text and a style
report.addParagraph("Hello World !!!", "styleHelloWorld");
addHeader1..6([text])
addHeader1..6([text])
The methods addHeader1 to addHeader6 add an header and return the created header as a Banana.Report.ReportElement object. The corresponding outline from 1 to 6is set automatically.
You can add headers only to sections, and documents.
var report = Banana.Report.newReport("Report title");
//Add headers
report.addHeader1("Header 1");
report.addHeader2("Header 1.2");
report.addParagraph("Some text.");
report.addHeader1("Header 2");
report.addHeader2("Header 2.1");
report.addParagraph("Some text.");
report.addHeader2("Header 2.2");
report.addParagraph("Some text.");
addText(text [, classes])
addText(text [, classes])
Add a text node and return the created text node as a Banana.Report.ReportElement object.
You can add texts only to sections, paragraphs, cells, captions, headers or footers.
var report = Banana.Report.newReport("Report title");
//Add a text
report.addText("Hello world !!!");
//Add a text with a style
report.addText("Hello world !!!", "styleHelloWorld");
addStructuredText(text, format, [, stylesheet])
addStructuredText(text, format, [, stylesheet])
Add a structured text to the document.
Supported formats are
'md'
Structured github markdown.'html'
'text'
The function returns the new section containing the structured text as a Banana.Report.ReportElement object.
You can add structured text only to sections, paragraphs, cells, captions, headers or footers.
Example for Markdown text
Example for Markdown text
// Report
var report = Banana.Report.newReport("Report title");
// Styles
var stylesheet = Banana.Report.newStyleSheet();
// Add Markdown text
let mdText = "# Header 1\n";
mdText += "## Header 2\n";
mdText += "### Header 3\n";
mdText += "Markdown text with **bold** and *italic*. \n";
mdText += "[Markdown link](https://www.banana.ch) \n";
mdText += "* List row 1\n";
mdText += "* List row 2\n";
mdText += "* List row 3\n";
report.addStructuredText(mdText, "md");
// Print preview
Banana.Report.preview(report, stylesheet);
Example for simple Html text
Example for simple Html text
// Report
var report = Banana.Report.newReport("Report title");
// Styles
var stylesheet = Banana.Report.newStyleSheet();
// Add html text
let htmlText = "<h1 style=\"color: red\">Header 1 Red</h1>\n";
htmlText += "<p style=\"color: blue\">Paragraph blue</p>\n";
report.addStructuredText(htmlText, "html");
//Print preview
Banana.Report.preview(report, stylesheet);
Example for full Html text
Example for full Html text
If you add a full html (with head and style element), you should pass a stylesheet parameter. The styles defined in the html style element are added to the report stylesheet. If not the styles defined in the html style element are lost, and like in this example the paragraphs are not coloured with red and blue.
// Report
var report = Banana.Report.newReport("Report title");
// Styles
var stylesheet = Banana.Report.newStyleSheet();
// Add html text
let htmlText = "<html>\n";
htmlText += "<head>\n";
htmlText += "<style>\n";
htmlText += "p.blue {color: blue;}\n";
htmlText += ".red {color: red;}\n";
htmlText += "</style>\n";
htmlText += "</head>\n";
htmlText += "<body>\n";
htmlText += "<h1 class=\"red\">Header 1 Red</h1>\n";
htmlText += "<p class=\"blue\">Paragraph blue</p>\n";
htmlText += "</body>\n";
htmlText += "</html>\n";
report.addStructuredText(htmlText, "html", stylesheet);
//Print preview
Banana.Report.preview(report, stylesheet);
Example for Plain text
Example for Plain text
// Report
var report = Banana.Report.newReport("Report title");
// Styles
var stylesheet = Banana.Report.newStyleSheet();
// Plain Text
let plainText = "Testo riga 1\n";
plainText += "Testo riga 2\n";
plainText += "Testo riga 3\n";
// Add plain text
report.addStructuredText(plainText, "text");
// Print preview
Banana.Report.preview(report, stylesheet);
addTable([classes])
addTable([classes])
Add a table and return the created table as a Banana.Report.ReportElement object.
You can add tables only to the report or sections.
var report = Banana.Report.newReport("Report title");
var myTable = report.addTable("myTable");
addColumn([classes])
addColumn([classes])
Add a column and return the created column as a Banana.Report.ReportElement object.
You can add columns only to tables.
var column1 = myTable.addColumn("column1");
var column2 = myTable.addColumn("column2");
var column3 = myTable.addColumn("column3");
addRow([classes])
addRow([classes])
Add a row and return the created row as a Banana.Report.ReportElement object.
You can add rows only to tables, table headers or table footers.
var tableRow = myTable.addRow();
...
addCell([span])
addCell([span])
Add an empty cell and return the created cell as a Banana.Report.ReportElement object.
You can add cells only to rows. You can span cells over columns but not over rows.
tableRow.addCell(); //span empty cell over 1 column (default value)
tableRow.addCell("", 3); //span empty cell over 3 columns
...
addCell(text [,classes, span])
addCell(text [,classes, span])
Add a cell to the node and return the created cell as a Banana.Report.ReportElement object.
You can add cells only to rows.You can span cells over columns but not over rows.
tableRow.addCell("Bank", "firstCellStyle", 3); //span cell over 3 columns
tableRow.addCell("1200.65", "secondCellStyle, 1); //span cell over 1 column
...
addLineBreak()
addLineBreak()
Add a line break and return the created line break as a Banana.Report.ReportElement object.
You can add line breaks only to paragraphs or cells.
// Add a line break to a paragraph
var p = report.addParagraph(" ");
p.addLineBreak();
// Add a line break to a cell
var c = tableRow.addCell();
c.addLineBreak();
addPageBreak()
addPageBreak()
Add a page break node and return the created page beak as a Banana.Report.ReportElement object.
You can add page breaks only to the report or sections.
var report = Banana.Report.newReport("Report title");
...
report.addPageBreak();
...
addImage(path [,classes])
addImage(path [,classes])
Add an image and return the created image as a Banana.Report.ReportElement object. Supported formats are:
png
jpg
svg
The path can be relative to the script's folder, the document's folder, the name of a document attacched to the file or a data uri scheme (for images imbedded in the document).
- file:script/<relative_path_to_script_folder>/<image_name>
- file:document/<relative_path_to_file_folder>/<image_name>
- documents:<document_name>
- data:[<media type>][;charset=<character set>][;base64],<data>
You can add images only to sections, paragraphs, cells, captions, headers or footers.
The parameter path can be absolute or relative to the script path.
var report = Banana.Report.newReport("Report title");
// Add an image located in the script folder
report.addImage("file:script/logo_abc.jpg");
// Add an image located in the dcoument folder
report.addImage("file:document/logo_mnp.jpg");
// Add an image saved in the table documents
report.addImage("documents:logo_xyz.jpg");
// Add an image (a red dot) included in the document
report.addImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==");
// Add a SVG base64 image
report.addImage("data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==");
addImage(path, widht, height [,classes])
addImage(path, widht, height [,classes])
Overloaded method to add an image and return the created image as a Banana.Report.ReportElement object.
The parameters width and height have the same syntax as css length values. They can be absolute (ex.: "30px", "3cm", ... ) or relative (ex.: "50%", "3em", ...).
var report = Banana.Report.newReport("Report title");
report.addImage("documents:image_logo", "3cm", "5cm");
addFieldPageNr([classes])
addFieldPageNr([classes])
Add a field containg the page number and return the created field as a Banana.Report.ReportElement object.
You can add this field only to sections, paragraphs, cells, captions, headers or footers.
var report = Banana.Report.newReport("Report title");
...
// Add the page number to the paragraph
report.addParagraph("Page ").addFieldPageNr();
// Add a page number to the footer
var footer = report.getFooter();
footer.addText("Page ");
footer.addFieldPageNr();
excludeFromTest()
excludeFromTest()
Mark the field to not be tested during a test case. The value is in any case outputed to the test results, it is just ignored during the comparison of the test results.
This is useful, for example, for text fields containing the current date.
var currentDate = Banana.Converter.toLocaleDateFormat(new Date());
var textfield = report.getFooter().addText(currentDate);
textfield.excludeFromTest();
getWatermark()
getWatermark()
Return the watermark element.
Only the report has a watermak element.
var watermark = report.getWatermark();
watermark.addParagraph("Watermark text");
getHeader()
getHeader()
Return the header of the element.
Only tables and the report have an header element.
var report = Banana.Report.newReport("Report title");
//Report
var reportHeader = report.getHeader();
reportHeader.addClass("header");
reportHeader.addText("Header text");
//Table
var table = report.addTable("myTable");
var tableHeader = table.getHeader();
tableRow = tableHeader.addRow();
tableRow.addCell("Description");
tableRow.addCell("Amount");
getFooter()
getFooter()
Return the footer of the element.
Only tables and the report have a footer element.
//Report
var footer = report.getFooter();
footer.addText("Footer text");
getCaption()
getCaption()
Return the caption of the element.
Only tables have a caption element.
var table = report.addTable("MyTable");
var caption = table.getCaption();
caption.addText("Table caption text", "captionStyle");
getChildren()
getChildren()
Return the children of the element as an array.
var report = Banana.Report.newReport("Report title");
let section = report.addSection();
section.addParagraph("some text 1");
section.addParagraph("some text 2");
let count = section.getChildren().length; // count == 2
This method was introduced in BananaPlus 10.0.12.151.
getParent()
getParent()
Return the parent of the element, or null if the element is the root element.
var report = Banana.Report.newReport("Report title");
let section = report.addSection();
let paragraph = section.addParagraph("some text");
let root = paragraph.getRoot(); // root == report
This method was introduced in BananaPlus 10.0.12.151.
getRoot()
getRoot()
Return the root element.
var report = Banana.Report.newReport("Report title");
let section = report.addSection();
let paragraph = section.addParagraph("some text");
let parent = paragraph.getParent(); // root == paragraph
This method was introduced in BananaPlus 10.0.12.151.
getTag()
getTag()
Return the tag of the element, like 'body', 'p', 'table', 'td' and so on.
var report = Banana.Report.newReport("Report title");
...
report.getTag(); // returns 'body'
footer.getTag(); // returns 'pfoot'
...
getTitle()
getTitle()
Return the title of the element.
Only a document element have a title.
var report = Banana.Report.newReport("My Report Title");
var title = report.getTitle(); // return 'My Report Title'
setOutline(level)
setOutline(level)
Set the outline level, this is used to create the index when exporting to pdf.
report.addParagraph("1. Text").setOutline(1);
setBookmark(bookmark)
setBookmark(bookmark)
Set a bookmark (or anchor), this is used in conjunction with setLink().
report.addParagraph("Bookmark on page 2").setBookmark("bookmarkpage2");
setLink(bookmark)
setLink(bookmark)
Set a link to a bookmark. See setBookmark().
report.addParagraph("-> link to bookmark on page 2").setLink("bookmarkpage2");
setPageBreakBefore()
setPageBreakBefore()
Set to insert a page break before the element.
// Insert a page break before a paragraph
report.addParagraph("Hello world!!!").setPageBreakBefore();
// Insert a page break before a table
/* first create a table then... */
myTable.setPageBreakBefore();
setSize(width, height)
setSize(width, height)
Set the size of the element.
The parameters width and height have the same syntax as css length values. They can be absolute (ex.: "30px", "3cm", ... ) or relative (ex.: "50%", "3em", ...).
You can only set the size of an image element.
var image = report.addImage("C:/Documents/Images/img.jpg");
image.setSize("3cm", "6cm");
setStyleAttribute(attr_name, attr_value)
setStyleAttribute(attr_name, attr_value)
Set a style attribute to the element. Attributes ids and values follow the CSS specification. This attibute correspont to the inline styles in Css.
paragraph.setAttribute("font-size", "24pt");
setStyleAttributes(attributes)
setStyleAttributes(attributes)
Set style attributes to the element. Attributes ids and values follow the CSS specification. Those attributes correspond to the inline styles in Css.
paragraph.setAttribute("font-size:24pt;font-weight:bold;");
setTitle(title)
setTitle(title)
Set the title of the element.
Title can be only set to a document element.
document.setTitle("Annual report");
setUrlLink(link)
setUrlLink(link)
Set a link to an external file (file://...) or a web page (http://....).
To the element the class "link" is automatically added.
report.addParagraph("Link to Banana.ch web page").setUrlLink("http://www.banana.ch");
Banana.Report.ReportLogo
The class Banana.Report.ReportLogo represents the format of a logo's section.
With a Banana.Report.ReportLogo object you can create and insert a logo's section in the report document. The logo format is defined through the dialog File → Logo Setup.
With this class you don't have to rewrite your scripts to change the logo's section, you can just change the format in the dialog Logo Setup, and the script will apply the new format automatically.
Methods
createDocNode(textNode, stylesheet, disambiguosClass)
Create a new Report Element that represent the logo's section as defined in the dialog File → Logo Setup.
The param textNode is the text node to insert within in the logo section.
The param stylesheet is the stylesheet where the styles needed by the logo section are inserted.
The param disambiguosClass is a string used to prevent clashes with stylesheet class names.
// Get the logo format
var headerLogoSection = report.addSection("");
var logoFormat = Banana.Report.logoFormat("Logo");
if (logoFormat) {
// Use the format as defined in the dialog File --> Logo Setup
var logoElement = logoFormat.createDocNode(headerLogoSection, repStyleObj, "logo");
report.getHeader().addChild(logoElement); }
else {
// If the format 'logo' is not defined, insert an image
report.addImage("documents:logo", "logoStyle");
}
Banana.Report.ReportStyleSheet
The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
It contains multiple Banana.Report.ReportStyle objects.
Create a report stylesheet
A report stylesheet object is created using the function Banana.Report.newStylesheet().
// Create a new stylesheet for the report
var stylesheet = Banana.Report.newStyleSheet();
Page size and orientation
At this moment the report is rendered based on the page size defined in the default printer device.
You can't define a page size, but you can set the orientation with the Style @page.
Page orientation can't be set only once per report, you can't switch from potrait to landscape.
var stylesheet = Banana.Report.newStyleSheet();
stylesheet.addStyle("@page").setAttribute("size", "landscape");
Methods
addStyle(selector)
Create a new style with the given selector. The return object is of type Banana.Report.ReportStyle.
The syntax of selector follows the CSS specification.
- Style name without a preceding dot are reserved predefined tags like "td", "p", "table",... ( e.g. 'addStyle("td")' )
- Style name for a new custom class need a preceding dot "." ( e.g. 'addStyle(".myStyle")' )
The dot name is not used when adding the class name to the element
report.addParagraph("Text to print 24pt", "myStyle");
var style = stylesheet.addStyle(".myStyle");
myStyle.setAttribute("font-size", "24pt");
myStyle.setAttribute("text-align", "center");
report.addCell("Text to print");
var styleTd = stylesheet.addStyle("td");
styleTd.setAttribute("font-weight", "bold");
addStyle(selector, attributes)
Create a new style with the given selector and attributes. The return object is of type Banana.Report.ReportStyle.
The syntax of selector and attributes follow the CSS specification.
var style2 = stylesheet.addStyle(".style2", "font.size: 24pt; text-align: center");
parse(text)
Load the styles from the given text. The text follow the CSS specification.
stylesheet.parse(
"p.style1 {font-size:24pt; text-align:center;}" +
"@page {size:A4 landscape;}"
);
See the How to use CSS file tutorial example.
The selector
The selector follows the css syntax.
Example of selectors:
- .xyz
Select all elements with class xyz. It is used with a preceding dot "." before the class name.
When you set the class to a ReportElement you enter the name without "." - table
Select all tables - table.xyz
Select all tables with class xyz - table.xyz td
Select all cells in tables with class xyz
Example of tag selectors:- @page
Select the page - body
Select the content of the report - phead
Select the page header - pfoot
Select the page footer - div
Select the section - p
Select the paragraph - table
Select the table - caption
Select the caption - thead
Select the table header - tbody
Select the table body - tfoot
Select the table footer - tr
Select the table row - td
Select the table cell
You can get the tag of an element through the method getTag();
Function for adding styles
When you have multiple styles it would be helpful to add a function for all the styles you need. For example:
function exec() {
// Create a new report object with the title "Report title"
var report = Banana.Report.newReport("Report title");
// Add example text for each style in the report
report.addParagraph("Hello World", "title"); // Example text for title style
report.addParagraph("Subtitle Example", "subtitle"); // Example text for subtitle style
report.addParagraph("Header Example", "header"); // Example text for header style
report.addParagraph("Data Example", "data"); // Example text for data style
report.addParagraph("Centered Text Example", "centerAlign"); // Example text for center alignment
report.addParagraph("Right-Aligned Text Example", "rightAlign"); // Example text for right alignment
report.addParagraph("Footer Example", "footer"); // Example text for footer style
// Create a new stylesheet object for the report
var stylesheet = Banana.Report.newStyleSheet();
// Call the function to define and apply styles to the stylesheet
addStyles(stylesheet);
// Display the report in a preview window with the applied stylesheet
Banana.Report.preview(report, stylesheet);
}
// Function that defines all the CSS styles for the report elements
function addStyles(stylesheet) {
// Style for headers: bold font and a bottom border
stylesheet.addStyle(".header", "font-weight: bold; border-bottom: 1px solid black;");
// Style for data cells: padding and a light bottom border
stylesheet.addStyle(".data", "padding: 5px; border-bottom: 0.5px solid #ddd;");
// Style to center-align text
stylesheet.addStyle(".centerAlign", "text-align: center");
// Style to right-align text
stylesheet.addStyle(".rightAlign", "text-align: right");
// Style for the main title: larger font, bold, centered, with top margin
stylesheet.addStyle(".title", "font-size: 16px; font-weight: bold; text-align: center; margin-top: 20px;");
// Style for subtitles: smaller font, centered, with bottom margin
stylesheet.addStyle(".subtitle", "font-size: 10px; text-align: center; margin-bottom: 20px;");
// Style for the footer: small font, centered, with top margin
stylesheet.addStyle(".footer", "text-align: center; font-size: 8px; margin-top: 20px;");
}
Banana.Report.ReportStyle
The class Banana.Report.ReportStyle represents a single style in Banana.ReportStyleSheet object.
It is used to set the style attributes.
Methods
setAttribute(attr_name, attr_value)
Set the attribute value. Attributes' ids and values follow the CSS specification.
style.setAttribute("font-size", "24pt");
setAttributes(attributes)
Set attributes values. Attributes' ids and values follow the CSS specification.
style.setAttributes("font-size:24pt;font-weight:bold;");
Supported properties
font
font-family
font-size
font-style
font-weight
margin [top, right, bottom, left]
margin-top
margin-bottom
margin-left
margin-right
padding
padding-top
padding-bottom
padding-left
padding-right
hanging-ident
text-align
text-decoration
text-ellipsis
vertical-align
color
background-color
border
border-top
border-top-style
border-top-color
border-top-width
border-bottom
border-bottom-style
border-bottom-color
border-bottom-width
border-left
border-left-style
border-left-color
border-left-width
border-right
border-right-style
border-right-color
border-right-width
display
overflow
float
text-wrap
width
max-width
min-width
height
page-break-after
column-break-after
line-break-after
page-break-before
column-break-before
line-break-before
page-break-inside
line-break-inside
size
position
left
top
right
bottom
transform
Supported transformations are: matrix, translateX, translateY, translate, rotate, scaleX, scaleY, scale, skewX, skewY and skew
transformOrigin
orphans
fill-empty-area
Non standard attributes and values
width-sym
This attribute contains a string. Columns with the same width-sym will be laid out with the same width.
layout-sym
This attribute is a string. Tables with the same layout-sym attribute will have the same layout for the width of the columns.
overflow
This attribute has the non standard value "shrink". The content of the node will be down scaled to fit given space.
style.setAttribute("overflow", "shrink");
overflow-shrink-max
This attibute set the maximal down scaling factor (like 0.6).
style.setAttribute("overflow-shrink-max", "0.6");
text-decoration
This attribute can also contain the values "double-underline" or "double-strong-underline".
style.setAttribute("text-decoration", "underline");
border-style
This attribute can also contain the values "double" and "double-strong".
style.setAttribute("border-style", "double");
flexible-width
This attribute can contain the value "always" and is only used with columns. If, in a table, one or more columns have the attribute "flexible-widht", only those columns are enlarged to get the desired table width, untouching the others. Otherwise all columns are enlarged.
fill-empty-area
With this attribute you can fill the remaing space of your page with lines. Lines can be defined through the attribute, which is a string and contains the color, the style and the width of the line.
Style can be: solid, dash or dot.
Examples:
var style1 = stylesheet.addStyle("@page", "black solid 1");
var style2 = stylesheet.addStyle("@page", "green dash 0.5");
Report FAQ
How can I set the orientation of the page and the margins
// Set landscape orientation
styleSheet.addStyle("@page", "size: landscape");
// Page margins top, right, bottom, left
styleSheet.addStyle("@page", "margin: 20mm 20mm 20mm 25mm");
How can I set the size of the page
// Set page size
styleSheet.addStyle("@page", "size: A5");
How can I set the margins of page header and footer
styleSheet.addStyle("phead", "margin-bottom:2em");
styleSheet.addStyle("pfoot", "margin-top:2em");
How can I print the page number on the right of the page footer
document.getFooter().addFieldPageNr("alignright");
stylesheet.addStyle("pfoot", "text-align:right");
Can I print the total number of pages
No
I like a style implemented in a report of Banana Accounting, where can I get the used stylesheet?
In print preview export the report as html and look at the code. You will find the used styles.