Creating a New View in Odoo 18 Using JavaScript (OWL Framework)

Odoo 18 introduces powerful new frontend capabilities with OWL (Odoo Web Library) – a modern reactive JavaScript framework inspired by React and Vue.js. In this tutorial, we’ll walk through creating a new custom view using OWL in Odoo 18.

📌 Prerequisites

Before we begin, make sure you have:

Odoo 18 running in developer mode
Basic knowledge of JavaScript and Python
Familiarity with XML QWeb templates and the Odoo module structure

🚀 Step 1: Create a Custom Module

Start by generating a new module, e.g., my_custom_view.

1

odoo-bin scaffold my_custom_view addons

Inside your module, create the basic structure for models, views, and static assets.

📁 Step 2: Define the Python Model

In models/my_model.py:

1
2
3
4
5
6
7
8


from odoo import models, fields

class MyModel(models.Model):
    _name = 'my.model'
    _description = 'My Custom Model'

    name = fields.Char("Name")
    value = fields.Integer("Value")

Don’t forget to load the model in __init__.py and add it to __manifest__.py.

🖼️ Step 3: Create OWL Component

In static/src/js/components/MyCustomView.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


/** @odoo-module */

import { Component, useState } from "@odoo/owl";

export class MyCustomView extends Component {
    setup() {
        this.state = useState({ counter: 0 });
    }

    increment() {
        this.state.counter++;
    }
}

MyCustomView.template = "my_custom_view.Template";

And in static/src/xml/my_template.xml:

1
2
3
4
5
6
7
8
9


<templates>
    <t t-name="my_custom_view.Template">
        <div class="o_my_custom_view">
            <h3>Hello from OWL!</h3>
            <p>Counter: <t t-esc="state.counter"/></p>
            <button t-on-click="increment">+1</button>
        </div>
    </t>
</templates>

⚙️ Step 4: Register the View in the Client Action

In static/src/js/my_custom_view.js:

1
2
3
4
5
6
7
8


/** @odoo-module */

import { registry } from "@web/core/registry";
import { MyCustomView } from "./components/MyCustomView";

registry.category("actions").add("my_custom_action", {
    component: MyCustomView,
});

In views/my_custom_view.xml:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<odoo>
    <record id="action_my_custom_view" model="ir.actions.client">
        <field name="name">My Custom View</field>
        <field name="tag">my_custom_action</field>
    </record>

    <menuitem id="menu_my_custom_view"
              name="My View"
              parent="base.menu_custom"
              action="action_my_custom_view"/>
</odoo>

🧪 Step 6: Test It!

Upgrade the module:

1

odoo-bin -u my_custom_view -d your_db_name

Navigate to your new menu item and see your custom OWL view in action.

🧠 Conclusion

Odoo 18’s adoption of OWL gives frontend developers a clean and modern way to build UI components. With just a few files, you can create interactive, reactive views that feel native in the Odoo web client.

Want more OWL tutorials? Stay tuned for part 2 where we add state management and RPC calls!