Xin chào mọi người, hôm nay mình sẽ hướng dẫn mọi người các bước cụ thể để thêm 1 custom button vào tree view trong Odoo version 15 nhé! Let's go!!!

Đầu tiên, trong module của mình các bạn hãy thêm 1 file javascript và 1 file xml với cấu trúc đường dẫn như sau:

static/src/js/file_js_cua_ban.js

static/src/xml/file_xml_cua_ban.js

Sau đó tiến hành khai báo 2 file mới thêm trong manifest: (Lưu ý: Ở version 15 cách khai báo các file js và xml trong src đã có thay đổi so với các version khác, thay vì khai báo trong 1 file xml như các version trước đay thì chúng ta sẽ khai báo trong manifest)

'assets': {
        'web.assets_qweb': [
            'mutosi_stock/static/src/xml/button_recover_debt.xml',
        ],
        'web.assets_backend': [
            'mutosi_stock/static/src/js/button_recover_debt.js',
        ],
},

Thế là xong phần cơ bản rồi, giờ chúng ta bắt đầu viết code thôi. :D

Đầu tiên chúng ta sẽ dùng qweb để thêm button vào vị trí như trên ảnh, code trong file xml sẽ như sau:

<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-extend="ListView.buttons">
        <t t-jquery="div.o_list_buttons" t-operation="after">
            <t t-name="ListView.recoverBtn">
                <button t-if="widget.modelName == 'x.product.debt'" type="button" class="btn btn-primary o_btn_recover_debt" style="margin-top: 20px !important;">
                     Đối trừ công nợ
                </button>
            </t>
        </t>
    </t>
</templates>

Mình sẽ giải thích cho các bạn về phần code này như sau:

• Đầu tiên dùng t-extend để kế thừa vào button của listview
• Sau đó dùng t-jquery và t-operation để xác định vị trí mà chúng ta sẽ thêm nút vào (có thể mọi người sẽ thấy tương tự như xpath và position). Ở đây mình thêm vào "after" của "div.o_list_buttons", có nghĩa là dưới nút Tạo/Nhập
• t-name: Phần này là name của button mình thêm, mọi người có thể đặt tùy ý
• Trong <button> chúng ta sẽ kiểm tra t-if để button mà chúng ta thêm chỉ hiện thị trong model mà mình mong muốn thôi. Mọi người nhớ thêm class vào để chúng ta sẽ xử lý logic bằng js về sau, như ở đây mình đẫ thêm class o_btn_recover_debt
• Có thể thêm 1 chút css (tùy ý mọi người), cuối cùng là label của button, ở đây button của mình là Đối trừ công nợ

Thế là chúng ta đã có 1 button trong tree view của model 'x.product.debt', tuy nhiên khi mọi người ấn vào button thì sẽ chưa có gì xảy ra. Đương nhiên rồi vì chúng ta đã thêm logic gì đâu :D

File JS của mình sẽ như sau: 

/** @odoo-module **/

import ListController from "web.ListController";

ListController.include({                                       // Kế thừa vào ListController để thêm event

    events: Object.assign({}, ListController.prototype.events, {
        'click .o_btn_recover_debt': '_onClickRecoverDebt',   // Thêm event click vào button mình đã thêm
    }),

    _onClickRecoverDebt: function (ev) {     // Đây sẽ là hàm mình xử lý logic
        this.do_action({
            name: 'Đối trừ công nợ',
            res_model: 'x.recover.debt',
            views: [[false, 'form']],
            type: 'ir.actions.act_window',
            target: 'new',
            view_mode: 'form',
        });
    }
});

• Đầu tiên, mình sẽ import ListController (thay vì require như các version trước đây, về cơ bản thì cũng ko khác gì nhau mấy)
• Sau đó, chúng ta sẽ kế thừa vào ListController 
• Cuối cùng, chúng ta sẽ xử lý logic của event ở trong hàm bên dưới, ở đây mình chỉ đơn giản là mở ra form view bản ghi mới của model 'x.recover.debt'

Và đây là thành quả :D

Well done, đây là chỉ là ví dụ rất đơn giản của việc thêm button vào tree view của Odoo version 15. Mong rằng qua bài viết đã giúp các bạn có thêm kiến thức về code Odoo15. Cảm ơn các bạn đã đọc bài!!!