How to Add Button in the Header of List View in Odoo 17

This slide will show that how to add button in the header of list view in Odoo 17. In certain situations, we may need to add a custom button to a specific list view, such as the sales order tree view header.

1. How to add button in the header of list view in Odoo 17 Enterprise

2. Introduction Enterpr ise This slide will show that how to add button in the header of list view in Odoo 17. In certain situations, we may need to add a custom button to a specific list view, such as the sales order tree view header. Let’s look into it.

3. Enterprise Let’s create the templates file inside static/src/xml directory. To add a button in the list view, we need to inherit the ‘web.ListView.Buttons’ template where the list view buttons are defined. Within this templates, we’ll add the ‘Custom Button’ button along with its ‘t-on-click’ functionality.

4. Enterprise Create a js file inside static/src/js directory. We can extend the default ListController component and the template. Then, we can register a new ‘list_view_button’ item to the view register. Within the js file, we can define the button’s ‘t-on-click’ function. Here, we can initiate the opening of a wizard for Quotation Template using the ‘doAction’ method. Since we’ve already added the action from the hook in the default ListController.

5. Enterprise

6. Enterprise Create a view file inside the views directory. Now, we need to add the created js_class in the list view of the sale order.

7. Enterprise Then run the pycharm and upgrade the module. Go to the Sales > Orders > Orders > List view. We can see the Custom Button on the list view.

8. Enterprise The wizard will open by clicking on the Custom Button .

9. Enterprise This way we can add button in the header of list view in Odoo 17.

10. For More Info. Check our company website for related blogs and Odoo book. Check our YouTube channel for functional and technical videos in Odoo. Enterprise www.cybrosys.com