odooodoo-technicalonline video tutorial

Odoo: How to Add Custom Button on Tree View

Example, to add “Sync Data” button at the Employee list view.
It will execute the existing “cron_process_staging” method on “hr.employee” model.
Assume your module name is “vit_staging”.

1.Inherit theListView QWeb Template

Create qweb template that inherits the Odoo ListView template, save to static/xml/qweb.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates id="sync_template" xml:space="preserve">
 <t t-extend="ListView.buttons">
 <t t-jquery="button.o_list_button_add" t-operation="after">
 <t t-if="widget.model == 'hr.employee'">
 <button class="btn btn-sm btn-default sync_button" type="button">Sync Data</button>
 </t>
 </t>
 </t>
</templates>

 

2. Load the Template

Load that qweb from manifest file:

"qweb":[
 "static/src/xml/qweb.xml",
 ],

3. Create JS Handler

Create JS onclick handler of that button, save to static/src/js/sync.js

openerp.vit_staging = function(instance) {
 var ListView = instance.web.ListView;
 ListView.include({
 render_buttons: function() {

// GET BUTTON REFERENCE
 this._super.apply(this, arguments)
 if (this.$buttons) {
 var btn = this.$buttons.find('.sync_button')
 }

// PERFORM THE ACTION
 btn.on('click', this.proxy('do_sync'))

},
 do_sync: function() {
 new instance.web.Model('hr.employee')
 .call('cron_process_staging', [[]])
 .done(function(result) {
 alert('done')
 })
 }
 });
}

4. Load the JS File from Web Asset

Load the JS file from web assets, save to view/web_asset.xml

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

<odoo>
 <data>
 <template id="assets_backend" name="x_export_view assets" inherit_id="web.assets_backend">
 <xpath expr="." position="inside">
 <script type="text/javascript" src="/vit_staging/static/src/js/sync.js"></script>
 </xpath>
 </template>
 </data>
</odoo>

 

5. Load the Web Asset

Load the web asset from manifest:

"data": [
 "view/web_asset.xml",
 ],

 

6. Done!

Install your addon.

 

For more information on advanced Odoo programming techniques, please visit our Training Classes.