Odoo Help

Welcome!

This community 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.

0

[v8.0]How to override a widget

By
Thanh Loyal
on 1/20/16, 11:26 PM 779 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

--Axel Mendoza--
10203
| 7 7 8
Camaguey, Cuba
--Axel Mendoza--

DevOps - Full stack - Software Architect - Developer - Technology Integrator

I could help you to develop anything and solve complex problems based on technologies, integrations and tricky stuffs mostly in Python with OpenERP/Odoo, Zato, Django and many others frameworks programming languages and technologies.

I offers consulting services to anyone with an unanswered questions or needs for customizations. Think about it, maybe it's better to have an expert to solve your issues and projects than having a full time employee trying to understand what to do an how

Reach me at aekroft@gmail.com

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>

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

2 follower(s)

Stats

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