A guide to Patching existing OWL components in Odoo 17

How to Patch an Existing OWL Component

The OWL framework in Odoo 17 is to create web interfaces for numerous modules. On sometimes, you may need to modify the behavior of an existing OWL component without changing it entirely.

How Does the Patching Work?

The Patching lets you modify the behavior of an existing method without having to replace it entirely. The "patch" method in the framework can be used to patch in OWL. The patch method requires two arguments:

Which class or item requires a patch?

1 - The class or object that requires patching
2 - An object with the recently added property or method

Patching a Widget Order Component

To add the total number of items in the order line to the Odoo order summary in Odoo 17 Point of Sale (POS), let's edit the 'OrderWidget' component, which is in charge of the order summary.

The 'OrderWidget' component needs to imported before we can apply the change.

import { OrderWidget } from "@point_of_sale/app/generic_components/order_widget/order_widget";

Also, we need to import the patch
import { patch } from "@web/core/utils/patch";
The view that will show the overall count in the order summary must then be inherited.

1. <t t-name="bi_pos_order.OrderWidget" The XML template "bi_pos_order.OrderWidget" is created by this line.

2. "t-inherit="point_of_sale.OrderWidget" The attribute t inherit="point_of_sale.OrderWidget" signifies that this template is inheriting the features of an already-existing template called "point_of_sale.OrderWidget."

3. t-inherit-mode="extension" This property indicates that the new template should inherit the already existing template's functionality instead of totally replacing it.

4. owl="1" Designate this template as an owl.

5. <xpath expr="//div[hasclass('order-summary')]" position=" inside"> This section should specify where the adjustments will be made. The placement of the changes needs to be inside a <div> element with the class "order-summary," as indicated by the position="inside".

6. Total Quantity The language that follows, displayed as a label, defines the value that comes next.

7. <span class="value"> Utilizing the CSS class "value," this constructs a <span> element to contain the value of "Total Quantity."

8. <t t-esc="TotalQuantity"/> This section dynamically inserts the value of "TotalQuantity" into the HTML. A function called TotalQuantity is defined inside the OrderWidget component. The value of "TotalQuantity" will be shown by this code in the HTML output.

Get a Free Odoo Consultation

Next, let's add a function to calculate the total count of the orderline product amounts by patching the OrderWidget component.

This code extends or modifies the OrderWidget prototype by adding a getter method called TotalQuantity through the use of the patch function. To get the total number of items in the order, this function adds up the amounts of each line that are stored in the props.lines array. After that, it gives that sum back. This facilitates the U1 presentation of the whole quantity.

The view following the addition of a product,

The total number of quantities in the POS order has been displayed in the order summary.

Patching is an effective method for non-intrusively changing the behavior of third-party programs. In this blog post, we examined a patching example for the Odoo web framework's OrderWidget in the POS class.

You can confidently deploy patches to the Odoo web framework and modify them to meet your unique requirements by following the instructions provided here. so this is all about how to Patching the existing OWL components in Odoo 17 if you have any doubts on it feel free to contact us