Skip to Content

Odoo 17 Field Widgets

Introduction to field widgets
31 December 2023 by
Fouvty

What is Field widget?

In Odoo, field widgets define how a field is rendered on the UI. Widgets are responsible for the look and feel of a field and can also control its behavior. While Odoo provides many built-in widgets, there are times when you need something custom. In this guide, we'll walk through creating a custom field widget using Odoo's OWL framework, which is used for building web components.

Step 1: Create a New OWL Component

We'll start by creating a new OWL component. This component will be our custom field widget that displays a simple text input in red.

1.1 Create the Component File

Create a new JavaScript file named my_text_field.js in your custom module.


/** @odoo-module */


import { standardFieldProps } from "@web/views/fields/standard_field_props";
import { Component, xml } from "@odoo/owl";
import { registry } from "@web/core/registry";

export class MyTextField extends Component {

    /**
    * @param {boolean} newValue
    */
    onChange(newValue) {
        this.props.update(newValue);
    }
}

MyTextField.template = xml`
    <input t-att-id="props.id" class="text-danger" t-att-value="props.value" onChange.bind="onChange" />
`;

MyTextField.props = {
    ...standardFieldProps,
};

MyTextField.supportedTypes = ["char"];


1.2 Ex​pla​nation
  • Imports: We import standardFieldProps which provides standard properties like the field value, update function, and other metadata. We also import Component and xml from OWL, along with registry to register our component.
  • Component Definition: MyTextField is the name of our component, and it extends OWL's Component class. The onChange method is responsible for updating the field value when the user interacts with it.
  • Template: The template defines the HTML structure of the widget. We use class="text-danger" to apply a red color to the input text.
  • Props and Supported Types: We define the props for our component using standardFieldProps, and we specify that this widget supports fields of type char.


Step 2: Register the Component

After defining the component, we need to register it with Odoo's field widget registry. This allows Odoo to recognize and use our custom widget.


registry.category("fields").add("my_text_field", MyTextField);


2.1 Explanation
  • Registry: The registry is a central place where Odoo keeps track of all available components, including field widgets. We use registry.category("fields").add("my_text_field", MyTextField); to map our widget name (my_text_field) to the component we created.


Step 3: Use the Widget in a View

Now that our custom field widget is defined and registered, we can use it in an Odoo view by adding the widget attribute to a field.


<field name="somefield" widget="my_text_field"/>


3.1 Explanation
  • View Arch: In your XML view definition, add the widget attribute to the field you want to render using your custom widget. In this example, somefield will be displayed using the my_text_field widget, which shows the text in red.


Conclusion

You've successfully created a custom Odoo field widget using OWL! This widget is simple yet powerful, demonstrating how you can extend Odoo's UI to fit specific needs. Whether it's to improve usability, enforce branding, or just to try something new, understanding how to create custom widgets opens up a world of possibilities in Odoo development.

Share this post
Tags
Filed Widget OWL Odoo 17 Registry