Skip to Content
คุณต้องลงทะเบียนเพื่อโต้ตอบกับคอมมูนิตี้
All Posts คน เหรียญรางวัล
แท็ก (View all)
odoo accounting v14 pos v15
เกี่ยวกับฟอรั่มนี้
คำถามนี้ถูกตั้งค่าสถานะ
4 ตอบกลับ
16699 มุมมอง
อวตาร
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');
    },
});
อวตาร
ละทิ้ง
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.

อวตาร
Oleh Diatlenko
คำตอบที่ดีที่สุด

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);
    }
  });
});

อวตาร
ละทิ้ง
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.

อวตาร
Levenez Morgan
คำตอบที่ดีที่สุด

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

อวตาร
ละทิ้ง
อวตาร
Christian Belewete
คำตอบที่ดีที่สุด 
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;
อวตาร
ละทิ้ง
Oleh Diatlenko

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

อวตาร
Evelb Tecnicas Y Sistemas Sl.
คำตอบที่ดีที่สุด

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>
อวตาร
ละทิ้ง
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;

});