Creating a Field Widget in Odoo

In Odoo, a widget serves as a user interface element designed to improve the presentation and functionality of fields within forms. These widgets are specified within the Odoo framework and can be associated with fields in the database model. They dictate the manner in which data is showcased, modified, and validated within the user interface.

Frequently employed widgets in Odoo include statusbar, many2, image, phone, selection, radio, checkbox, badge, email, URL, and more.

To create a custom widget, both an XML and a JS file are required. Let's explore the process of creating a field widget in Odoo.

JavaScript file

1. Import modules from the Owl library

/** @odoo-module **/

import { Component} from @odoo/owl";

Components are essentially classes. In Odoo, components are owl components that form part of the web client. They utilize the setup method.

2. Import the registry from the @web/core/registry module.

import { registry } from@web/core/registry";

Registries play a crucial role in extending the UI's capabilities; once an object is registered, it becomes accessible throughout the web client. The field registry encompasses all field components (or widgets) available for use in views.

3. Import _t if string translation is required.

import { _t } from "@web/core/l10n/translation"

4. If the widget is intended for an input field, import useInputField.

import { useInputField } from "@web/views/fields/input_field_hook";

5. Import standard field protocols.

import { standardFieldProps } from "@web/views/fields/standard_field_props";

6. Extend the component to create a new component named MyWidget. Define the template and props for the widget.

Template names should adhere to the convention of addon_name.ComponentName. This helps prevent name collisions between Odoo addons.

export class MyWidget extends Component { static template = "module_name.MyWidget"; static props = {...standardFieldProps, placeholder: { type: String, optional: true },

};

setup() {

// initialize the component here

useInputField({ getValue: () => this.props.record.data[this.props.name] || "" });

}

}

 

7. Export a constant variable, such as myWidget, and specify its properties.

  • component: MyWidget, defined earlier

  • displayName: It is set to the result of _t("Widget"), which suggests that this might be a translation function where "Widget" is translated based on the current language.

  • Array of supported data types for this widget

  • Proper extraction (extracting the placeholder attribute from the passed-in attributes).

export const myWidget = { 
component: MyWidget, 
displayName: _t("Widget"), 
supportedTypes: ["char"], 
extractProps: ({ attrs }) => ({ 
placeholder: 
attrs.placeholder,

}),
};

8. Include the widget in the registry of category fields.

registry.category("fields"). add("widget", myWidget);

 

XML markup
9.

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

<templates id="template" xml:space="preserve">

<t t-name="module_name.MyWidget" owl="1">

<span t-if="props.readonly" t-esc="props.value"/>

<input t-else="" t-att-value="props.value" t-att- placeholder="props.placeholder" class="o_input'/>

</t>

</templates>

 

10. Include the JavaScript and XML files in the manifest (assets -> web.assets_backend).

 

11. Implement the widget in the field.

<field name="email" widget="myWidget"/>

 

In summary, adhering to these steps enables you to develop a custom widget in Odoo, seamlessly integrating it into your modules and enriching the functionality and user experience of your Odoo applications. Custom widgets provide flexibility and customization options tailored to your unique business requirements.

Charting the Course Ahead: Delving into the Future of Container Technology