Odoo 18 Development Book - OWL Component

OWL Components are used to create dynamic, modern web interfaces in Odoo using a component-based JavaScript framework. OWL is inspired by frameworks like React and Vue, and it powers many parts of Odoo’s modern web client.

In Odoo, OWL (Odoo Web Library) components are built using JavaScript classes that define both behavior and structure. Each component is linked to a template, allowing it to generate its own user interface. In this guide, we’ll build a basic OWL component and demonstrate how to integrate it seamlessly into the Odoo 18 web client.

First, a JavaScript module needs to be defined:

                        @odoo-module 
                       

In your module's __manifest__.py, include the file in web.assets_backend:

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

The OWL utility is then defined.

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

The owl component and its template must then be added.

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

After that, add the component to the web client and initialise it:

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

The component will then be added as indicated below.

In the aforementioned example, inline XML templates are created using an XML helper. Even while this strategy is effective, it might not be the best one for bigger projects. Instead, we can import XML templates in a more structured way, much like we can load Qweb templates.