Enable Dark Mode!
what-is-the-qweb-template-in-odoo-17.jpg
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.

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


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



0
Comments



Leave a comment

 


whatsapp
location

Calicut

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

location

Kochi

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

location

Bangalore

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

Send Us A Message