How to Extend Field Widget in Odoo 16

Odoo 16 has an enabling feature of extending field widgets as it tends to enhance the functionality of specific modules. This field widget extension in Odoo 16 succeeds in the process of widget creation. So, here is a complete guide that tells how to create a field widget followed by how one can extend the same in Odoo 16.

Creating a New Widget in Odoo 16

Step 1 - The process of field widget creation begins by creating a new JavaScript file in the module’s static/src/js directory.

Step 2 - Thereafter, you must cause to import the standardFieldProps object from the @web/views/fields/standard_field_props module into this file.  

Step 3 - The next step is importing the Component Class from the Owl Library.

Step 4 - For the purpose of extending the Component Class here you need to define a new class.

Step 5 - Within the setup mechanism of this New Class you need to set the trueValue, falseValue, trueColor, falseColor, and defaultColor props. What is noteworthy at this juncture is that you can also initialize any other state that the widget may require.

Step 6 - Here the update value method can also be utilized in case the field value gets modified. Please note that this given step will help to update the state of the widget.

Step 7 - The next critical aspect in the run-up to extending the field widget is registering the widget class with Odoo 16.

Step 8 - To render the widget you also need a template prop that will fetch the name of the template file. It is pertinent to say that the props themselves will specify the prop permitted by the widget.

Step 9 - On the same lines, the supported types prop will specify the fields that can be used with the widget.

Step 10 - Finally, it is time to create a template file. To get this done, simply create a new static/src/xml directory of your module with the relevant code related to the template.

Step 11 - Eventually, the template will start reflecting the badge values in accordance with the value of the field.

Step 12 - Now, with the creation of JavaScript and XML files you can start accessing the same in Odoo 16.   

Here is How you Can Extend the Field Widget in Odoo 16

Step 1 - Extending the field widget facilitates customizing the appearance of the widget along with the text being displayed.

Step 2 - For this, you ought to create an all-new JavaScript file in the static/src/js directory pertaining to the specific module.

Step 3 - Continue by importing the widget from the already-in-place module.  

Step 4 - What you need to execute here is to define a new class that is responsible for extending your specific widget.

Step 5 - Further, you are required to add a new prop so as to store the value of the option. You can also opt to implement any customizations for the given option.

Step 6 - Finally, the purpose of extending the field widget in Odoo 16 ends with registering your new widget in the Registry Module.