A Widget's Override in Odoo 14 PoS

One of the most important Odoo ERP modules is the point of sale. We may learn how to override a widget in POS in this blog. We need to understand what a widget is before we start programming. The most crucial component of a user interface is a widget, or, to put it another way, in Odoo, a widget is used to govern the majority of the user interface’s elements. In essence, a widget can be linked to a template. Let’s examine how it functions now. Upon initialization, the widget will render the template and add it to the user interface. I’m planning to replace the EditListPopup widget in this place. Let’s now examine what happens when we select “Ok” from the Lot and serial number dialogue and how an error popup appears.

We will now develop a unique module. Below is a diagram of the custom module structure.

Under the static folder, the src folder and the js folder are both created.

All js files are located in the js subdirectory. In order to inherit the assets, create a folder called views.

File in XML: template.xml

In point of sale, all the scripts are loaded into a template called an asset. We need to load our js file and inherit this template. The template we develop to inherit point-of-sale assets is this one. The location to the js file needs to be specified inside the script tag.

<t t-name="Asset" inherit_id="point_of_sale.assets"> 

<!-- Inherit Point of Sale assets --> 

<!-- Load widget override.js file --> 

<script type="text/javascript" src="/custom_module_name/static/src/js/widget_override.js"></script> 

widget_override.js is a file.

We need to extend the EditListPopup first. The serial and lot number operation of the products in your company is displayed in the Editlist popup. Here is an example of an EditListPopup.

odoo.define('custom_module_name.widget_override', function (require) { 

"use strict"; 

var core = require('web.core'); 

var EditListPopup = require('point_of_sale.EditListPopup'); 

  

EditListPopup.include({ 

    // code to display error popup when OK button is clicked 

    // set the title and content as per the requirement 

    // add to the registries 

}); 

});

The EditListPopup widget must first be extended, and code must be written to display an error popup when the OK button is clicked. According to our demands, we may set the title and content that we want to see inside the error popup here. Add it to the registries after that.

The error box that appears after clicking the “OK” button is this. To demonstrate how to override a widget, I’ve just placed an ErrorPopup here. This enables us to modify a widget and add anything we want.