Enable Dark Mode!
By: Hajaj Roshan

Advanced Qweb Operations in Odoo 14

Technical Odoo 14

Qweb is an XML templating engine of Odoo 14 which is utilized generally to create HTML pieces and pages like reports and more layout related tasks. Layout mandates are indicated as XML attribute prefixed with t-, for example, t-if for Conditionals, with components and different credits being delivered directly. You can allude the fundamental Qweb activities from here

QWeb can handle attributes that are utilized to do a few tasks during the cycle of Qweb delivering in the runtime and the result will execute on the output node. This activity is finished with the help of t-att directive. It has three different structures:

t-att- $ name

An attribute is created with the name as $ name then the value is evaluated and the result is set as the value of the attribute.


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

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

<t t-foreach = "[1, 2, 3]" t-as = "item"> 
    <li t-attf-class = "row {{(item_index% 2 === 0)? 'even': ' odd '}} ">
        <t t-esc =" item "/>

The output will be:

<li class = "row even"> 1 </li> 
<li class = "row odd"> 2 </li>
<li class = "row even"> 3 </li>

t-att = mapped

If the parameter is mapped then each (key, value) pair create a new attribute and its value.


<div t-att = "{'key1': value1, 'key2': value2}" />

The output will be:
	<div key1 = "value1" key2 = "value2"> </div>
t-att = pair

If the parameter is Pair (tuple or array of 2 elements), the first item of the pair is the name of the attribute and the second item is the value:


	<div t-att = "['value1', 'value2']" />

Output will be:

	<div value1 = "value2"> </div>


By using the t-field attribute we can easily access and print the field from a smart record ie, the field associated with a model or relative model. With the t-field attribute, we can use t-options to customize the field.


<span t-if = "o.name"  
      t-field = "o.name" t-options = '{"widget": "contact"}'


The t-jquery directives take a CSS selector. That used on the extended template to select context nodes. The operations are specified by using t-operation. Available operation modes are:

The javascript usage of Qweb arranges you with many troubleshooting alternatives.

The use of the t-log is like the console.log activity. It will assess and deliver at the runtime by taking any expression parameters.


<t t-set = "foo" t-value = "400" /> 
<t t-log = "foo" />

The output will print 400 in the console


The t-debug attribute is used to create a debugger breakpoint and triggers the breakpoint at the time of rendering.


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

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

The parameter used in the t-js is treated as context parameter.which is the name under which the rendering context will be accessible in the t-js' body.


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

The output will print 400 to the console.

Qweb is a templating engine or reporting engine which can be used to create reports. Odoo uses Qweb for generating reports. Qweb provides several tools for creating a report. By using Qweb, we can manipulate the data very easily. Read more about Basic Qweb Operations

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