Development Book V17: Qweb Templates

A client-side template engine is also available in Odoo. Qweb Templates is the name of this template engine, which is entirely implemented in JavaScript code and shown within the browser.

Steps to render a qweb template from client-side are as follows:

Import these necessary modules and components

/** @odoo-module */
import { registry } from "@web/core/registry";
import { Component, useRef, onMounted } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
import { renderToFragment } from "@web/core/utils/render";
const actionRegistry = registry.category("actions");

Below is a JS function defined for rendering a template

static/src/js/QwebTemplate.js

export class QwebTemplate extends Component {
   setup() {
       super.setup(...arguments);
       this.root = useRef('root-template')
       onMounted(() => {
           this.render_template()
       })
   }
   render_template() {
       var self = this;
           this.root.el.querySelector('.view_template').append(renderToFragment('ViewData', {}));
   }
}
QwebTemplate.template = "QwebTemplate";
actionRegistry.add('qweb', QwebTemplate);

Define the template

static/src/xml/QwebTemplate.xml


<templates>
    <t t-name="QwebTemplate">
        <div class="" t-ref="root-template">
            <div>
                <center>
                    <h1 style="margin: 20px;">Template.....</h1>
                </center>
            </div>
            <div>
                <div class="view_template" style="width: 95%; margin: auto;"/>
            </div>
        </div>
    </t>
 
    <t t-name="ViewData">
        <h1>RENDERED DATA</h1>
    </t>
</templates>

In this ViewData will render inside the QwebTemplate component.

Add the files in manifest.py

'assets': {
   'web.assets_backend': [
      module_name/static/src/js/QwebTemplate.js',
      module_name/static/src/xml/QwebTemplate.xml',
   ],
},

The rendered view looks like the below image

odoo-development
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