Help

3

Add Custom Button To List View Header

Avatar
Daniel Kauffman

In Odoo, when viewing a model in list view, buttons to "Create or Import" are usually displayed near the top of the page. Instead of these buttons, how would I display a custom button in this exact location on the page, when viewing my model in list view? I have a model that is read-only and would like to display a button to force synchronization of the model.

Avatar
Discard
5 Answers
5
Avatar
Axel Mendoza
Best Answer

This require to develop an extension in the template and javascript widget, like this:

You need to include a template that insert the button like:

<t t-extend="ListView.buttons">
<t t-jquery="button.oe_list_add" t-operation="after">
<button class="oe_button oe_new_button oe_highlight" type="button">New Button</button>
</t>
</t>

Next you need to extend the widget ListView like this:

instance.web.ListView.include({
    load_list: function(data) {
if (this.$buttons) {
this.$buttons.find('.oe_new_button').click(this.proxy('do_new_button')) ;
}
},
do_new_button: function () {
//implement your clic logic here  
}
});

This is an example of course

5 Comments
Avatar
Discard
Avatar
Daniel Kauffman
-

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

Avatar
Axel Mendoza
-

see an example in the updated response

Avatar
Andre de Kock
-

Will this code add the button for *all* tree views?

Avatar
Axel Mendoza
-

Yes. But you could restrict the visibility using options for the template

Avatar
Ưng Tú
-

thanks for your solution but when i click on button, show error: "Traceback:

Error: Couldn't find method 'do_new_button' in widget". Can u show me when my error

Thank you agian and have a nice day

2
Avatar
Taha ZIADEH
Best Answer

In Odoo 11, here is how to achieve this:
Let's say we want to add special filtering functionality through a button
First create a template that is responsible of displaying the button :

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

<template xml:space="preserve">

<t t-extend="ListView.buttons">

<t t-jquery="button.o_list_button_add" t-operation="after">

<button t-if="widget.modelName == 'your.model.name'" type="button" class="btn btn-primary btn-sm oe_filter_button" accesskey="f">

Advanced Filters

</button> 

</t>

</t>

</template>

P.S.:Don't forget to add the file containing the above template to the manifest
So far the button will be available but not functional. In order to make it functional, you have to add javascript support for its click event :

odoo.define('whatever.filter_button', function (require) {

"use strict";

var core = require('web.core');

var ListController = require('web.ListController');

ListController.include({

renderButtons: function($node) {

this._super.apply(this, arguments);

if (this.$buttons) {

let filter_button = this.$buttons.find('.oe_filter_button');

filter_button && filter_button.click(this.proxy('filter_button')) ;

}

},

filter_button: function () {

console.log('yay filter')

//implement your click logic here

}

});

})

Then, load the javascript file you wrote as a script like:

<template id="assets_backend" name="whatever_name assets" inherit_id="web.assets_backend">

<xpath expr="." position="inside">

<script src="/your_module_name/static/src/js/filter_button.js" type="text/javascript"/>

</xpath>

</template>

For further implementation details, don't hesitate to post your comments or questions :)

1 Comment
Avatar
Discard
Avatar
gain charlie
-

Hi , How to do this in Odoo 12?

1
Best Answer

Hello Daniel,

You can refer to account module & following files

  • /account/static/src/js/account_move_line_quickadd.js

  • /account/static/src/xml/account_move_line_quickadd.xml

This will not add the button at exact location where you wanted, but still can help you.

Hope this helps.

Avatar
Discard
0
Avatar
Jerry zhang
Best Answer

How do I add this button to Kanban View Header? Thanks

Avatar
Discard
0
Best Answer

@Taha ZIADEH

In my case it did not work until i added at the end:

core.action_registry.add('product.template.custom_filter', ListController);
// return the object.
return ListController;

JS file looks like this:

odoo.define('product.template.custom_filter', function (require) {

"use strict";
console.log('something');
var core = require('web.core');
console.log('require list controller');
var ListController = require('web.ListController');
console.log('list controler: ' + ListController);
ListController.include({

renderButtons: function($node) {

this._super.apply(this, arguments);

if (this.$buttons) {

let filter_button = this.$buttons.find('.oe_filter_button');

filter_button && filter_button.click(this.proxy('filter_button')) ;

}

},

filter_button: function () {
console.log('yay filter');
}

});
console.log('registering');
core.action_registry.add('product.template.custom_filter', ListController);
// return the object.
return ListController;
})



Avatar
Discard