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