Odoo QWEB Templates - All You Need To Know!

Summary

In this tutorial, the presenter explains how to work with QWeb, the templating engine in Odoo, covering both Python and JavaScript implementations. The tutorial spans from basic to advanced concepts, demonstrating how to render dynamic content with templates. Topics include using QWeb in Odoo for generating HTML and PDF reports, working with attributes, rendering different data types, implementing conditional logic, looping, subtemplates, security considerations, and more. The video also delves into using QWeb with Odoo's MVC framework and explains how to manage frontend templates with JavaScript. A comprehensive guide for both developers and Odoo enthusiasts.

Takeaways

• 😀 QWeb is Odoo's templating engine based on XML, used to generate HTML elements for web pages and PDF reports.
• 😀 The tutorial covers both basic and advanced functionalities of QWeb, including its use in Python and JavaScript.
• 😀 Python implementation of QWeb uses templates with the `odoo` root element and can be rendered in models and views.
• 😀 JavaScript implementation of QWeb uses the `t` element as the root, and templates are loaded dynamically using the `assets` directive.
• 😀 To render dynamic content in templates, the `t-out` directive is used for data binding, while `t-value` helps set variables.
• 😀 The tutorial demonstrates handling different data types such as strings, integers, lists, dictionaries, and Python objects like `datetime`.
• 😀 Conditional rendering in QWeb is achieved using `t-if`, `t-elif`, and `t-else`, allowing content to change based on conditions (e.g., user login status).
• 😀 Loops are handled using the `t-foreach` directive, which supports features like indexing, checking first/last elements, and identifying even/odd positions.
• 😀 Dynamic HTML attributes can be rendered with `t-att` and `t-attf`, allowing for flexible and dynamic attribute assignment based on template data.
• 😀 Sub-templates are reusable components defined with the `t-call` directive, enabling modular design and the passing of dynamic content between templates.
• 😀 Security best practices, including escaping user inputs using `HTML Escape` and `MarkupSafe`, help prevent vulnerabilities like XSS in QWeb templates.

Q & A

What is QWeb, and how is it used in Odoo?

QWeb is a templating engine based on XML that generates HTML elements. It is used to create dynamic web pages and PDF reports in Odoo, allowing you to replace static content with dynamic data generated through Python or JavaScript expressions.

How can you use QWeb templates in Python?

To use QWeb templates in Python, you define a new template with Odoo as the root element, specifying an ID and name. This template should be added under the data property, and it can then be used in PDF reports, website pages, and as HTML fragments for sub-templates.

What is the difference between using QWeb in Python and JavaScript?

In Python, QWeb templates are defined and stored in the database, typically used for PDF reports and web pages. In contrast, JavaScript templates are not stored in the database; instead, they are added under the assets property and loaded dynamically when needed.

What is the purpose of the 'T call assets' directive in QWeb?

'T call assets' is used to load necessary front-end assets like CSS or JS libraries, such as the Bootstrap framework, into your QWeb template. It simplifies the process of including assets in the front end without manually managing their inclusion.

How does the 'T out' directive work in QWeb?

The 'T out' directive is used to render data inside an HTML element. It automatically escapes data for security reasons, ensuring that dynamic values like strings, integers, or dates are rendered safely within the template.

What is the role of the 'T if', 'TL if', and 'TLS' directives in QWeb?

These directives are used for conditional rendering. 'T if' checks if a condition is true, 'TL if' is used for additional conditions, and 'TLS' serves as a fallback condition. They allow you to display different content based on specific conditions, such as whether a user is logged in or not.

How can you loop through a list in QWeb templates?

You can use the 'T for each' directive to loop through a list in QWeb. It allows you to render each item in the list dynamically. You can also use additional methods, such as 'index', 'first', 'last', 'even', 'odd', and 'size' to control how the list is displayed.

What is the 'T field' directive in QWeb used for?

The 'T field' directive is used to render editable fields in QWeb templates. It automatically makes the field editable in the website editor, and you can also format the field using options like date formatting.

How do you set attributes dynamically in QWeb templates?

To set attributes dynamically in QWeb, you use the 'T at' directive. For example, to dynamically set the 'href' attribute of a link, you can use 'T at' to pass the value dynamically. You can also use 'Tatf' for string literals or expressions, and 'T' to add conditional logic.

How do sub-templates work in QWeb?

Sub-templates in QWeb are used to break down the UI into reusable components. You can define a static template and call it using the 'T call' directive. Dynamic values can be passed to sub-templates, and you can also define scope variables inside them to avoid naming conflicts.