Enable Dark Mode!
how-to-add-a-new-button-near-the-create-button-in-the-tree-kanban-view-in-odoo-15.jpg
By: Arunima

How to Add a New Button Near the Create Button in the Tree & Kanban View in Odoo 15

Technical Odoo 15

Apart from adding a new button in the form view, sometimes it’ll be needed to add buttons inside the tree and kanban view header. In this blog, we are discussing the same.

Let’s create a new button near the Create button in the tree and kanban view, and clicking the button will open a wizard.

First, let’s take the example of the tree view.

Tree View:

Create the template xml file inside the path - static/src/xml/tree_button.xml

tree_button.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates>
   <t t-extend="ListView.buttons" t-name="button_near_create.buttons">
       <t t-jquery="button.o_list_button_add" t-operation="after">
           <button type="button" class="btn btn-primary open_wizard_action">
               Open Wizard
           </button>
       </t>
   </t>
</templates>

Add this file in ‘web.assets_qweb’ from the manifest, like this:

__manifest__.py

'assets': {
   'web.assets_backend': [
       'button_near_create/static/src/js/tree_button.js',
       'button_near_create/static/src/js/kanban_button.js',
   ],
   'web.assets_qweb': [
       'button_near_create/static/src/xml/tree_button.xml',
       'button_near_create/static/src/xml/kanban_button.xml',
   ],
},

Now let’s create the js file, from where we’ll add the functionality to our new button. Create the js file in the path static/src/js/tree_button.js

Add this js file in ‘web.assets_backend’

odoo.define('button_near_create.tree_button', function (require) {
"use strict";
var ListController = require('web.ListController');
var ListView = require('web.ListView');
var viewRegistry = require('web.view_registry');
var TreeButton = ListController.extend({
   buttons_template: 'button_near_create.buttons',
   events: _.extend({}, ListController.prototype.events, {
       'click .open_wizard_action': '_OpenWizard',
   }),
   _OpenWizard: function () {
       var self = this;
        this.do_action({
           type: 'ir.actions.act_window',
           res_model: 'test.wizard',
           name :'Open Wizard',
           view_mode: 'form',
           view_type: 'form',
           views: [[false, 'form']],
           target: 'new',
           res_id: false,
       });
   }
});
var SaleOrderListView = ListView.extend({
   config: _.extend({}, ListView.prototype.config, {
       Controller: TreeButton,
   }),
});
viewRegistry.add('button_in_tree', SaleOrderListView);
});

In this js file, we are extending the ListController.

buttons_template - Here we will specify the t-name of the template.

open_wizard_action  is the class of the button we’ve specified in the template XML file.

_OpenWizard is the function that will perform when clicking the button.

do_action will help to open the specific action window.

We will extend ListView and will add this extender controller. Then add the view to the registry, i.e., we need to inform the web client of the mapping between the name of the views and the actual class.

Now to see this new button in a specific tree view of the sale.order model, we need to specify the new class in the specific view. For that, we can use an attribute ‘js_class’ in the tree tag of the view

sale_order.xml

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
   <data>
       <record id="sale_order_inherited_tree_view" model="ir.ui.view">
           <field name="name">sale.order.view.tree.inherit</field>
           <field name="model">sale.order</field>
           <field name="inherit_id" ref="sale.view_quotation_tree"/>
           <field name="arch" type="xml">
               <xpath expr="//tree" position="attributes">
                   <attribute name="js_class">button_in_tree</attribute>
               </xpath>
           </field>
       </record>
   </data>
</odoo>

Don’t forget to add this file in views in the manifest.

Now the button can be seen in the specific tree view of sale.order

how-to-add-a-create-button-near-tree-kanban-view-in-odoo-15-cybrosys

Kanban View:

I’m going to create a new button for sale.order kanban view.

The process is somewhat similar to what we have done for adding buttons in the tree view.

First create the xml file inside static/src/xml/kanban_button.xml 

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
   <t t-extend="KanbanView.buttons" t-name="button_near_create.button">
       <t t-jquery="button" t-operation="after">
               <button t-if="widget.modelName == 'sale.order'"
                   class="btn btn-primary open_wizard_action_kanban oe_highlight"
                   type="button">Open Wizard</button>
       </t>
   </t>
</templates>

Here the I’ve used a condition in the button tag to limit the button visibility only for the sale.order model(t-if="widget.modelName == 'sale.order'")

Add it in ‘web.assets_qweb’.

Now let’s create the js file.

odoo.define('button_near_create.kanban_button', function(require) {
   "use strict";
   var KanbanController = require('web.KanbanController');
   var KanbanView = require('web.KanbanView');
   var viewRegistry = require('web.view_registry');
   var KanbanButton = KanbanController.include({
       buttons_template: 'button_near_create.button',
       events: _.extend({}, KanbanController.prototype.events, {
           'click .open_wizard_action_kanban': '_OpenWizardKanban',
       }),
       _OpenWizardKanban: function () {
       var self = this;
        this.do_action({
           type: 'ir.actions.act_window',
           res_model: 'test.wizard',
           name :'Open Wizard',
           view_mode: 'form',
           view_type: 'form',
           views: [[false, 'form']],
           target: 'new',
           res_id: false,
       });
   }
   });
   var SaleOrderKanbanView = KanbanView.extend({
       config: _.extend({}, KanbanView.prototype.config, {
           Controller: KanbanButton
       }),
   });
   viewRegistry.add('button_in_kanban', SaleOrderKanbanView);
});

Add the js file path in ‘web.assets_backend’

It has the same structure as the js file we used for the tree view button creation. Here we are extending the KanbanController and KanbanView.

Now the button can be seen in sale.order kanban view.

how-to-add-a-create-button-near-tree-kanban-view-in-odoo-15-cybrosys

While clicking the new button from both the views it’ll open the specific wizard which we’ve specified in the do_action function. In this example I’ve used a custom wizard having two date fields, From and To.

how-to-add-a-create-button-near-tree-kanban-view-in-odoo-15-cybrosys

Likewise, we can add a new button near the Create button in the tree and the kanban view header in Odoo15.


If you need any assistance in odoo, we are online, please chat with us.



10
Comments

Tri Nanda

Thank you for this knowledgeable tutorial. Is this still working in Odoo16 CE? Thanks, Tri

29/11/2022

-

2:42PM

Eduardo Luiz

I´m have a solution for Odoo 16: --------------------------------------------------- movimento_financeiro_list_view.xml --------------------------------------------------- --------------------------------------------------- movimento_financeiro_list_view.js --------------------------------------------------- /** @odoo-module **/ import { registry } from '@web/core/registry'; import { listView } from '@web/views/list/list_view'; import { MovimentoFinanceiroListController } from "@master_financeiro/views/list/movimento_financeiro_list_controller"; registry.category('views').add('movimento_financeiro_tree_buttons', { ...listView, Controller: MovimentoFinanceiroListController, buttonTemplate: 'master_financeiro.movimento_financeiro.ListView.Buttons', }); --------------------------------------------------- movimento_financeiro_list_controller.js --------------------------------------------------- /** @odoo-module **/ import { ListController } from "@web/views/list/list_controller"; import { useService } from "@web/core/utils/hooks"; export class MovimentoFinanceiroListController extends ListController { setup() { super.setup(); this.actionService = useService("action"); } /** * Realiza abertura da view para abrir o movimento * @override */ openMovimentoFinanceiroWizard() { this.actionService.doAction({ type: 'ir.actions.act_window', name :'Abrir Movimento Financeiro', views: [[false, 'form']], view_mode: 'form', view_type: 'form', res_model: 'master.financeiro.movimento_financeiro_wizard', res_id: false, target: 'new', }); } }; --------------------------------------------------- movimento_financeiro.xml --------------------------------------------------- Movimento Financeiro master.financeiro.movimento_financeiro ... --------------------------------------------------- __manifest__.py --------------------------------------------------- 'assets': { 'web.assets_backend': [ '/master_financeiro/static/src/views/list/movimento_financeiro_list_view.xml', '/master_financeiro/static/src/views/list/movimento_financeiro_list_view.js', '/master_financeiro/static/src/views/list/movimento_financeiro_list_controller.js', ], },

28/11/2023

-

8:29PM

Harold

i added like that but it did not display, i saw it in inherited view , may be it was invisible or something else... Please help!!! Here is my code in my module "hd_recruitment_extension" In views/hr_recruitment_job.xml my.custom.job.kanban.view hr.job Time_Interviews my.custom.job.tree.view hr.job button_in_tree In static/src/xml/kanban_button.xml (kanban xml) (i tried replace with module_name.buttons) In static/src/js/kanban_button.js odoo.define('hd_recruitment_extension.kanban_button', function(require) { "use strict"; var KanbanController = require('web.KanbanController'); var KanbanView = require('web.KanbanView'); var viewRegistry = require('web.view_registry'); var KanbanButton = KanbanController.include({ buttons_template: 'RecruitmentKanbanView.buttons', events: _.extend({}, KanbanController.prototype.events, { 'click .open_calendar_action': '_OpenCalendarKanban', }), _OpenCalendarKanban: function () { var self = this; self.do_action({ type: 'ir.actions.act_window', res_model: 'calendar.event', name :'Calendar', view_mode: 'calendar', view_type: 'calendar', views: [[false, 'calendar']], target: 'self', res_id: false, }); } }); var RecruitmentKanbanView = KanbanView.extend({ config: _.extend({}, KanbanView.prototype.config, { Controller: KanbanButton }), }); viewRegistry.add('Time_Interviews', RecruitmentKanbanView); }); i already added in manifest that why i saw it in inherited view in debug mode... is there something wrong here, please.

27/06/2023

-

2:19AM

Sascha

Hi guys, Working like a charm in Odoo 15! May I ask 2 further questions built on this tutorial? Maybe you have another I did not find.... 1.) I wanted to add 2 buttons, but I get only one - I duplicated this system in a 2nd class - but this will overwrite the other class. How to add 2nd button? 2.) How to start a python function in JS? _CloseSAPCase: function () { var iModel = new instance.Model('esc.tchibo.sst').get_func('write_tch_order',[[]]); return; }

24/01/2023

-

7:28AM

Asterix

On odoo16 I get the following error: ``` UncaughtPromiseError Uncaught Promise > QWeb2: Can't clone undefined template 'ListView.buttons' to create 'button_near_create.buttons' ``` Keep searching for solution that works on odoo16!

23/06/2023

-

1:40PM

jose

ive got error UncaughtPromiseError > OwlError Uncaught Promise > The following error occurred in onWillStart: "Cannot read properties of undefined (reading 'display_name')"

20/03/2023

-

4:56AM

Ulrich

Thanks for this amazing tuto, I try this and have the following error: QWeb2: Template 'button_near_create.buttons' not found"

16/01/2023

-

11:23AM

Aurlic

Thanks for this tutorial. @Ulrich, I had this problem too. I'm on Odoo 16. I added the tree_button.xml in the web.assets_backend and it works: 'assets': { 'web.assets_backend': [ 'module_name/static/src/js/tree_button.js', 'module_name/static/src/xml/tree_button.xml', ], },

12/04/2023

-

5:32PM

Detrox

Is this work in odoo 16 ?

09/04/2023

-

4:38PM

Abderrahman

Hi, i have tried your code but it does not work with me it not changing any thing in my list view i am developping in odoo.sh V16 Entreprise.

05/09/2023

-

10:40AM



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message