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.
supportedTypesdefines 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.
SOCIAL SHARE CARD GENERATOR