Odoo QWEB Templates - Python & Javascript

In this tutorial, we are going to continue QWEB Tutorials Open . In the previous tutorial, we already did some of the basics to moderate functionalities. Now we will do more advanced functionalities like caching Open , inheritance, and QWEB using JavaScript Open .

For those who didn't watch my previous tutorial, you can check the video below.

Cache/Nocache

Let's start with caching and here we are going to use t-cache and t-nocache directives. The t-cache method is used to make pages load faster since any QWEB t directives will be rendered only once and thus, lessen any SQL queries. This is nice for the website to load faster. This doesn't mean the template will not fetch updated content since it will automatically re-render if the cache key has been changed.

Say for example in a model sale order, if we loop to each record using t-foreach and we set an element to be cached, by passing each model record, that element then will only re-render if the current record has been changed. By default, if you pass a recordset, it will automatically use the model ID and write date as the cache key.

xml

<h4>Sale Orders</h4>
<ul>
    <t t-foreach="model" t-as="order">
        <li t-cache="order,order.partner_id">
            <strong t-out="order.name"/>
            <span class="badge bg-secondary" t-out="order.state"/>
            <small t-out="order.partner_id.name"/>
        </li>
    </t>
</ul>

Cache using boolean value

We can also use a boolean value in t-cache wherein if it’s a false value, the cache will be automatically invalidated. For example in the sales order count, we don’t want to cache it for logged-in users but will be cached for public users.

xml

<th>Boolean</th>
<td t-cache="'cache this element' if not request.session.uid else False">
    <h4>Sale Order Count <span class="badge bg-success" t-out="len(model)"/></h4>
</td>

Use nocache inside cache

You might want to just specify which element should not be cached inside an element with t-cache. Say for example below, inside an element with t-chache, the t-nocache directive has been added to the sale order count. You can add any value as a reference if you want or leave it blank.

It is important to note that t-nocache will only accept values coming from the controller render method. So adding a template variable having values coming either from the controller or directly from the template, it will not be rendered inside an element with t-cache. In addition, t-cache is scoped which means setting values inside it will not work outside that element.

What you can do, however, if you want to render any template variables, you need to add primitive values after the t-nocache directive. Just make sure you add it with an element with an existing t-nocache directive. In this way, you can render it using a normal t-out directive.

xml

<tr>
    <th>Nocache</th>
    <td>
        <t t-set="template_variable" t-value="10"/>
        <div t-cache="any_value">
            <h4>Sale Order Count
                <span t-nocache="add any text"
                      class="badge bg-success" t-out="len(model)"/>
            </h4>
            <p t-nocache="">Template Variable <span t-out="template_variable"/></p>
            <t t-set="template_variable" t-value="1000"/>

            <p t-nocache="" t-nocache-cached_template_variable="template_variable">
                Primitive Values:
                <span t-out="cached_template_variable"/>
                <strong t-out="cached_template_variable + 5"/>
            </p>
        </div>

        <p><b>Template Variable <span t-out="template_variable"/></b></p>
    </td>
</tr>
>

Inheritance using Python

Since Python and Javascript have different ways of creating a template, let’s first do the Python Inheritance. There are two modes in template inheritance, either as an extension, where in every change you make, will affect the main template. Or as a child template which will not affect the main template but will create a new version out of it.

xml

<template id="main_template" name="Main Template">
    <div class="alert alert-info">
        <h3>This is the main template.</h3>
    </div>
</template>

Extension Inheritance

For extension inheritance, create a new template with id main_template_inherited and inherit_id which will be the template you want to inherit. Using XPATH, you can target any elements present in the main template using the expr attribute. If you want to start from the root element, just add the root element which is div followed by slash, then the next element you want to select.

After selecting the target element, there are options where you want to render the element by adding a position attribute which can either be inside, before, after, or attributes.

xml

<template id="main_template_inherited" inherit_id="main_template" name="Extension Template">
    <xpath expr="div/h3" position="inside">
        <small>Adding new element inside title.</small>
    </xpath>
    <xpath expr="div/h3" position="before">
        <p>Adding new element before title.</p>
    </xpath>
    <xpath expr="//h3" position="after">
        <p>Adding new element after title.</p>
    </xpath>
</template>

Primary Inheritance

Now if you want to create a child template so that it doesn’t affect the main template, you need to add a primary attribute that is equal to True. For the example below, using XPATH, it targets the div element and use the position attributes. You can add a class, remove a class, and add a separator. You can also set a new attribute and add some styles.

xml

<template id="main_template_child" inherit_id="main_template" name="Child Template" primary="True">
    <xpath expr="div" position="attributes">
        <attribute name="class" add="alert-success" remove="alert-info" separator=" "/>
        <attribute name="style">border: 1px solid red;</attribute>
    </xpath>
</template>

Javascript - Public Widget

Rendering Template

We will be doing several options on how you can use it for the website pages. In order to create a public widget, import public Widget from web/legacy/js/public/public_widget and register a new widget by extending publicWidget.Widget. Ths method, needs an object parameter. The first property needed is the selector. The value will be any CSS selector from the website page. This is important since this will be the basis of the widget in order to be activated.

xml

<t t-name="qweb_tutorials.jsTemplate">
    <div class="alert alert-primary">
        <h3>Rendered from public widget.</h3>
    </div>
</t>

js

/* @odoo-module */

import publicWidget from "@web/legacy/js/public/public_widget"

publicWidget.registry.jsTemplate = publicWidget.Widget.extend({
    selector: '.js_template',
    template: 'qweb_tutorials.jsTemplate',
    start(){
        //console.log("JS Template Activated!")
        this.renderElement();
    }
})

xml

<tr>
    <th>Render template from public widget</th>
    <td><div class="js_template"/></td>
</tr>

Data Output, Looping, Attributes

Now let’s try to do data output, variables, and looping. Create a new template and inside that template, render a string, a javascript object, an array, model, and setting attributes. Then create a new public widget and the names will be similar to the name of the template. For this example, we are going to pass some data needed on the template so we need to use renderToElement method from web/core/utils/render.

xml

<t t-name="qweb_tutorials.templateWithVariables">
    <div>
        <ul>
            <li>String: <span t-out="string"/></li>
            <t t-set="some_date" t-value="new Date()"/>
            <li>Javascript Object: <span t-out="some_date.toLocaleString()"/></li>
            <li>Array:
                <ul>
                    <li t-foreach="array" t-as="el" t-key="el">
                        <span t-out="el"/>
                    </li>
                </ul>
            </li>
            <li>Models:</li>
            <li>Attributes:
                <a t-attf-href="mailto:{{ email }}"><span t-out="email"/></a>
            </li>
        </ul>
    </div>
</t>

Under the start method, create a new constant variable content that is equal to renderToElement by passing the widget template followed by an object that will hold the values needed by the template. Add a string, array and email. Under the template and render the string, for javascript object, let’s try to set it directly from the template as some_date with value as new Date(). Then render it using t-out some_date.toLocalString() format.

Then in array, use the t-foreach directive, this will be the same in the Python code except that we need to add t-key directive. Then use t-out to render each item. For the attributes, add an anchor element and use the t-attf attribute followed by the href attribute, add mailto, and inject the email data using double curly brackets, and render the email using t-out.

Going back to the widget, the good thing about the renderToElement method is that we can attach it to any selector. In this case, let’s render it at the root element using this.$target and use HTML method, then pass the content variable holding the rendered template.

js

publicWidget.registry.templateWithVariables = publicWidget.Widget.extend({
    selector: '.js_template_with_variables',
    template: 'qweb_tutorials.templateWithVariables',
    async start(){
        const content = renderToElement(this.template, {
            string: "QWEB Tutorials using Javascript",
            array: [1,2,3,4,5],
            email: "ajscriptmedia@gmail.com",
        })
        this.$target.html(content)
    }
})

Lastly, create a new div element having a class we defined under the widget selector property.

xml

<tr>
    <th>Date Output, Variables, Looping</th>
    <td><div class="js_template_with_variables"/></td>
</tr>

To render some models to the template, we need to use the ORM service. We then need to initialize it under the init method but don’t forget to add a super method in order to not break some code. By default, services are already available in the public widget by calling the bindService method and passing the service name.

Just to note that this method is for version 17, if you want to implement this in version 16, you need to import public widget from web.public.widget and when rendering it to an element, import qweb from web.core and use the render method. When interacting with the backend, use the built-in in _rpc method.

In this example, we will use bindService and pass orm as the parameter. Since the orm service will return a promise, add async await to the start method and then finally call the orm service by using the searchRead method.Under the template, render it using t-foreach and render the name field using t-out.

js

publicWidget.registry.templateWithVariables = publicWidget.Widget.extend({
    selector: '.js_template_with_variables',
    template: 'qweb_tutorials.templateWithVariables',
    init(){
        this._super(...arguments);
        this.orm = this.bindService("orm")
    },
    async start(){
        const content = renderToElement(this.template, {
            //...
            model: await this.orm.searchRead("sale.order", [], ["name"]),
        })
        this.$target.html(content)
    }
})

xml

<t t-name="qweb_tutorials.templateWithVariables">
    <div>
        <ul>
            <!- ... -->
            <li>Models:
                <ul>
                    <li t-foreach="model" t-as="el" t-key="el.id">
                        <span t-out="el.name"/>
                    </li>
                </ul>
            </li>
            <!- ... -->
        </ul>
    </div>
</t>

Template Inheritance

Now let’s move on to template inheritance. Create a new template and similar to the Python code templates, there are two modes in template inheritance. Either extension or primary.

xml

<t t-name="qweb_tutorials.mainTemplate">
    <div class="alert alert-primary">
        <h3>This is the main template.</h3>
    </div>
</t>

JS Extension Inheritance

Duplicate the main template but instead of name, change it to inherit. This mode deosn’t need to have a t-name attribute. We can define the mode by using t-inherit-mode directive and by default, the mode will be primary if you didn’t define it.

xml

<t t-inherit="qweb_tutorials.mainTemplate" t-inherit-mode="extension">
    <xpath expr="div" position="inside">
        <button class="btn btn-info">Submit</button>
    </xpath>
</t>

JS Primary Inheritance

Duplicate the main template extension for the primary mode and since this is primary we need to add a t-name and. This mode will create a child template where the changes you make will not affect the parent template. Let’s then add a new button.

xml

<t t-name="qweb_tutorials.mainTemplatePrimary" t-inherit="qweb_tutorials.mainTemplate" t-inherit-mode="primary">
    <xpath expr="div" position="inside">
        <button class="btn btn-info ms-2">Close</button>
    </xpath>
</t>

To render it, create a new widget and name it same with the main template. In rendering the child template, let's try to do other methods using document.querySelector and pass this new class. After that, use innerHtml property to add some content and use the renderToElement method, passing the name of the main template child then calling outer HTML property. There’s also innerHTML property, however, this will not include the root element.

js

publicWidget.registry.mainTemplate = publicWidget.Widget.extend({
    selector: '.js_template_extension',
    template: 'qweb_tutorials.mainTemplate',
    start(){
        this.renderElement();

        const templatePrimary = document.querySelector('.js_template_primary')
        templatePrimary.innerHTML = renderToElement("qweb_tutorials.mainTemplatePrimary").outerHTML
    }
})

Lastly, add the selectors in Python QWEB Template in rendering to the page.

xml

<tr>
    <th>Template Inheritance</th>
    <td>
        <p>Template Extension</p>
        <div class="js_template_extension"/>
        <p>Child Template</p>
        <div class="js_template_primary"/>
    </td>
</tr>

Sub-Teplate

Let's do to the sub-template. Create a new template with name subTemplate and inside, create a root element with an ID wrapper.

xml

<t t-name="qweb_tutorials.subTemplate">
    <div id="wrapper">
        <header>
            <div class="alert alert-info">Header</div>
        </header>
        <main>
            <t t-call="qweb_tutorials.mainTemplate"/>
        </main>
        <footer>
            <div class="alert alert-info">Footer</div>
        </footer>
    </div>
</t>

Add a header, footer, and main. Inside main, render a sub-template using t-call directive. Then create a new widget subTemplate, rename the selector, and template, create a new div element with class js_sub_template.

js

publicWidget.registry.subTemplate = publicWidget.Widget.extend({
    selector: '.js_sub_template',
    template: 'qweb_tutorials.subTemplate',
    start(){
        this.renderElement();
    }
})

xml

<tr>
    <th>Sub-Template</th>
    <td><div class="js_sub_template"/></td>
</tr>

Adding Events

Next, add some events to a template. Create a new template and name it as templateWithEvents. Inside this template, create a span element that will hold a counter variable and a button that will increase the counter value.

xml

<t t-name="qweb_tutorials.templateWithEvents">
    <div class="alert alert-primary">
        <h3>Template with events</h3>
        <p>Counter <span id="counter">0</span></p>
        <button class="btn btn-info">Increase Counter</button>
    </div>
</t>

Then create a new widget that is the same as the name of the template, and for the selector, name it to js_template_with_events. So in adding an events to widget, we need to define it under the events property. The value will be a list of key-value pairs. The key will be a string where the first string is the name of the event like click followed by the selector like a button element or any class or id. The value will be a string which is the name of the call-back function.

Let’s name it onClick and inside this method, let’s increase the counter field class. We then need to add the init method and initialize this.counter is equal to 0. Then we just need to target the element we want to render this counter using the find method having an ID as a counter. Let’s modify the text by the counter.

js

publicWidget.registry.templateWithEvents = publicWidget.Widget.extend({
    selector: '.js_template_with_events',
    template: 'qweb_tutorials.templateWithEvents',
    events: {
        'click button': 'onClick',
    },
    init(){
        this._super(...arguments)
        this.counter = 0
    },
    start(){
        this.renderElement();
    },
    onClick(){
        this.counter++
        this.$el.find('#counter').text(this.counter)
    }
})

Then add a new div with class js_template_with_events.

xml

<tr>
    <th>Template with events</th>
    <td>
        <div class="js_template_with_events"/>
    </td>
</tr>

But let’s check some issues here. If you inspect it under the network tab and open the document, the preview will show you that all those JS templates will not be loaded immediately. But only when the assets have been downloaded successfully. So this might affect the SEO. To improve SEO, we need to transfer the template to Python QWEB templates so that it will be automatically rendered. You can also use the t-cache method to minimize SQL database queries.

xml

<tr>
    <th>Template with events</th>
    <td>
        <!-- .. -->

        <div class="alert alert-primary" id="betterForSeo">
            <h3>Better for SEO</h3>
            <p>Counter <span id="counter">0</span></p>
            <button class="btn btn-info">Increase Counter</button>
        </div>
    </td>
</tr>

Then some other client action, you can pass it using the widget. Now the idea here is to render initial content for SEO purposes and once the assets have been loaded, you can then render other parts wherein you can apply all the methods discussed above..

js

publicWidget.registry.betterForSeo = publicWidget.Widget.extend({
    selector: '#betterForSeo',
    events: {
        'click button': 'onClick',
    },
    init(){
        this._super(...arguments)
        this.counter = 0
    },
    onClick(){
        this.counter++
        this.$el.find('#counter').text(this.counter)
    }
})

Watch Video Tutorial