NOTE !!! This tutorial is written for odoo 14. It is possible that it may not work properly on other versions of odoo.
Another example of a widget is the image widget, which is usually used to display images on the master product.
console.log('hello world !');
Next, in the widget_one.js file, call the odoo.define function with the first argument being a string. This string will be used as a marker so the widget that we write can be inherited or overridden by other modules. This string must be unique, therefore usually the writing format is the name of the module followed by any text.
The second argument is a function where our’s widget code should be written.
All widgets must extend to AbstractField object or its child. It also must be added to the field_registry object. So let’s import those two objects first.
When creating a widget, always enter to debug mode and activate the developer tools, to find out if there are errors. This is an image example that shows the odoo error message when we create a widget.
The above error message occurs because the web.AbstractFields object was not found due to a typo, the correct object should be web.AbstractField without the ‘s’ at the end of the object name.
To create a template, first, create an xml file then write code like the code below.
<?xml version="1.0" encoding="UTF-8"?> <template> <t t-name="WidgetOneTemplate"> <div> <t t-if="widget.mode == 'edit' "> <p>This is the widget view in edit mode (the user is editing the document)</p> </t> <t t-if="widget.mode == 'readonly' "> <p>This is the widget view in readonly mode (the user only sees the document)</p> </t> </div> </t> </template>
A widget has 2 modes, it is the edit mode where the user is pressing the Create or the Edit button, so he can change the contents of the document. And the readonly mode where the user can only see the document. So we have to prepare 2 different views for these two modes.
Next, save the xml file above in the your_module_name/static/src/xml directory. And don’t forget to load it in the __manifest__.py file.
The directory structure of the module that we created and the contents of the __manifest__.py file will look like below.
Then we just need to write the actual widget code. Please read the code below and pay attention to the comments section.
Then we can directly use the widget that we have created in the odoo xml/view file using the code as below.
If your code doesn’t have an error it will look like this.
In edit mode the widget template will always appear. But in readonly mode, if the value of the field that use the widget that we create is null or False, the view will be blank. So make sure to fill the field value so the readonly example view mode in this tutorial can be seen. You can change it via the database or give the field a default value like in the code below.
field_one = fields.Integer('Field One', default=1)
You need to remember that when you edit any files in the static directory, in this case including the js, css, and xml files, you don’t need to upgrade the module that you created. Just restart your odoo service and refresh the browser.