Patching is a way to modify the behavior of an existing method without overriding it completely.

Patching can be achieved using the "patch" method provided by the framework. The patch method takes three arguments:

• The object or class to be patched

• The name of the method to be patched

• An object containing the new method or properties to be added

patch(obj, patchName, patchValue, options) Using this method, we can modify the existing behavior of the method or add new properties to the object or class.

We can also override, update or extend existing XML templates. You just have to create your own template, with a unique ID, then use the inherit_id property to match on the template you want to update, then you can supply an xpath expression to match the part of the template you want to alter.

Your options for position are then:

• inside
• after
• before
• replace
• attributes

For example, to add something to a list, do this:

<template id="my_id" inherit_id="module.template_id">
  <xpath expr="//div[hasclass('class_name')]" position="after">
    <li> Something </li>
  </xpath>
</template>

But to completely replace the list with something else, you'd do this:

<template id="my_id" inherit_id="module.template_id">
  <xpath expr="//div[hasclass('class_name')]" position="replace">
    <ol>
      <li> Something </li>
    </ol>
  </xpath>
</template>

In this document, we will try to inherit Odoo's ErrorDialog, add a custom button inside the dialog and incorporate a custom function for our custom button using OWL's patch method.

We will be adding the custom button under "Copy the full error to clipboard" button.

First we will inherit the template of the ErrorDialog by creating an xml file under your /custom_module/static/src/xml directory.

In the xml file create a custom template and set the following:

• Name of the custom template (t-name="it_support.ErrorDialogBodyInherit") - it is best to use this format custom_module.TemplateName
• Inherit the parent Template (t-inherit="web.ErrorDialogBody")
• Set inherit mode to extension (t-inherit-mode="extension")
• Set owl to 1 (owl="1")

Then

Add your custom button inside the xpath tags:

• xpr="//div[@role='alert']//div//button" ("Copy to clipboard" button's position in the parent template),
• position="after" (since we want our custom button to be placed after the "Copy to clipboard" button).

Once everything is all set our xml file will look like this.

Note that we added t-on-click="onClickTicket" in our button this will be our button's custom function but more of that later.

After completing your template inheritance don't forget to add your xml file in custom module's manifest file under assets web.assets_qweb.

Try to upgrade your custom module and generate an error. The new ErrorDialog should look like this.

Next we need to create a js file to add our OWL patching process and the custom function for our button. Create a js file under your /custom_module/static/src/js directory.

• set /** @odoo-module */ at the top of your js file so that odoo will know we will be using owl functionalities for this js file.
• import the error_dialogs js from the web module so that we can access ErrorDialog class.
• import the patch js from the web module so that we can access patch function.

• use the OWL patch function patch(obj, patchName, patchValue, options).

setup is run just after the component is constructed. It is a lifecycle method, very similar to the constructor, except that it does not receive any argument. It is the proper place to call hook functions. Note that one of the main reason to have the setup hook in the component lifecycle is to make it possible to monkey patch it. It is a common need in the Odoo ecosystem. -OWL's documentation

Your completed js file should look like this.

After completing your patching process and adding of custom function don't forget to add your js file in custom module's manifest file under assets web.assets_backend.

Try to upgrade your custom module and generate an error.

Now we will be testing the functionality of the button, upon clicking the custom button a 'Click' message should appear in the browser's console (Check the browser's console using inspect/inspect element or press f12).

It should look like this.