blog

create a field-widget-in-odoo-web-libraryo
News & Events

 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.

storing-colour-value

Now add this field in the view of contacts form.

view-of-contacts-form

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

odoo-web-library-contact-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.

template-in-xml-file

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

template -of-the-widget

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.

JavaScript-code

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.

manifest-file

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

odoo-web-library

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

integer-colour-field

And here we can select one colour and the corresponding value will store in the integer field.

Using this method we can create our own custom widgets and 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat
1
Hello, can we help you?