How to override js function in odoo14 owl?

 

History before OWL

Extends

We are all used to the fact that odoo js has two inheritance mechanisms extends and include. Extends allows you to do classic class inheritance without changing the parent but makes a copy, sometimes this is useful.

Include

But most often Include was used, it allowed changing the parent thereby adding new functions, changing behavior and so on.

OWL override

Extends

Extends directive did not change its behavior in OWL, it happened by accident, since OWL uses classes from the js core (which appeared in the latest ECMA js versions), and the classes support inheritance. Backbone is what it was before OWL, extends was due to a self-written class library that added the ability to work with classes in js. In the new core, I repeat, js this comes out of the box

Include owl

But now the most interesting thing, there is no include in OWL, but there is an analogue const { patch } = require('web.utils'); It allows you to do exactly the same thing as include. Here is some sample code:

odoo.define("mymodule.SearchBar"function (require) {
    "use strict";

    const { patch } = require('web.utils');
    const SearchBar = require("web.SearchBar");
  
    // New Component
    patch(SearchBar'mymodule.SearchBar', {
        _parseWithSource(rawValue, { type }) {
            let parsedValue = this._super(rawValue, { type })

            // one unique line
            parsedValue = parsedValue.trim();
            return parsedValue;
        }
    });
});

OWL model data override


This works in 99% of cases when we need to override something, but there are rare exceptions, such as in the mail module, overriding the owl data model class.

But almost all the code is not data models, but ordinary classes)

const patchModel = require('mail/static/src/model/model_core.js');

patchModel.registerFieldPatchModel('mail.attachment','my_name_module.js', {
    create_uid: attr(),
    create_date: attr(),
    file_size: attr(),
    public: attr(),
    is_favorite: attr(),
    website_visible: attr(),
})


Accessing a field, model by group, rules and condition