Enable Dark Mode!
By: Hajaj Roshan

Advanced Qweb Operations in Odoo 13

Technical Odoo 13

Qweb is an XML templating engine of Odoo 13 which is used to generate reports and more template related operations. You can refer the basic Qweb operations from here
Attributes are used to do some operations during the process of Qweb rendering in the runtime and the output will execute on the output node. This operation is done by t-att directive. It has three various structures:
Qweb will create an attribute called $name and the value is evaluated after creation. Then the output will store to the attribute.
For Example:
<div t-att-foo="51"/>
will be rendered as:
<div foo="51"></div>
t-attf-$name is slightly different from t-att-$name. If the former is an expression then the parameter t-attf-$name will be a format string that is commonly used for defining classes.
<t t-foreach="[1, 2, 3, 4]" t-as="index">
    <li t-attf-class="row {{ item_parity }}"><t t-esc="index"/></li>
will be generated 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>

mapping is almost the same as the python dictionary. The parameter is set to mapping then each there will be a pair of keys and values which is considered as a new attribute and it’s value.
<div t-att="{'para1': val1, 'para2': val2}"/>
will be generated as:

<div para="val1" para2="val2"></div>
t-field attribute will allow you to get or print the value from the fields which are associated with a model or a related model. For example, the following element will print the value contained in the field name which is in the record object ‘o’ 
<span t-if="o.name" 
      t-field="o.name" />
If you want to use CSS in your template then you can use t-jquery for getting CSS selector. Using a t-operation directive you can also apply operation in the extended template. We have the following list of operation modes:
    1. before
    2. replace
    3. append
    4. inner
    5. after
    6. prepend
There are many debugging options available for the javascript implementation of qweb.

The usage of the t-log is similar to the console.log operation. It will evaluate and render at the runtime with taking any expression parameters.
<t t-set="cool" t-value="365"/>
<t t-log="cool"/>
The code will print 365  in the console
t-debug is helpful to create a debugger breakpoint. At the time of the rendering process, it will trigger the breakpoint.

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

Note: t-debug is intensely reliant on the browser and its development tools. 
t-js is a context parameter. Using this -js parameter, you will get the rendering context in the runtime of template rendering which is available in the javascript code.  
<t t-set="cool" t-value="365"/>
<t t-js="ctx">
    console.log("cool", ctx.foo);

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


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