Retail:Developers Guide/How-to/How to create jrxml templates

Contents 1 How to create jrxml templates 1.1 Call Hardware Manager to populate the jrxml file 1.2 Retrieve data in iReport 1.2.1 Create the subreport inside iReport 1.2.2 Add a logo to the report 1.3 Add a barcode to the report

How to create jrxml templates

In this howto we explain how to create jrxml templates in order to print PDF reports in Openbravo Web POS.

The main difference between the jrxml templates used in Openbravo ERP and the ones used in Web POS is the datasource. In Openbravo ERP, most of them use a connection against the database and an sql query to extract data. However, in Web POS, all data comes from a json object created in the client side that is passed to the backend, and in this case to the jrxml file. There is no connection against the database.

The first step is to set up iReport tool that is going to be used to implement the templates.

Once iReport is ready to be used the next step is to learn how to pass needed data to iReport. This is done calling a service hosted in the hardware manager that populates the jrxml file.

This section is only needed if the Template Type to be created is new, not one that overwrittes one of the existing defaults.

Call Hardware Manager to populate the jrxml file

This is the javascript request that needs to be implemented:

 
OB.POS.hwserver._printPDF({
      order: receipt.serializeToJSON(),
      mainReport: mainReport,
      subReports: subReports
    }, function (result) {
      var otherMe = me;
      var myreceipt = receipt;
      if (result && result.exception) {
        OB.UTIL.showConfirmation.display(OB.I18N.getLabel('OBPOS_MsgHardwareServerNotAvailable'), OB.I18N.getLabel('OBPOS_MsgPrintAgain'), [{
          label: OB.I18N.getLabel('OBMOBC_LblOk'),
          action: function () {
            var otherOtherMe = otherMe;
            otherOtherMe.print();
            return true;
          }
        }, {
          label: OB.I18N.getLabel('OBMOBC_LblCancel')
        }]);
      }
    });

There are three parameters that needs to be included in the request:

• order: a json object containing all the information that is needed in the template. Commonly the order object that is created in the Web POS that goes later to the backend.
• mainReport: an OB.DS.HWResource object created pointing to the desired template defined in POS Print Template window. This object needs to have the following attributes in addition to the ones by default (resource and resourcedata):
  • printer: the printer defined in the template.
  • dateFormat: the date format of the Organization.
• subReports: an array of OB.DS.HWResource objects created pointing to all subreports templates defined in POS Print Template window.

Once the request is implemented, the next step is to get this data in iReport.

Retrieve data in iReport

This is an example of a json object that could passed as a parameter:

{

 "order": {
   "id": "AACEA22C9200ED627D2F4AA5F499188F",
   "client": "39363B0921BB4293B48383844325E84C",
   "organization": "3B187EC130A549A7A9388F8060EF156D",
   "createdBy": "100",
   "updatedBy": "100",
   "documentType": "044E078A49CB4B1192B849462ACB4624",
   "posTerminal": "5F413EBD3A6042C28708821D43C91D0B",
   "posTerminal$_identifier": "CMS POS Terminal",
   "orderDate": "2014-02-19T15:38:05.080Z",
   "documentNo": "CMS1/0000120",
   "bp": {
     "id": "9C211C965971481CA91FC948CBC83076",
     "organization": "3B187EC130A549A7A9388F8060EF156D",
     "searchKey": "CMS/C0001",
     "_identifier": "CMS Customer",
     "name": "CMS Customer"
    },
    "lines": [
      {
       "product": {
         "id": "934E7D7587EC4C7A9E9FF58F0382D450",
         "searchkey": "WVG/M0019",
         "uPCEAN": null,
         "uOM": "100",
         "uOMsymbol": "Ud "
       },
       "qty": 1,
       "price": 0,
       "priceList": 150.5,
       "gross": 182.11
      }
    ],
    "payments": [
      {
       "amount": 182.11,
       "origAmount": 182.11,
       "paid": 182.11,
       "date": "2014-02-19T15:41:16.472Z",
       "kind": "OBPOS_payment.card",
       "name": "Card",
       "rate": "1",
       "mulrate": "1",
       "isocode": "EUR",
       "allowOpenDrawer": true,
       "isCash": false,
       "openDrawer": false
      }
    ]
 }

}

To have a better vision of the object use the following link to format it: http://www.jsoneditoronline.org/

Analyzing the order json object, is possible to identify three type of objects that they compose it:

• a single property (i.e. "documentNo").
• a json object (i.e. "bp").
• a json array (i.e. "lines"). Json array inside json array not implemented yet.

The single properties and properties inside json objects are accessed in iReport as fields. Json Array objects are accessed as subreports parameters.

Look at an example of getting properties:

• single property: name of the property uppercase, i.e. "documentNo" -> DOCUMENTNO
• property inside json object: name of the json object concatenated to the name of the property with a dot in between, uppercase, i.e. the "_identifier" of "bp" -> BP._IDENTIFIER

Look at an example of getting subreport parameter:

• json array: SUBREP_ concatenated to the name of the array, .i.e. "lines" -> SUBREP_LINES

At this point the next step is to create the subreports.

Create the subreport inside iReport

The following rules must be satisfied:

• The SUBREP_PROPERTY parameter needs to be of net.sf.jasperreports.engine.JRDataSource type.
• The SUBREPORT object:
  • Subreport Expression: Name of the jrxml file compiled, i.e. "SUBREP_LINES.jasper".
  • Expression class: java.lang.String.
  • Connection type: Use a datasourse expression.
  • Data Source Expression: The subreport parameter, i.e. $P{SUBREP_LINES}

Once this is done, inside the subreport, the way to access the fields is the same as the main report.

Name of the subreport concatenated to name of the property, i.e. in "lines" report the "gross" property -> LINES.GROSS

Add a logo to the report

There is a parameter called REPORT_IMG_FOLDER that is passed to iReport that contains the absolute path of the folder where the images are stored. This folder belongs to the Hardware Manager and is configured in its properties file (openbravohw.properties, images.folder property)

Then, to add the logo, add Image object and set the following properties:

• Image Expression: $P{REPORT_IMG_FOLDER} + "/name_of_the_logo.png"
• Expression Class: java.lang.String

Add a barcode to the report

For barcodes there is a utility class in the Hardware Manager used to generate barcodes. The barcodes supported are: EAN13, CODE128 and CODE39. Here you can see an example to add a barcode for the document number:

<image scaleImage="Clip" isLazy="true" onErrorType="Icon">
  <reportElement x="409" y="10" width="131" height="33"/>
  <imageExpression><![CDATA[new com.openbravo.pos.printer.ticket.PrintItemBarcode("CODE128","none",$F{DOCUMENTNO},1.0).getImage()]]> 
  </imageExpression>
</image>

And this is the result:

The parameters of the constructor for the class 'PrintItemBarcode' are the following:

• Barcode type: EAN13, CODE128 or CODE39.
• Legend position: top, bottom or none.
• Code to print.
• Scale.