How to Override Widget in the Odoo 17 POS

Odoo POS (Point of Sale) V17 is a versatile retail management solution within the Odoo ERP system. It integrates seamlessly with other Odoo applications, providing real-time inventory management, customer loyalty programs, and multi-store management. The POS interface is user-friendly and supports both online and offline operations, making it ideal for diverse retail environments.

In this blog, we will explore how to override a widget in Odoo 17 POS. Widgets in Odoo 17 POS are essential components that manage various user interface elements, enhancing functionality and user experience. They are linked to templates, which they render and integrate into the interface upon initialization. This modular approach allows for flexible and dynamic UI customization, making it easier to tailor the POS system to specific business needs.

To override a widget, we start by patching the existing widget. First, let's create a new module for this purpose.

To extend a widget in the simplest way, you only need one JavaScript file. Create this file under the pos_widget_override > static > src > js directory. Additionally, make sure to include this JavaScript file in the manifest file.

'assets': {
   'point_of_sale._assets_pos': [
       'pos_widget_override/static/src/js/pos_widget_override.js',
   ],
},

We can now add the code to override the JavaScript file for the Orderline widget. Here, we patch the Orderline widget to include the necessary functions for discount operations. Below is the basic structure for extending a widget, where you can add the related functions.

/** @odoo-module */
import { Orderline } from "@point_of_sale/app/store/models";
import { patch } from "@web/core/utils/patch";
patch( Orderline.prototype, {
   setup() {
       super.setup(...arguments);
   },
});

We have patched the Orderline in the POS and are now adding additional functionality. Specifically, we want to override the widget for the Orderline when applying a discount. If the discount exceeds 75%, a confirmation popup should appear to verify the discount.

To achieve this, we import the ConfirmPopup widget. We then override the set_discount() method, which is responsible for setting the product discount, to include the confirmation logic.

/** @odoo-module */
import { Orderline } from "@point_of_sale/app/store/models";
import { patch } from "@web/core/utils/patch";
import { ConfirmPopup } from "@point_of_sale/app/utils/confirm_popup/confirm_popup";
import { _t } from "@web/core/l10n/translation";
patch( Orderline.prototype, {
   setup() {
       super.setup(...arguments);
   },
   async set_discount(discount) {
       if (discount >= 75){
            const { confirmed } = await this.env.services.popup.add(ConfirmPopup, {
               title: _t("Discount is more than 75%?"),
               body: _t("Are you sure that the Discount entered for the product is %s %",discount),
           });
           if(!confirmed){
           return
           }
       }
   super.set_discount(...arguments);
  },
});

Let's see it in action.

Here, we can see the order line in the POS, which contains several products.

When selecting an order line and setting the discount above 75%, a confirmation popup will appear to verify the discount. This ensures that the user confirms the significant discount before it is applied.

I've added a section on how to override an existing widget in Odoo 17, including a popup example. This demonstrates the process of customizing and extending Odoo's functionality.

To read more about How to Override a Widget in the Odoo 16 PoS, refer to our blog How to Override a Widget in the Odoo 16 PoS.