View source | Discuss this page | Page history | Printable version   

Retail:Developers Guide/Javascript template engine for receipt printer and customer displays documents

Contents

Javascript template engine for receipt printer and customer displays documents

Warning.png   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:

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:

main properties of ticket line model


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

Bulbgraph.png   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

Bulbgraph.png   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:

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

Retrieved from "http://wiki.openbravo.com/wiki/Retail:Developers_Guide/Javascript_template_engine_for_receipt_printer_and_customer_displays_documents"

This page has been accessed 7,510 times. This page was last modified on 1 February 2021, at 07:55. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.