Enable Dark Mode!
advanced-qweb-operations-in-odoo.png
By: Atul Varma

Advanced Qweb Operations in Odoo

Technical Odoo 12

Introduction.
Qweb is an XML template engine similar to Genshi & Jinja2. It acts as the primary template engine in Odoo version 12. Odoo uses Qweb operations mainly for generating reports as it provisions several tools for generating the same. Click here to read the basic Qweb operations.

Attributes.
QWeb can process attributes runtime and set the result of the processing on the output node. This is done by means of the t-att (attribute) directive which exists in 3 distinct structures:

t-att-$name
an attribute called $name is created, value is then evaluated and the result is set as the attribute’s value:

Example:
<div t-att-a="42"/>
will be rendered as:
<div a="42"></div>

t-attf-$name
The difference between t-att-$name and t-attf-$name is that the parameters of t-attf-$name is a format string while the former is an expression. It is commonly used to define classes. 

Example:
<t t-foreach="[1, 2, 3, 4]" t-as="item">
    <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
</t>

will be rendered as:
<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>
<li class="row even">4</li>

t-att=mapping
if the parameter is a mapping similar to python dictionary, each key, value pair is considered as a new attribute and its value:

<div t-att="{'a': 1, 'b': 2}"/>

will be rendered as:
<div a="1" b="2"></div>

Python

t-field
A t-field attribute enables you to access and  print the fields from the actual model or from a related model, for instance with the following element you can print the content of the name column (field) of the actual record:

<span t-if="o.name" 
      t-field="o.name" />

Javascript

t-jquery
You can take a CSS selector using the t-jquery directive. You can apply an operation on the extended template using the directive t-operation. We can use any of the operation modes listed below :
    1. Append
    2. prepend
    3. before
    4. after
    5. inner
    6. replace

Debugging
The javascript implementation of Qweb, provisions you with many debugging options. 

t-log
the t-log directive takes an expression parameter & evaluates its runtime and renders the result to the console, similar to console.log.

<t t-set="nice" t-value="420"/>
<t t-log="nice"/>

The code will print 420 in the console

t-debug
During template rendering, it triggers a debugger breakpoint. 
One can create breakpoints for easier debugging during the template rendering process. 

<t t-if="d_debug_test">
    <t t-debug="">
</t>

Note: t-debug is intensely reliant on the browser and its development tools. 

t-js
The parameter used in the t-js directive is the context parameter; it is the name of the rendering context available in the body of the javascript code that you want to execute at the time of the template rendering. 

<t t-set="nice" t-value="420"/>
<t t-js="ctx">
    console.log("nice", ctx.foo);
</t>

The code will print 420 to the console.


Odoo Training Package
Odoo Implementation Package

If you need any assistance in odoo, we are online, please chat with us.


cybrosys youtube

1
Comments

Melissa

Thanks for the detailed information about the Qweb, It was was very useful for people like me working as an Odoo Consultant for the organizations. By referring your article, it is quite easy to understand the working principle of web

24/04/2020

-

4:44AM



Leave a comment

 
whatsapp
location
Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location
London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

location
Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location
Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message