HOW TO CREATE A FIELD WIDGET IN ODOO

In Odoo, a widget is a user interface component that is used to enhance the display and interaction of fields in forms. Widgets are defined in the Odoo framework and can be assigned to fields in the database model. They control how data is displayed, edited, and validated in the user interface.

Commonly used widgets in Odoo are statusbar, many2, image, phone, selection, radio, checkbox, badge,email, URL, etc.

For creating a custom widget, we need an xml and js file. Let's see how to create a field widget in Odoo.

JS File

1. Import components from the Owl library

/** @odoo-module **/

import { Component} from @odoo/owl";

Components are classes. Odoo components are simply owl components that are part of the web client. It uses the setup method.

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

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

Registries are an important part of the extensibility of the UI; once some object is registered, the rest of the web client can use it. The field registry contains all field components (or widgets) that can be used in views.

3. If string translation is needed, import _t.

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

4. If the widget is 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 and create a new component, MyWidget. Then define the template for the widget and props.

Template names should follow the convention of addon_name. ComponentName. This prevents 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, e.g., myWidget, and define 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: Add the widget to the registry of category fields.

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

 

XML template
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: Load the js and xml files in the manifest (assets- >web.assets_backend).

 

11. Use the widget in the field.

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

 

In conclusion, by following these steps, you can create a custom widget in Odoo and integrate it seamlessly into your modules, enhancing the functionality and user experience of your Odoo applications. Custom widgets offer flexibility and customization options tailored to your specific business needs.