Skip to Content
This question has been flagged
4 Replies
16631 Views
Avatar
ivan deng

hi, anyone know that,


if we want to patch a owl class, like 'searchpanel'.  how to do that?


===========

like that In odoo 13, we use include. 


Patching an existing class

It is not common, but we sometimes need to modify another class in place. The goal is to have a mechanism to change a class and all future/present instances. This is done by using the include method:


var Hamster = require('web.Hamster');

Hamster.include({
    sleep: function () {
        this._super.apply(this, arguments);
        console.log('zzzz');
    },
});
Avatar
Discard
Ray

Please go through this, may help you

https://odoo.github.io/owl/playground/

Marcelo Pereira

I have the same question, anyone found right way to do this?

Kasbaji nassr allah

It did work thank you !

Oleh Diatlenko

I'm glad it helped you.

Avatar
Oleh Diatlenko
Best Answer

odoo.define('my_module/static/src/js/search_bar.js', function (require) {
  'use strict';

  const { patch } = require('web.utils');
  const components = {
    SearchBar: require('web.SearchBar')
  };

  patch(components.SearchBar, 'my_module/static/src/js/search_bar.js', {
    _onSearchInput(ev) {
      // do some stuff here
      return this._super(...arguments);
    }
  });
});

Avatar
Discard
Kasbaji nassr allah

Thanks for the response, but the way you did it only overrides an existing function, how would you add a new function to an existing class?

Oleh Diatlenko

Have you tried to add new methods this way? In this example, I updated the existing method indeed. But in our project, I also added a new method just next to the _onSearchInput method, and access to it using "this". Hope that helped you. And yeah, if that doesn't help, you can do it using monkey-patch - I think someone else already added an example.

Avatar
Levenez Morgan
Best Answer

BEST WAY
https://eurodoo.com/blog/eurodoo-blog-1/how-to-override-js-function-in-odoo14-owl-5

Avatar
Discard
Avatar
Christian Belewete
Best Answer 
const Registry = require('web.Registry');
const Hamster = require('web.Hamster');
const ExtendedHamster = (Hamster) =>
    class extends Hamster {
        sleep() { 
            super.sleep(...arguments); 
            console.log('zzzz');
         }
    }
Registry.Component.extend(Hamster, ExtendedHamster);
return ExtendedHamster;
Avatar
Discard
Oleh Diatlenko

monkey-patching should work indeed, but odoo developers suggest using the patch method instead.

Avatar
Evelb Tecnicas Y Sistemas Sl.
Best Answer

After saying Shurshilov's example i work a litle to find a proper solution. Here you can find a complete example.

Thanks Shurshilov!

.js file

\\ \\\
\\ \\\ 

odoo.define('mail_message_select/static/src/js/mail_message_select.js', function (require) {
'use strict';
/*
 - Add new owl.Context variable 'selectedMessage' to mail environment to control which message is selected.
 - Add new Context selectedMessage reaction to Message component to control message selected appearance.
 - Add new property dummy_property_example to illustrate how to add a new property.
 - Overwrite _onClick Message component to save in the Context clicked message as selected.
 - Create new get isSelectedMessage method accessible from template.
*/
const {Context} = owl;
const {useContext} = owl.hooks;
const DiscussWidget = require('mail/static/src/widgets/discuss/discuss.js'); // Where the mail environment is created
const MessageList = require('mail/static/src/components/message_list/message_list.js'); // Message's parent component
const oldMessage = require('mail/static/src/components/message/message.js'); // Component what we want inherit
DiscussWidget.include({
  willStart: async function () {
  await this._super(...arguments);
this.env.selectedMessage = new Context({localId: undefined});
  },
});
class newMessage extends oldMessage {
  constructor(parent, props) {
  super(parent, props);
this.selectedMessage = useContext(parent.env.selectedMessage);
/* Here you can add useState, useRef... */
}
  _onClick(ev) {
  super._onClick(ev);
this.env.selectedMessage.state.localId = this.props.messageLocalId;
  }
  get isSelectedMessage () {
return (this.env.selectedMessage.state.localId === this.props.messageLocalId);
  }
};
/* here you can add new properties like:
newMessage.props['dummy_property_example'] = {type: Boolean, optional: true};
*/
MessageList.components.Message = newMessage; // Apply the new inherited component to parent
});

.css file

.o_mail_message_select {
 background-color: lightgray;
}

.xml template

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-inherit="mail.Message" t-inherit-mode="extension">
        <xpath expr="//div[hasclass('o_Message')]" position="attributes">
            <attribute name="t-att-class">{
                'o-clicked': state.isClicked,
                'o-discussion': message and (message.is_discussion or message.is_notification),
                'o-mobile': env.messaging.device.isMobile,
                'o-not-discussion': message and !(message.is_discussion or message.is_notification),
                'o-notification': message and message.message_type === 'notification',
                'o-selected': props.isSelected,
                'o-squashed': props.isSquashed,
                'o-starred': message and message.isStarred,
                'o_mail_message_select': isSelectedMessage,
                }</attribute>
        </xpath>
    </t>

</templates>
Avatar
Discard
Levenez Morgan

I made the solution on classes, not prototypes. Since a separate difference between an owl is that it consists of native classes.

Evelb Tecnicas Y Sistemas Sl.

Shurshilov, could you publish your solution, please?

Levenez Morgan

odoo.define('attachments_manager/static/src/components/attachment_box_custom/attachment_box_custom.js', function (require) {

'use strict';

const patchMixin = require('web.patchMixin');

const CustomAttachmentBox = patchMixin(require('mail/static/src/components/attachment_box/attachment_box.js'));

const Chatter = require('mail/static/src/components/chatter/chatter.js');

const { Component, useState } = owl;

const { useRef } = owl.hooks;

CustomAttachmentBox.patch('attachments_manager.attachments_box', T => class extends T {

constructor(...args) {

super(...args);

this.state = useState({

hasFavoritesDialog: false,

hasWebcamDialog: false,

snapshot: ''

});

this._amNewRef = useRef('am-new');

}

});

Chatter.components.AttachmentBox = CustomAttachmentBox;

return Chatter.components.AttachmentBox;

});