DEV Community

RayMiles
RayMiles

Posted on

How to Create a Simple Widget in Odoo 19

#frontend #ui #tutorial #javascript

Odoo 19 uses the OWL (Odoo Web Library) framework for building frontend components. Widgets are reusable UI elements that allow you to customize how fields are displayed and interacted with in the interface.

This guide explains how to create a simple custom field widget.

1. Create a Custom Module

Start by generating a new module:

odoo-bin scaffold my_widget_module addons/
Enter fullscreen mode Exit fullscreen mode

The structure will look like:

my_widget_module/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       ├── xml/
│       └── css/
Enter fullscreen mode Exit fullscreen mode

2. Update the Manifest

Edit __manifest__.py and include your assets:

'assets': {
    'web.assets_backend': [
        'my_widget_module/static/src/js/my_widget.js',
        'my_widget_module/static/src/xml/my_widget.xml',
        'my_widget_module/static/src/css/my_widget.css',
    ],
},
Enter fullscreen mode Exit fullscreen mode

3. Create the Widget (OWL Component)

Create the file:

static/src/js/my_widget.js

/** @odoo-module **/

import { Component } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyWidget extends Component {

    get value() {
        return this.props.record.data[this.props.name] || "No value";
    }
}

MyWidget.template = "my_widget_module.MyWidget";

registry.category("fields").add("my_widget", {
    component: MyWidget,
    supportedTypes: ["char"],
});
Enter fullscreen mode Exit fullscreen mode

4. Create the Template

Create:

static/src/xml/my_widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates>

    <t t-name="my_widget_module.MyWidget" owl="1">
        <div class="o_my_widget">
            <span t-esc="value"/>
        </div>
    </t>

</templates>
Enter fullscreen mode Exit fullscreen mode

5. Use the Widget in a View

Apply the widget to a field in your XML view:

<field name="name" widget="my_widget"/>
Enter fullscreen mode Exit fullscreen mode

Example:

<record id="view_form_example" model="ir.ui.view">
    <field name="name">example.form</field>
    <field name="model">res.partner</field>
    <field name="arch" type="xml">
        <form>
            <sheet>
                <group>
                    <field name="name" widget="my_widget"/>
                </group>
            </sheet>
        </form>
    </field>
</record>
Enter fullscreen mode Exit fullscreen mode

6. Add Optional Styling

Create:

static/src/css/my_widget.css

.o_my_widget {
    color: blue;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

7. Restart and Upgrade

Run:

./odoo-bin -u my_widget_module -d your_db
Enter fullscreen mode Exit fullscreen mode

Then refresh your browser using a hard reload.

Key Concepts

  • Widgets in Odoo 19 are OWL components.
  • Field values are accessed using: 
  this.props.record.data[this.props.name]
Enter fullscreen mode Exit fullscreen mode
  • The widget must be registered in the fields registry.
  • supportedTypes defines which field types the widget can handle.

Conclusion

Creating a widget in Odoo 19 involves defining an OWL component, linking it to a template, registering it, and using it in a view. With this structure, you can extend the widget to include interactivity, backend communication, or more advanced UI behavior.

Top comments (0)