콘텐츠로 건너뛰기
커뮤니티에 참여하려면 회원 가입을 하시기 바랍니다.
모든 게시물 사용자 배지
태그 (모두 보기)
odoo accounting v14 pos v15
게시판 정보
신고된 질문입니다
4 답글
16695 화면
아바타
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;

});