Enable Dark Mode!
By: Sruthi Pavithran

What is the QWeb template in Odoo 17

Technical Odoo 17

Odoo uses QWeb as its main templating engine. It is an XML templating engine that is mostly employed to produce HTML pages and fragments.
The elements and other attributes are rendered directly for template directives, which are defined as XML attributes prefixed with t-, for example, t-if for Conditionals.


The if conditional directive in QWeb assesses an expression supplied as an attribute value.

    <t t-if="condition">

If the condition is true :  


If it is false it is removed from the result:


There are also other conditional directives, t-elif and t-else.

    <p t-if="user.birthday == today()">
         Happy birthday!
    <p t-elif="user.login == 'root'">
       Welcome master!
    <p t-else="">


Foreach, an iteration directive in QWeb, takes two parameters: an expression that returns the collection to iterate on, and t-as, which gives the name of the "current item" to be used in the iteration.

<t t-foreach="[1, 2, 3]" t-as="i">
    <p><t t-out="i"/></p>

and the output will be : 



QWeb has the ability to compute characteristics dynamically and store the outcome on the output node. The t-att (attribute) directive, which comes in three forms.


After creating an attribute with the name $name, its value is assessed and set to the following:

<div t-att-a="42"/>

It will be rendered as : 

<div a="42"></div>


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

It will be rendered as : 

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


Each (key, value) pair creates a new attribute and its value if the parameter is a mapping:

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

It will be rendered as : 

<div a="1" b="2"></div>


The attribute name is the first item in a pair (a tuple or array of two elements) if the parameter is a pair, and the value is the second item:

<div t-att="['a', 'b']"/>

 It will be rendered as : 

<div a="b"></div>

Setting Variables

A t-value attribute with an expression in it, and the following will be the outcome of its evaluation:

<t t-set="foo" t-value="2 + 1"/>
<t t-out="foo"/>

It will print 3.
 if there is no t-value attribute: 

<t t-set="foo">
<t t-out="foo"/>

Calling Sub Templates

This can be used from within another template (to avoid duplication or give names to parts of templates) using the t-call directive:

<t t-call="other-template"/>


The QWeb implementation in javascript has several debugging hooks:


When rendering an expression, t-log accepts an expression parameter, and evaluates the expression.

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


Causes the rendering of the template to cause a debugger breakpoint.

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


JavaScript code that is run during template rendering makes up the node's body. Acc
epts a context parameter, which specifies the name under which the t-js body's rendering context will be accessible:

<t t-set="foo" t-value="42"/>
<t t-js="ctx">
    console.log("Foo is", ctx.foo);

Template Inheritance

To carry out template inheritance, two directives are used:
1.The behavior of inheritance is indicated by the property t-inherit-mode, which can be set to primary or extension to change the parent template while it is still in use.
2.It is also possible to specify an optional t-name directive. If it is used in main mode, it will be the name of the newly produced template; if not, it will be included as a reference to the converted template to aid with inheritance tracing.

Primary Inheritance

<t t-name="child.template" t-inherit="base.template"     t-inherit-mode="primary">
    <xpath expr="//ul" position="inside">
        <li>new element</li>

Extension inheritance 

<t t-inherit="base.template" t-inherit-mode="extension">
    <xpath expr="//tr[1]" position="after">
        <tr><td>new cell</td></tr>

In conclusion, Odoo 17's Qweb templates and operations offer a dynamic and user-friendly way to customize and enhance the platform's functionality. To read more about QWeb template in Odoo refer to our previous blog

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


Leave a comment




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



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