advanced-qweb-operations-in-odoo.png
Blogger_636990013040601064.png
By: Atul Varma

Advanced Qweb Operations in Odoo

Technical Odoo 12

Introduction.
Qweb is an XML template engine similar to Genshi & Jinja2. It acts as the primary templating engine in Odoo version 12. Odoo uses Qweb operations mainly for generating reports as it provisions several tools for generating the same. Cick here to read the basic Qweb operations.

Attributes.
QWeb can process attributes runtime and set the result of the processing on the output node. This is done by means of the t-att (attribute) directive which exists in 3 distinct structures:

t-att-$name
an attribute called $name is created,value is then evaluated and the result is set as the attribute’s value:

Example:
<div t-att-a="42"/>
will be rendered as:
<div a="42"></div>

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

Example:
<t t-foreach="[1, 2, 3, 4]" t-as="item">
    <li t-attf-class="row {{ item_parity }}"><t t-esc="item"/></li>
</t>

will be rendered 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>

t-att=mapping
if the parameter is a mapping similar to python dictionary, each key, value pair is considered as a new attribute and its value:

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

will be rendered as:
<div a="1" b="2"></div>

Python

t-field
A t-field attribute enables you to access and  print the fields from the actual model or from a related model, for instance with the following element you can print the content of the name column (field) of the actual record:

<span t-if="o.name" 
      t-field="o.name" />

Javascript

t-jquery
You can take a CSS selector using t-jquery directive. You can apply an operation on the extended template using the directive t-operation. We can use any of the operation modes listed below :
    1. Append
    2. prepend
    3. before
    4. after
    5. inner
    6. replace

Debugging
The javascript implementation of Qweb, provisions you with many debugging options. 

t-log
t-log directive takes any expression parameter & evaluates it runtime and render the result to the console, similar to console.log.

<t t-set="nice" t-value="420"/>
<t t-log="nice"/>

The code will print 420 in the console

t-debug
During template rendering, it triggers debugger breakpoint. 
One can create breakpoints for easier debugging during the template rendering process. 

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

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

t-js
The parameter used in t-js directive is the context parameter, it is the name of the rendering context available in the body of the javascript code that you want to execute at the time of the template rendering. 

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

The code will print 420 to the console.



cybrosys youtube

Comments

0


Leave a comment

 
Calicut

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

London

Cybrosys Limited
Alpha House,
100 Borough High Street, London,
SE1 1LB, United Kingdom

Kochi

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

Bangalore

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

Send Us A Message