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
Attributes
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.
Example
<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.
Example
<t t-foreach = "[1, 2, 3]" t-as = "item">
<li t-attf-class = "row {{(item_index% 2 === 0)? 'even': ' odd '}} ">
<t t-esc =" item "/>
</li>
</t>
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.
Example
<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:
Example
<div t-att = "['value1', 'value2']" />
Output will be:
<div value1 = "value2"> </div>
Python
t-field
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.
Example
<span t-if = "o.name"
t-field = "o.name" t-options = '{"widget": "contact"}'
/>
Javascript
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:
Before
Replace
Append
Inner
After
Prepend
Attributes
Debugging
The javascript usage of Qweb arranges you with many troubleshooting alternatives.
t-log
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.
Example
<t t-set = "foo" t-value = "400" />
<t t-log = "foo" />
The output will print 400 in the console
t-debug
The t-debug attribute is used to create a debugger breakpoint and triggers the breakpoint at the time of rendering.
Example
<t t-if = "debug_test_a">
<t t-debug = "">
</t>
Note: t-debug is dependent on the browser and its development tools.
t-js
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.
Example
<t t-set = "cool" t-value = "400" />
<t t-js = "ctx">
console.log ("cool", ctx.foo);
</t>
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