How to Create a Simple Widget in Odoo 19

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/

The structure will look like:

my_widget_module/
├── __init__.py
├── __manifest__.py
├── static/
│   └── src/
│       ├── js/
│       ├── xml/
│       └── css/

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',
    ],
},

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"],
});

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>

5. Use the Widget in a View

Apply the widget to a field in your XML view:

<field name="name" widget="my_widget"/>

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>

6. Add Optional Styling

Create:

static/src/css/my_widget.css

.o_my_widget {
    color: blue;
    font-weight: bold;
}

7. Restart and Upgrade

Run:

./odoo-bin -u my_widget_module -d your_db

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]

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.