Odoo Add button at header in tree view using xpath

Question

I am a junior odoo developer (v14).

I am trying to add a button at the header in a tree view, next to the 'Create' button.

I have to add the button from an inherit template, so I think that I will have to use xpath.

The inherited template was already created and I just have to add the button defined in the model, and this is my best approach:

    <record id="view_stock_inventory_tree" model="ir.ui.view">
        <field name="name">stock.inventory.tree.view</field>
        <field name="model">stock.inventory</field>
        <field name="inherit_id" ref="stock.view_inventory_tree"/>
        <field name="arch" type="xml">
            <xpath expr="//tree" position="inside">
                <header>
                    <button name="create_button" type="object" class="oe_highlight" string="Custom Button"/>
                </header>
            </xpath>
            <field name="state" position="after">
                <field name="closure_id"/>
                <field name="cost_currency_id" invisible="1"/>
                <field name="valuation" widget='monetary' options="{'currency_field': 'cost_currency_id'}"/>
            </field>
        </field>
    </record>

However, this does not display the button in the view but at least does not generate en error.

In the template fragment, if I remove the header​ tag, then I can view the button in each record at the right of the table/tree and it does what I expect, but I need to locate the button next to the 'Create' button.

How can I locate my button next to the 'create' button considering that I must to do it from the inherited template?

Answer 1

Apart from indicating the xpath where the button will be placed, it is also necessary to define the button template:

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

And a javascript file with the button logic (in this case open a wizard):

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);
});

Finally add these two files in the manifest and in assets.

I got the solution from this link:

https://www.cybrosys.com/blog/how-to-add-a-new-button-near-the-create-button-in-odoo-14

Answer 2

Check out this blog post about placing a button next to the "Create" button in the header of a tree view.

https://www.cybrosys.com/blog/how-to-add-a-new-button-near-the-create-button-in-odoo-14