Enable Dark Mode!
By: Atul Varma

Advanced Qweb Operations in Odoo

Technical Odoo 12

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

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:

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

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

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. 

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

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>

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>


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" />


You can take a CSS selector using 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

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

t-log directive takes any expression parameter & evaluates it runtime and render 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

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

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

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

The parameter used in 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);

The code will print 420 to the console.

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

cybrosys youtube



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




Leave a comment


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


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


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


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

Send Us A Message