Membuat Button invisible and non invisible ketika boolean pada tree view default odoo di klik (Odoo-JS)

  

 Jadi saya ingin menambahkan action button yang bisa hide dan non hide seperti action

semula seperti ini


menjadi mengikuti ini saat di centang


Pertama buat button pemanggilnya dahulu dengan xml

dengan membuat folder baru didalam model yg kita punya dengan susunan

static/src/xml/(namafile).xml dan berisikan code sebagai berikut :

dengan code :

<?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="append">


            <t t-if = "widget.modelName == 'fjb.spk.transfer'">
                <button type="button" class="btn-primary o_finger_consume_spk_generate">
                    CONSUME PALLETS
                </button>
            </t>
        </t>
    </t>

</templates>

dengan pembacaan tambahkan button dan t-if berfungsi sebagai
jika model tersebut bernama fjb.spk.transfer maka munculkan buttonya

setelah itu pada view tambahkan/ panggil file yang ada di static di manifest dengan memanggil qweb
sebagai berikut
'qweb': ['static/src/xml/consume_button.xml'],

setelah itu terjadi maka button akan muncul namun belum dengan kondisi seperti action


Lalu kita buat file JavaScript nya

pada folder static/src tambahkan folder js sepert pada gambar diatas dan tambahkan 
(nama_file).js
lalu masukan code :
odoo.define('sas_finger_joint.condition_button', function (require) {
    "use strict";

});

Ini adalah code pemanggilan default yang harus dilakukan pada framework odoo
dengan pembacaan setelah define adalah ('nama_model.namafile(tanpa .js))
lalu masukan code default didalam odoo define
menjadi seperti berikut :
odoo.define('sas_finger_joint.condition_button', function (require) {
    "use strict";

    var core = require('web.core');
    var ListController = require("web.ListController");
    var ListRenderer = require('web.ListRenderer');
    var _lt = core._lt;

    ListController.include({
        renderButtons: function () {
            this._super.apply(this, arguments);
            // this.onCheckboxChange();
            console.log("Kita akan melakukan eksekusi")
        },

       
    });
});
console.log adalah cara kita melihat apakah file js yang kita inputkan berhasil

setelah terbuat maka tambahkan / panggil file JS kita pada menu xml pada views disini saya menggunakan menu delete karena agar tidak kebanyakan file xml
tambahkan code berikut :
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <data>
        <!-- button consume JS calling -->
        <template id="assets_backend_inherit_consume_fj" inherit_id="web.assets_backend" name="mrp_execution_listview_button">
            <xpath expr="script[last()]" position="after">
                <script type="text/javascript" src="/sas_finger_joint/static/src/js/condition_button.js"></script>
            </xpath>
        </template>

    </data>
</odoo>

jalan lupa panggil di xmlnya untuk pada views nya

setelah terbuat lakukan restart server dan reload page nya
dan buka inspect element pada browser kesayangan kalian

dan pada bagian console maka akan muncul pemanggilan console.log yang tadi terbuat
Jika seperti itu tandanya file JS yang dibuat kita berhasil ditambahkan kedalam odoo selanjutnya tinggal kita lakukan eksekusi apa didalam file.js yg dibuat

Langsung kita eksekusi untuk tujuan utama kita yaitu membuat file consume pallets tersebut menjadi tidak muncul dan muncul
sebelumnya kita tambahkan kelas o_hidden (kelas default) untuk hide odoo pada xml buttonya menjadi seperti ini

Sehingga secara default tombol kita akan tersembunyi terlebih dahulu
lakukan restart dan reload maka tombol consumes akan menghilang
Jika sudah seperti berikut maka selanjutnya kita akan bermain di JS nya
disini saya akan menambahkan 1 function dan melihat apakah fungsi yang saya buat masuk bernama cekSelector sehingga menjadi seperti ini pada file JS nya

odoo.define('sas_finger_joint.condition_button', function (require) {
    "use strict";

    var core = require('web.core');
    var ListController = require("web.ListController");
    var ListRenderer = require('web.ListRenderer');
    var _lt = core._lt;

    ListController.include({
        renderButtons: function () {
            this._super.apply(this, arguments);
            // this.onCheckboxChange();
            console.log("Kita akan melakukan eksekusi")
            this.cekSelectorChange();
        },

        cekSelectorChange: function() {
            console.log("Fungsi Cek Selector Change berhasil terbuat")
        },

       
    });
});

seperti biasa lakukan reload(restart dan load page)



Fungsi berhasil masuk selanjutnya kita mainkan fungsi yang sudah terbuat tersebut,
disini kita menggunakan library jquery by odoo nya,. 
karena saya ingin tombol tersebut hide dan unhide ketika terchecklist maka kita harus lihat dulu elemen apakah yang terlibat kedalam checkbox tersebut dengan cara lihat elements nya

Disini saya menemukan elemen tersebut dengan nama dikedua elemen tersebut dengan nama class o_list_record_selector selanjutnya tinggal kita panggil elemen tersebut di JS kita lakukan alert atau debug console.log bebas sesuka hati kalian agar melihat apakah condition yang dibuat berjalan atau tidak

Back To File JS nya maka kita panggil file jquery dengan cara
cekSelectorChange: function() {
            $(document).ready(function() {
               
                $(".o_list_record_selector input[type='checkbox']").on('change', onCheckboxChange);
            });
        },
dengan pembacaan jquery document tolong panggilkan saya elemen dengan kelas o_list_record_selector ketika dia input bertype checkbox saat melakukan on change / perubahan maka jalankan fungsi onCheckboxChange

kita buat fungsi tersebut didalam functionnya atau diatasnya dengan coding
cekSelectorChange: function() {
            $(document).ready(function() {
                function onCheckboxChange(ev) {
                    if (ev.target.checked) {
                        console.log("Terceklis")
                        alert("Kondisi ini terceklis")
                    } else {
                        console.log("Kondisi tidak terceklis")
                        alert("Kondisi ini tidak terceklis gays")
                    }
                }
                $(".o_list_record_selector input[type='checkbox']").on('change', onCheckboxChange);
            });
        },

dengan menggunakan e prevent default dengan pembacaan
jika button tersebut mempunyai target tercek maka keluarkan debug dan alert Terceklis / kondisi ini terceklis jika tidak maka tidak terceklis

reload lagi lalu lakukan testing

Jika kita Ok maka
Maka kondisi akan terceklis begitupun ketika kita uncheck
Maka kondisi tidak terceklis jika di ok
Nah seperti itu artinya kondisi yang kita inginkan sudah terpenuhi tinggal kita lakukan eksekusi / penerapan pada buttonya pada file JS tambahkan atau ganti menjadi seperti ini:
cekSelectorChange: function() {
            $(document).ready(function() {
                function onCheckboxChange(ev) {
                    if (ev.target.checked) {
                        var $consumeButton = $('.o_finger_consume_generate');
                        if ($consumeButton) {
                            $consumeButton.removeClass('o_hidden');
                        }
                    } else {
                        var $consumeButton = $('.o_finger_consume_generate');
                        if ($consumeButton) {
                            $consumeButton.addClass('o_hidden');
                        }
                    }
                }
                $(".o_list_record_selector input[type='checkbox']").on('change', onCheckboxChange);
            });
        },

Dengan artian didalam kondisi adalah sebagai berikut
karena kita tadi punya kelas o_hidden
code pertama dibaca
var $consumeButton = $('.o_finger_consume_generate');
jquery tolong carikan saya kelas .o_finger_consume_generate dan simpan pada variabel $consumeButton
lalu lakukan kondisi 
if ($consumeButton) {
                            $consumeButton.removeClass('o_hidden');
                        }
Jika ketemu maka pada variabel yang tersimpan dengan kelas tersebut lakukan remove/hapus kelas o_hiddenya

lakukan reload maka hasilnya akan

dan jika kita uncheck maka

Nah jadi itu sudah berhasil ya temen temen semuanya. selanjutnya lakukan fungsi untk tombol kalian ketika di klik akan diapakan.
sampai bertemu kembali
tidak usah skip iklan karena bukan yutub..
Like jika kalian suka dislike jika tidak suka 
komen jika ada pertanyaan 
Sekian dan Salam Sekilas Tutorial