Retail:Developers Guide/Javascript template engine for receipt printer and customer displays documents
Contents
|
Javascript template engine for receipt printer and customer displays documents
 | Although all the features presented in this document are still supported, starting from 3.0PR21Q2 it is recommended to create the print templates based on the new template engine. |
Introduction
As you can see in the previous chapter some pieces of javascript code appears in the ticket/display templates. It is posible because _.template function is used. This function is part of underscore javascript library.
Including javascript code into a template
Include javascript code into the XML templates is easy, just add it into this tags <%= 'javascript code here' %>
<text align ="right" length="14"> <%= OB.I18N.formatCurrency(payment.get('value')) %> </text>
Looping an array of data
One of the most common task editing a template is iterate through an array of data. It can be done including a while/for javascript statement and then the line (in xml notation) that we would like to repeat.
Let's see an example.
<%
var lines = order.get('lines');
for (var i = 0; i < lines.length; i++) {
%>
<line>
<text align ="left" length="21">
<%=lines.at(i).get('product').get('_identifier') %>
</text>
<text align ="center" length="5">
<%= lines.at(i).printQty() %>
</text>
<text align ="left" length="8">
<%= lines.at(i).printPrice() %>
</text>
<text align ="left" length="8">
<%= lines.at(i).printGross() %>
</text>
</line>
<%
}
%>
As you can see in this example, as the same manner than in javascript code, is possible to access to variables defined in other "javascript parts" of the document.
Data received by each template
Each template receives different data (javascript object) which include the information to be printed.
Bellow are listed the templates and which javascript object is received by each one:
- printreceipt.xml - Backbone Model - Order
- printreturn.xml - Backbone Model - Order
- printinvoice.xml - Backbone Model - Order
- printreturninvoice.xml - Backbone Model - Order
- printline.xml - Backbone Model - OrderLine
- printcashup.xml - JavascriptObject
- printcashmgmt.xml - Backbone collection
- welcome.xml - No data is received
This data, comes from the window model where the print action is raised.
Special functions used in templates
Because the process of the template is done calling to _.template function, inside it (javascript code of the template) is possible to use all the functions defined in OB scope.
In the list bellow are the most common functions that are used in a template.
OB.UTIL.encodeXMLComponent: Removes special XML character avoiding the construction of an invalid XML file.
OB.I18N.getLabel: Give access (using the searchkey) to the messages defined in the application dictionary.
OB.I18N.formatCurrency / OB.I18N.formatDate: Formats the passed value with the formats defined for openbravo web POS.
Working with Order model in a template
properties of order model
Here are the main properties of order model:
- id
- client
- organization
- orderType
- priceList
- currency
- warehouse
- salesRepresentative
- posTerminal
- orderDate
- documentNo
- bp -> businessPartner model
- lines -> collection of orderLines model
- payments -> collection of payments
- payment
- change
- gross
- net
- taxes -> object with used taxes
main properties of ticket line model
- product
- productidentifier
- uOM
- qty
- price
- priceList
- gross
print the content of a property
In this example, using get (backbone library) the value of property change is accessed and printed
<text align="right" length="20"> <%= OB.I18N.formatCurrency(order.get('change'))%> </text>
Iterate through ticket lines
In this example, using a for statement and the function at (backbone) we are able to print all lines of the ticket.
<%
var lines = order.get('lines');
for (var i = 0; i < lines.length; i++) {
%>
<line>
<text align ="left" length="21"><%= lines.at(i).get('product').get('_identifier') %></text>
<text align ="center" length="5"><%= lines.at(i).printQty() %></text>
<text align ="left" length="8"><%= lines.at(i).printPrice() %></text>
<text align ="left" length="8"><%= lines.at(i).printGross() %></text>
</line>
<%
}
%>
Adding QR codes to the template
 | This feature is available starting from Openbravo Commerce Suite version 3.0RR18Q4 |
A new tag has been created to indicate when a QR code must be printed. Here is an example of printing the document no as a QR Code.
<qr><%= OB.UTIL.encodeXMLComponent(order.get('documentNo')) %></qr>
Executing a report receipt
| | This feature is available starting from Openbravo Commerce Suite version 3.0RR16Q2 |
Web POS is also capable to print receipt reports using the Jasper Reports engine instead of the Receipt and Display document schema and even you can decide in the receipt template what engine to use depending for example on any order property.
In the case you want to print a receipt report the evaluated template must start with jrxml: followed by the definition of the receipt report that is a JSON object with the following schema:
{ "printer": <printer_number>, "report": "<main_report.jrxml>", "subreports": [ "subreport_1.jrxml", "subreport_2.jrxml" ] }
The fields to define in the JSON object are:
- printer: The number of the printer configured in the Hardware Manager used to print the report receipt.
- report: The report definition to send to the Hardware Manager.
- subreports: List of the subreports used by the main report.
This report receipt definition has to be create the same way of any other report receipt as explained in the How to create a receipt report document. But it is not needed to declare the report in the window POS Print Templates because all the information is already defined in the JSON object.
An example of a template that uses this functionality is:
<% if (order.get('hasbeenpaid')) { // here goes the check that decides whether to print the receipt report or not %> jrxml:{ "printer": 2, "report": "res/paidorderreport.jrxml", "subreports": [ "res/paidorderreport_subreport1.jrxml", "res/paidorderreport_subreport2.jrxml" ] } <% } else { %> <?xml version="1.0" encoding="UTF-8"?> <output> <ticket> (...)
This example will print depending whether the order has been fully paid or not the receipt report res/paidorderreport.jrxml or the receipt template defined after the <ticket> tag.
Back to Concepts