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>


2. Load the Template

Load that qweb from manifest file:


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;
 render_buttons: function() {

 this._super.apply(this, arguments)
 if (this.$buttons) {
 var btn = this.$buttons.find('.sync_button')

 btn.on('click', this.proxy('do_sync'))

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

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"?>

 <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>


5. Load the Web Asset

Load the web asset from manifest:

"data": [


6. Done!

Install your addon.


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