How to Override Widget in an Odoo 17 Point of Sale

Odoo POS (Point of Sale) is V17 a flexible trading tool incorporating a part of the ACE (All-In-One Control Environment) Odoo ERP system. One can note that it has perfect integration with other applications such as Odoo, real stock management, customer programs, and multi-stores. The POS interface is easy to use and is fully compatible with online and offline operations; thus, the system is suitable for various stores.

 Here in this Odoo 17 POS Blog, I will be explaining to you how you can override a widget. Modules in Odoo 17 POS are basic parts that interface several aspects of the GUI, thereby improving usability. They are associated with templates which they execute and draw into the interface during creation. Thus, this concept makes it possible for a client to have a convenient UI that fits their needs and demands as they enhance the POS system’s functionality.

 To override a widget, we first modify it or replace it with a new widget.

The first thing to do is to erect a fresh module for this end.

To extend a widget in the most basic of forms, all you’ll need is one JavaScript file. Name this file under the pos_widget_override > static > src > js directory. Also, do not forget to list this JavaScript file in the files array of the manifest file as well.

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

We can now append the code to eliminate the JavaScript file for the Orderline widget. Here, it overlays the Orderline widget and adds the functions for discount operations. Following is the format to extend a widget, where you can place 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 done some work on the Orderline in the POS and have now enhanced the Orderline further. Particularly, we are going to override the widget for the Orderline cases applying the discount. In case the discount rate goes beyond seventy-five per cent, a confirmation pop-up should be presented.

 To do this, the ConfirmPopup widget is imported. We then override the set_discount() method which is the one that has the responsibility of setting the discount for a product to encompass 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 me dem– Let’s see it in action.

 Here, in the POS one can observe the order line with several product Offers included in it.

If a specific order line is selected and the discount is set to be above 75%, the pop-up confirmation will be there.

This makes sure that the user reaffirms the large discount before it is taken off the price.

In this updated tutorial, I have written a section on overriding an existing widget in Odoo 17, with a popup widget case. This shows how to extend and tailor Odoo in this specific sector or any other sector of one’s choosing.