Add Custom Button in Tree or Header of a Kanban in Odoo16

HARSHAD

June 22, 2023

We all know that, in Odoo, we can customize and add buttons to different views to achieve different Functionality as per our requirements. The functionalities of buttons may include opening a new pop-up Or wizard, changing the states of the records, printing documents, and so on. In this blog, We will look into the steps involved in adding a custom button in the tree or Header of Kanban in Odoo. In this example, we will add a button in the tree and Kanban header to open a wizard.

Adding a button in the list view

First, let us create an XML (custom_list_button.xml) file wherein we will inherit the tree or list view and

add our custom button.

This XML file is to be placed under the static → src → XML folder of the module.

The image below shows the content of the above XML file.

Here, we have inherited the ‘web.ListView.Buttons’ and added a custom button after the ‘New’ button

in the tree view.

For e.g.:

The next step is to create a .js (custom_tree_extend.js) file to add the functionality of the custom button.

This js file is to be placed under the static → src → js folder of the module.

For e.g.: The image below shows the content of the above js file.

In the above image,

1. We are extending the ‘ListController’ from the module ‘web’.

2. We have added the t-on-click function named as ‘OnTestClick’. This is the function that will be called when clicking on the button. ‘doAction’ is used to open the specific action window when clicked on the button.

3. We have also added a new class named ’SaleListController’

4. The view is then to be added to the registry, by specifying the controller name, i.e., ‘ButtonTemplate’.

5. We have also specified the js class for this view. Here, ‘button in a tree’ is the name of the js class which will be used in the custom tree view to add the custom button.

Tree View in Custom Module

The next step is to use the above js class attribute in the required tree view in our custom

module.

Let us bring this custom button in the tree view of the model’s sale. order’.

In order to achieve this, we will have to inherit the tree view of the ‘sale. order’ model and use the attribute ‘js_class’ in the tree tag of the view.

For e.g.: the below image.

Adding a button in the Kanban view

Adding a custom button in the Kanban view is like the method mentioned above.

With the kanban view, create an XML (custom_kanban_button.xml) file wherein we will inherit the kanban view and add our custom button.

This XML file is to be placed under the static → src →XML folder of the module.

The image below shows the content of the above XML file.

Here, we have inherited the ‘web.KanbanView.Buttons’ and added a custom button.

The next step is to create a .js (custom_kanban_extend.js) file to add the functionality of the custom button.

This js file is to be placed under the static → src → js folder of the module.

For e.g.: The image below shows the content of the above js file.

The structure of the above js file is like the one we have described above for the list view.

With the Kanban in Odoo view, we are extending the Kanban Controller and Kanban View.

The next step is to use the above js class attribute in the required Kanban view in our custom module.

Let us bring this custom button in:

Kanban in Odoo – View of the Model ‘sale. order’.

In order to achieve this, we will have to inherit the Kanban view of the ‘sale. order’ model and use the

attribute ‘js class’ in the kanban tag of the view as shown in the below image.

All the above files mentioned above are to be included in the __manifest__.py file of our

Custom module. The static files are to be added under the ‘web. assets backend’.

For e.g.: Refer to the image below

After the above customizations, our custom button will be visible in the list and Kanban view of the model sale. order as shown in the below images.

List / Tree View

For e.g.:

Kanban in Odoo

For e.g.:

After that, While clicking the button ‘OPEN WIZARD’ from both the views, i.e., the list and kanban views, it will open the wizard which we have specified in the do Action function in the js files.

For e.g.:

In this way, we can add a custom button in the tree or Kanban header view in Odoo16.

Request Your Free Quote

"Unlock the Full Potential of Your Business with Odoo ERP!"

"Get a Cost Estimate for Your ERP Project, Absolutely FREE!"

Get a Free Quote

PREVIOUS POST
Bassam Infotech and Odoo Join Forces | The Indian Presence at GITEX 2023

NEXT POST
Digital Transformation in Manufacturing: Experience our Odoo ERP Solutions at Gitex 2023

Add Custom Button in Tree or Header of a Kanban in Odoo16