Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
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.
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
Like so? https://www.odoo.com/documentation/8.0/howtos/web.html
see an example in the updated response
Will this code add the button for *all* tree views?
Yes. But you could restrict the visibility using options for the template
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
@Ưng Tú : same for me, and I'm messing around this issue ...
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 :)
Hi , How to do this in Odoo 12?
How do I add this button to Kanban View Header? Thanks
@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;
})
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.
1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.
In latest odoo versions, it can be achieved easily as we do in form view, see: https://www.youtube.com/watch?v=R8eG6uOxHKw