This question has been flagged
2 Replies
9113 Views
poswidgetv14OWL14.0
Avatar
Kristian Sørensen

Hi,

I need to be able to inherit an existing Owl class / component, and then add functions or override/include some functions.

I want to add a function to the Owl class: PosComponent

or be able to trigger a owl function / component from the widget framwork. 


Is there anyone thats has a sulotion to this?



Avatar
Discard
Avatar
Mai Pham
Best Answer

This is such a painful thing I have experienced. I used to search a lot for solution but I can only find a guide to create a new Owl class rather than inherit an existing one and I am a js dummy. However you can try this way:

- inherit the 'views/pos_assets_common.xml', find the entry of PosComponent.js and replace it with your new own PosComponent.js file (in your custom module)

- then in your new PosComponent.js file, you copy the origin file and add your new function

Tell me if it works, actually I think we can find the way to inherit an Owl class by diving deep into Odoo source code (I am still trying to do that and feeling the pain) and Odoo havent moved completely from old js framework to Owl, old code still there which makes me confused a lot. If one day you can find the way, feel free to share with us.

Avatar
Discard
Nayar Rodriguez

Thank you so much, this helped me a lot

Avatar
Kristian Sørensen
Author Best Answer

Thanks for your answer.

I haven't been able to inherit the PosComponent.js file, but I did found an other way to solve my issue, but it's not quiet the solution to this question.

I found out that i can inherit / override functions in components that is in the Registries class like so:

const PaymentScreen = require('point_of_sale.PaymentScreen');

const Registries = require('point_of_sale.Registries');

const MyPaymentScreen = PaymentScreen =>

class extends PaymentScreen {

constructor (){

super(...arguments);

}

onClick() {

// your code here

console.log('button clicked)

}

};

Registries.Component.extend(PaymentScreen, MyPaymentScreen);

return MyPaymentScreen;

});

<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">

<t t-name="MyPaymentScreen" owl="1">

<div class="ticket-button" t-att-class="{ highlight: props.isTicketScreenShown }" t-on-click="onClick">

<!-- <div class="with-badge" t-att-badge="count"> -->

<i class="fa fa-credit-card" aria-hidden="true"></i>

<!-- </div> -->

</div>

</t>

<t t-inherit="point_of_sale.Chrome" t-inherit-mode="extension">

<xpath expr="//OrderManagementButton" position="before">

<MyPaymentScreen t-if="env.pos.config.use_proxy" />

</xpath>

</t>

</templates>

Avatar
Discard
Dinesh

Can you add new function by this method or you can only override existing function?