Odoo Help

0

[v8.0]How to override a widget

By
Thanh Loyal
on 1/20/16, 11:26 PM 1,551 views

Hello,

I need to add a few things to the Point of sale screen. In details, I need to add some custom HTML elements to ClientDetails widget. I know that the widget is defined in point_of_sale/static/src/xm/pos.xml, <t t-name="ClientDetails">. If I modify code there, changes will be made immediately. But I don't want to hack into the core. I want to write a custom module to modify (override) that widget.

I did read these:

https://www.odoo.com/documentation/8.0/howtos/web.html

and "template inheritance" in:

https://www.odoo.com/documentation/8.0/reference/qweb.html#calling-sub-templates

but still don't know how to do that.

Please help.

Thank you!

1
Axel Mendoza
On 1/21/16, 2:48 AM

It's not the same, those docs refers to qweb templates in other scenarios like reports and qweb, your situation involve qweb templates for js views and there are some diferences.

In your custom module you need to create an xml file for define the client qweb templates, new or extensions in a path below /static/ conventions use /static/src/xml/

In that file you need to define your templates definitions. For your case you could just copy and paste the original template to change it in place like:

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

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

<t t-name="ClientDetails">

<section class='client-details'>

<div class='client-picture'>

<img t-att-src='widget.partner_icon_url(partner.id)' />

</div>

<div class='client-name'><t t-esc='partner.name' /></div>

<div class='edit-buttons'>

<div class='button edit'><i class='fa fa-pencil-square' /></div>

</div>

<div class='client-details-box clearfix'>

<div class='client-details-left'>

<div class='client-detail'>

<span class='label'>Address</span>

<span class='detail client-address'><t t-esc='partner.address' /></span>

</div>

<div class='client-detail'>

<span class='label'>Email</span>

<span class='detail client-email'><t t-esc='partner.email' /></span>

</div>

<div class='client-detail'>

<span class='label'>Phone</span>

<t t-if='partner.phone'>

<span class='detail client-phone'><t t-esc='partner.phone' /></span>

</t>

<t t-if='!partner.phone'>

<span class='detail client-phone empty'>N/A</span>

</t>

</div>

</div>

<div class='client-details-right'>

<div class='client-detail'>

<span class='label'>Barcode</span>

<t t-if='partner.ean13'>

<span class='detail client-id'><t t-esc='partner.ean13'/></span>

</t>

<t t-if='!partner.ean13'>

<span class='detail client-id empty'>N/A</span>

</t>

</div>

<div class='client-detail'>

<span class='label'>Tax ID</span>

<t t-if='partner.vat'>

<span class='detail vat'><t t-esc='partner.vat'/></span>

</t>

<t t-if='!partner.vat'>

<span class='detail vat empty'>N/A</span>

</t>

</div>

</div>

</div>

</section>

</t>

</templates>

next you need to register that file to be loaded in the __openerp__.py under the key 'qweb'.
This only will change the widget visually, if you need to change some other behavior you will need to do it using js widget inheritance. 

Hi Axel Mendoza, thank you for your answer. I think copy and paste template from original module to custom module is one method and it works. But I prefer the "extend" way. I made mistakes and that's why my code did not work. I reviewed and edited it and now my new element shows up. All I have to do is extending the ClientDetails template like this: My Custom Element

Thanh Loyal
on 1/21/16, 3:35 AM

Oops! I am not familiar with the editor of this forum. I even can't edit my comment. Here is the code:


    
        
            Lịch sử mua hàng
        
    

Thanh Loyal
on 1/21/16, 3:41 AM

Oh, no. I'm gonna post to an answer. :D

Thanh Loyal
on 1/21/16, 3:55 AM

Then you have solve it?

Axel Mendoza
on 1/21/16, 4:18 AM

New button shows up but click does not work.

var historyButton = this.$el.find("#history_button");
console.log(historyButton);   //  
Thanh Loyal
on 1/22/16, 9:55 PM

var historyButton = this.$el.find("#history_button"); console.log(historyButton); // [prevObject: jQuery.fn.jQuery.init[1], context: undefined, selector: "#history_button"] // BUT historyButton.click(function () { console.log("Clicked. Now show history"); // does not work. });

Thanh Loyal
on 1/22/16, 9:58 PM
0
Thanh Loyal
On 1/21/16, 3:52 AM
<templates id="template" xml:space="preserve">
  <t t-extend="ClientDetails">
<t t-jquery="div.edit-buttons" t-operation="prepend">
<span class="sc_button sc_history">Custom element</span>
</t>
</t>
</templates>

About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

Register

Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

2 follower(s)

Stats

Asked: 1/20/16, 11:26 PM
Seen: 1551 times
Last updated: 6/20/16, 10:40 AM