Chapter 9 - Odoo 15 Development Book

QWeb Templates

In Odoo, there’s a template engine available for the client-side too. This template engine is referred to as Qweb Templates that's applied completely in javascript code and rendered withinside the browser.

Perform the following steps to render a qweb template from client-side;

1. Import ‘web.core’ and extract qweb reference to a variable like below;

odoo.define('product_return_pos.order_list_screen',function(require) {
	"use strict";
var models = require('point_of_sale.models');
var gui = require('point_of_sale.Gui');
var core = require('web.core');
var QWeb = core.qweb;

2. Inside the render_list function simply rendered the template like below

render_list(orders){
        	var contents = this.el.querySelector('.order-list-contents');
        	contents.innerHTML = "";
        	for(var i = 0, len = Math.min(orders.length,1000); i < len; i++){
            	var order	= orders[i];
            	var orderline_html = this.env.qweb.render('OrderLine',{widget: this, order:order});
            	var orderline = document.createElement('tbody');
            	orderline.innerHTML = orderline_html;
            	orderline = orderline.childNodes[1];
            	contents.appendChild(orderline);
        	}
    	}

3. Add the template file in static/src/xml/pos_return.xml

<t t-name="OrderLine" owl="1">
  <div>
    <tr class="order-line" t-att-data-id="order.id">
      <td>
        <t t-esc="order.pos_reference"/>
      </td>
      <td>
        <t t-if="order.return_ref">
          <t t-esc="order.return_ref"/>
        </t>
      </td>
      <td>
        <t t-esc="order.partner_id[1]"/>
      </td>
      <td>
        <t t-esc="order.date_order"/>
      </td>
      <td>
        <span class="return-button return_order"      t-on-click="return_click">Return</span>
      </td>
   </tr>
 </div>
</t>

4. Then load the Qweb file into the manifest.

'web.assets_qweb': [
        	'product_return_pos/static/src/xml/pos_return.xml',
    	],

RPC Calls

In Odoo, if we need to call a python function, it can be accomplished by using _rpc calls.

this._rpc({
     model: this.model,
     method: 'quick_publish_products',
     args: [this.res_id],
}).then(function (result) {
     self.do_action(result);
});

In the above example, we made an RPC call and invoked the ‘quick_publish_products’ method defined in the current model. Then after invoking the method, the ._rpc will return the data from the method.