Development Book V17: Own Web Library(OWL)

OWL component

Owl Components refer to UI components used in the Odoo framework to create dynamic and interactive user interfaces. Owl is a JavaScript framework that Odoo uses to build its web client. Owl Components is a typescript application that brings together the greatest concepts from React and Vue.

Owl components are JavaScript classes with properties and functions. Each component includes a template and has the ability to render itself. Let's create a simple Owl component and integrate it into Odoo's web client.

At first, we have to define a javascript module:

/** @odoo-module **/

Then add the js file to the assets in manifest.

                'assets': {
                           'web.assets_backend': [
                               '/owl_test/static/src/js/owl_test.js',
                            ],
                        },
                        

Then we define OWL utility.

const { Component, whenReady, xml, mount, useState } = owl;

Then we have to add the owl component and its template.

                        class App extends Component {
                            static template = xml`
                                <div class="bg-info text-center p-2">
                                    <span>Hello Owl</span>
                                </div>`;
                        }
                        

Then initialize the component and add it to the web client:

whenReady().then(() => {
                               mount(App, document.body);
                            });
                            

Then the component will be added as shown below.

In the example mentioned earlier, an XML helper is utilized to create inline XML templates. While this approach works, it might not be the most efficient method for larger projects. Instead, similar to loading Qweb templates, we can load XML templates in a more organized manner.