Include files, styles and images in your extension

Documentação •
Neste artigo

You can create extensions that use external files. In this page we explain how to use an external css file in order to print the report. With this you can avoid to use javascript to set the style attributes.

As with Javascript, CSS is also limited to the attributes listed on the page Banana.Report.ReportStyle.

What do you need:

  • The extension script (file .js).
  • The CSS stylesheet (file .css).
  • Create a package (file .sbaa)

Extension script (file .js)

In your extension javascript file:



var textCSS = "";
var file = Banana.IO.getLocalFile("file:script/yourFile.css");
var fileContent = file.read();
if (!file.errorString) {
  Banana.IO.openPath(fileContent);
  textCSS = fileContent;
} else {
  Banana.console.log(file.errorString);
}

// New stylesheet
var stylesheet = Banana.Report.newStyleSheet();

// Parse the CSS text
stylesheet.parse(textCSS);

 

CSS stylesheet (file .css)

In your css stylesheet file:

  • Insert the text following the CSS specification.


@page {
  margin-top: 10mm;
  margin-bottom: 10mm;
  margin-left: 20mm;
  margin-right: 10mm;
}
body {
  font-family: Helvetica;
  font-size: 10pt;
}
table {
  font-size: 8px;
  width: 100%;
}
table.table td {
  border-top-style: solid;
  border-top-color: black;
  border-top-width: thin;
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: thin;
  border-left-style: solid;
  border-left-color: black;
  border-left-width: thin;
  border-right-style: solid;
  border-right-color: black;
  border-right-width: thin;
}
.column1 {
  width: 73%;
}
.column2 {
  width: 13%;
}
.column3 {
  width: 13%;
}
.table-header {
  color: #ffffff;
  background-color: #337ab7;
  font-weight: bold;
  text-align: right;
}
.amount-totals {
  background-color: #F0F8FF;
  text-align: right;
  font-weight: bold;
}

 

Extension package (file .sbaa)

Now generate the Extension Package file (.sbaa) containing:

  • The javascript file.
  • The CSS file.

To do that:

  • Create the manifest file (.json) in the same directory of the javascript and css files.
    {
        "category": "productivity",
        "country":"switzerland",
        "countryCode":"ch",
        "description": "Extension with css",
        "description.en": "Extension with css",
        "language":"en",
        "publisher": "Banana.ch",
        "title": "Extension with css",
        "title.en": "Extension with css",
        "version": "1.0"
    }
  • Create the Qrc resource file (.qrc) in the same directory of the javascript and css files.
     
    <!DOCTYPE RCC><RCC version="1.0">
    <qresource>
         <file>yourJavascriptFile.js</file>
         <file>yourCssFile.css</file>
         <file>manifest.json</file>
    </qresource>
    </RCC>
  • Open Banana Accounting
  • Drag the .qrc file in Banana Accounting.
  • It will ask you if you want to compile the file and will generate a .sbaa file.

 

Define CSS file in Documents table

You can write the css code directly in the documents table and access the data via javascript as shown in the example


/**
    CSS file defined in Documents table.
  */
  if (userParam.embedded_css_filename) {
    var cssFiles = [];
    var documentsTable = Banana.document.table("Documents");
    if (documentsTable) {
      for (var i = 0; i < documentsTable.rowCount; i++) {
        var tRow = documentsTable.row(i);
        var id = tRow.value("RowId");
        if (id === userParam.embedded_css_filename) {
          // The CSS file name entered by user exists on documents table: use it as CSS
          textCSS += documentsTAble.findRowByValue("RowId",userParam.embedded_css_filename).value("Attachments");       
        }
      }
      // Parse the CSS text
      repStyleObj.parse(textCSS);
    }
  }

 

 

Tell us how we can help you better
If the information on this page is not what you're looking for, is not clear enough, or is not up-to-date, let us know.

Share this article: Twitter | Facebook | LinkedIn | Email