How to Use OWL Components On a Website in Odoo18

With Odoo18, working on OWL (Odoo Web Library) components has ever-growing intuitiveness. No matter how experienced or fresh you are as a developer, this tutorial will help you integrate OWL components in Odoo18 website.

What is OWL?

The OWL components in Odoo18 is a very dynamic and lightweight framework to build dynamic and reusable UI components for Odoo. It uses the virtual DOM, and thus, it is performant and reactive. The design of OWL has been inspired by React and Vue.js, but with OWL, writing a UI is much simpler thanks to its declarative philosophy.

Requirements

There are the possible things you should have before commencing:

• Odoo18 is installed and running
• Elementary knowledge of JavaScript and XML
• Understanding the structure of the modules in Odoo
• Configured development environment with Odoo’s web framework

Create a New Odoo Module

Start by creating a custom module where the OWL component will be defined. Navigate to the Odoo addons directory and set up the module structure:

cd /path/to/odoo/addons
mkdir my_owl_module
cd my_owl_module
mkdir -p static/src/components
Next, create the `__manifest__.py` file inside your module:

{
    'name': 'My OWL Component Module',
    'version': '1.0',
    'depends': ['website'],
    'assets': {
        'web.assets_frontend': [


            'my_owl_module/static/src/components/my_component.js',            
'my_owl_module/static/src/components/my_component.xml',

        ],
      },

    'installable': True

    'application': False,
}

Define an OWL Component

JavaScript Component (my_component.js)

static template = xml<div class="my-owl-component">Hello from OWL!</div>;

}
export default MyComponent;
XML Template (my_component.xml)

<t t-name="my_owl_module.MyComponent">


    <div class="my-owl-component">

    Hello from OWL!

    </div>
</t>

Add the Component to a Website Page

Modify the website template to include the OWL component by updating or creating a new template:

Template File (views/templates.xml)

<odoo>
    <template id="my_owl_template" inherit_id="website.layout">
        <xpath expr="//main" position="inside">
            <div id="my-owl-app"></div>
        </xpath>
    </template>
</odoo>

Initialize OWL in Odoo Website

To render the OWL component on the website, update the JavaScript entry point in static/src/js/main.js:

import { mount } from ‘@odoo/owl’;
import MyComponent from ‘../components/my_component.js’;

document.addEventListener("DOMContentLoaded", function () {

    mount(MyComponent, { target: document.getElementById("my-owl-app") });
});

Load Assets in Website

Ensure Odoo loads the necessary assets by updating the module’s manifest:

'assets': {
    'web.assets_frontend': [
        'my_owl_module/static/src/js/main.js',
        'my_owl_module/static/src/components/my_component.js',
    ],
},

Install and Test the Module

Finally, install your module by running the following command:

./odoo-bin -c odoo.conf -u my_owl_module

Once installed, open your Odoo website, and you should see ‘Hello from OWL!’ displayed on the page.
Having learned to integrate OWL components into your Odoo website, you can now move on to advanced customization and features for improving your interfaces even further. Try different components and see how far you can go with Odoo development! Happy coding!