Odoo Web Library | Creating a Field Widget

 Widgets are very useful tools available in the Odoo web library to perform certain tasks such as easy visualisation of data for better understanding by the user. There are many field widgets available in Odoo by default. Some examples are the boolean toggle for boolean fields, the date picker for date fields, and many2many_tags for many2many fields.

Let us create a custom colour picker widget that stores a colour value in an integer field.

First, we will create the integer field for storing the colour value.

Now add this field in the view of contacts form.

This would look as shown below in the Odoo contacts form.

A normal integer field with label Colour Index.

To create a widget, we need JavaScript code. For the behaviour of the widget, an xml template and CSS to define the style to define how the widget would look. Let us define how the widget would appear in the template in an XML file.

Since we have created the template of the widget, let’s give the style to the widget with the style sheet.

We have now defined how our colour selector widget would look by defining the template and its style. Now we have to define how our widget will behave on user interaction using JavaScript. Let’s create the JavaScript code for the widget.

Since we have created the JavaScript, XML template, and style for the widget, we have to add it to assets so that Odoo can access these definitions to render our widget whenever it is called upon. Let’s add it to our assets using the manifest file.

Since the definitions of our field widget are now completed, let’s now add it to our field.

Upon upgrading the module we can see that our integer colour field would have changed as shown below.

Here we can select one color and the corresponding value will be stored in the integer field.

Using this method we can create our custom widgets add them to the Odoo web library and use them whenever required.

Widgets can simplify a user’s task by creating user-friendly widgets. That looks simple and easy to use, thus simplifying a task that might not be as easy as it seems when using a widget. We can reuse more useful widgets as required since widgets that are pleasing to users always appreciate the eyes and are easily understandable and usable.

Request Your Free Quote