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.
Conditions
The if conditional directive in QWeb assesses an expression supplied as an attribute value.
<div>
<t t-if="condition">
<p>True</p>
</t>
</div>
If the condition is true :
<div>
<p>True</p>
</div>
If it is false it is removed from the result:
<div>
<div>
There are also other conditional directives, t-elif and t-else.
<div>
<p t-if="user.birthday == today()">
Happy birthday!
</p>
<p t-elif="user.login == 'root'">
Welcome master!
</p>
<p t-else="">
Welcome!
</p>
</div>
Loops
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>
</t>
and the output will be :
<p>1</p>
<p>2</p>
<p>3</p>
Attributes
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.
1.t-att-$name
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>
2.t-attf-$name
<t t-foreach="[1, 2, 3]" t-as="item">
<li t-attf-class="row {{ (item_index % 2 === 0) ? 'even' : 'odd' }}">
<t t-out="item"/>
</li>
</t>
It will be rendered as :
<li class="row even">1</li>
<li class="row odd">2</li>
<li class="row even">3</li>
3.t-att=mapping
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>
4.t-att=pair
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">
<li>ok</li>
</t>
<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"/>
Debugging
The QWeb implementation in javascript has several debugging hooks:
t-log
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"/>
t-debug
Causes the rendering of the template to cause a debugger breakpoint.
<t t-if="a_test">
<t t-debug=""/>
</t>
t-js
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);
</t>
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>
</xpath>
</t>
Extension inheritance
<t t-inherit="base.template" t-inherit-mode="extension">
<xpath expr="//tr[1]" position="after">
<tr><td>new cell</td></tr>
</xpath>
</t>
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