xmlodooodoo-14

Odoo Add button at header in tree view using xpath


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?


Solution

  • 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