Artikel ini adalah bagian kelima dari seri pemrograman javascript pada odoo. Jika anda belum membaca artikel bagian pertama sampai keempat, saya sarankan untuk membaca keempat artikel tersebut terlebih dahulu. Linknya seharusnya bisa anda temukan di bagian bawah halaman ini.

Pada bagian kelima ini saya akan membahas bagaimana menggunakan dialog. Dialog adalah sebuah view yang tampil di atas view lainnya. Kadang dialog juga biasa disebut sebagai modal atau popup. Salah satu contoh dialog yang biasa kita gunakan pada odoo adalah saat kita melakukan klik pada tombol Search More pada field Many2one, misal pada field Customer di form sales order. Saat kita melakukan klik pada tombol tersebut, odoo akan menampilkan daftar customer yang bisa dipilih oleh user. Blok view yang berisi daftar customer itulah yang disebut sebagai dialog, modal, atau popup dimana view tersebut tampil di atas view lainnya.

Pada artikel ini saya akan membahas beberapa dialog yang biasa digunakan pada odoo, khususnya pada halaman backend. Dialog pada odoo 14 ditulis di 2 tempat, yaitu web.Dialog dan web.view_dialogs. Tujuan akhir dari tutorial ini adalah membuat odoo menampilkan dialog daftar sales order saat user melakukan klik pada tombol dengan icon dolar. Sehingga user bisa dengan bebas memilih sales order mana saja yang ingin dia ambil nilai totalnya. Sehingga sales order yang dihitung tidak lagi kita hardcode seperti yang kita lakukan pada bagian keempat.

Alert

Dialog pertama yang akan kita bahas adalah Alert, dari module web.Dialog. Oleh karena itu mari kita import terlebih dahulu module web.Dialog dengan kode di bawah ini.

var Dialog = require('web.Dialog');

web.Dialog.alert digunakan untuk menampilkan pesan sederhana, dengan sebuah tombol. Jika anda buka source code odoo di github anda akan menemukan bahwa web.Dialog.alert membutuhkan 3 argument. Selalu isi argument pertama (owner) dengan nilai this atau self. Kemudian pada argument kedua (message) isi dengan pesan yang ingin anda sampaikan kepada user. Argument ketiga (options) tidak harus anda isi. Argument ini digunakan untuk mengatur aksi apa yang perlu odoo lakukan saat user menutup dialog secara paksa atau melakukan klik pada tombol OK. Berikut ini adalah contoh penggunaan web.Dialog.alert pada tombol dengan icon dolar.

btn_dollar_action: function(){
    var self = this;
    Dialog.alert(
        this,
        "Apakah anda yakin ingin mengisi field ini dengan nilai 0 ?",
        {
            onForceClose: function(){
                console.log("User menutup dialog dengan paksa, dengan cara melakukan klik pada tombol dengan icon close");
            },
            confirm_callback: function(){
                console.log("User melakukan klik pada tombol OK");
                self._setValue("0");
            }
        }
    );          
},

Berikut ini adalah tampilan dialog alert.

Confirm

Selanjutnya kita akan membahas web.Dialog.confirm. Sama dengan web.Dialog.alert, web.Dialog.confirm juga digunakan untuk menampilkan pesan sederhana kepada user, yang berbeda adalah : web.Dialog.confirm memiliki 2 tombol, yaitu tombol Ok dan tombol Cancel, sehingga user memiliki 2 cara untuk menutup dialog. Yaitu dengan cara klik pada tombol dengan icon X atau klik pada tombol Cancel. Berikut ini adalah contoh penggunaan web.Dialog.confirm.

btn_dollar_action: function(){
    var self = this;    

    Dialog.confirm(
        this,
        "Apakah anda yakin ingin mengisi field ini dengan nilai 1000 ?",
        {
            onForceClose: function(){
                console.log("User menutup dialog dengan paksa, dengan cara melakukan klik pada tombol dengan icon close");
            },
            confirm_callback: function(){
                console.log("User melakukan klik pada tombol OK");
                self._setValue("1000");
            },
            cancel_callback: function(){
                console.log("User melakukan klik pada tombol Cancel");
            }
        }
    );         
},

Berikut ini adalah tampilan dialog confirm dari kode di atas.

Jika anda baca source code web.Dialog, sebenarnya module ini masih memiliki satu dialog lagi yaitu safeConfirm, tetapi saya tidak akan membahasnya, silakan anda coba sendiri, harusnya cara penggunaanya tidak jauh berbeda dengan kedua dialog yang sudah kita bahas sebelumnya.

Selanjutnya kita akan membahas dialog yang ditulis di module web.view_dialogs, oleh karena itu mari kita import terlebih dahulu dengan kode di bawah ini.

var view_dialogs = require('web.view_dialogs');

web.view_dialogs memiliki 2 buah dialog yang bisa kita gunakan, yaitu FormViewDialog dan SelectCreateDialog.

FormViewDialog digunakan untuk menampilkan form view dari suatu record, misal saat kita mengklik tombol external link pada field Customer pada form sales order. Saat kita melakukan klik pada tombol tersebut data dari customer yang telah kita pilih akan ditampilkan oleh odoo, seperti pada gambar di bawah ini.

Berikut ini adalah contoh penggunaan FormViewDialog untuk menampilkan data sales order dengan id 1, saat user melakukan klik pada tombol dengan icon dolar.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.FormViewDialog(this, {
        res_model: 'sale.order', // nama model           
        res_id: 1, // primary key dari model yang ingin kita tampilkan datanya
        title: "Sale Order dengan ID 1", // judul, optional
        on_saved: function (record) { // aksi saat user melakukan tombol save
            console.log("User melakukan klik pada tombol Save");
        }
    }).open();      
},

Berikut ini adalah tampilan dari FormViewDialog di atas.

Selanjutnya kita akan membahas SelectCreateDialog. Dialog ini digunakan untuk menampilkan list view dari suatu model, lengkap dengan search viewnya. Contoh penggunaan dari dialog ini adalah saat kita klik tombol Search More pada field Many2one, dimana odoo akan menampilkan data dalam bentuk list view, sehingga user bisa memilihnya, user juga bisa melakukan pencarian terlebih dahulu, sebelum memilih data yang dia inginkan. Dialog ini adalah dialog yang kita butuhkan, agar user bisa memilih sales order mana saja yang ingin ia dapatkan total nilainya, sehingga tidak perlu kita hardcode seperti pada tutorial seri ke-4.

Berikut ini adalah contoh penggunaan SelectCreateDialog.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.SelectCreateDialog(this, {
        res_model: 'sale.order', // nama model      
        title: "Pilih Sale Order", // judul, optional
        domain: [['state','!=', 'draft']], // domain untuk membatasi record yang bisa dipilih, optional
        no_create: true, // opsi agar user tidak bisa create record baru, optional
        on_selected: function (records) {
            console.log(records)
        }
    }).open();      
},

Saat user melakukan klik pada tombol dengan icon dolar, sebuah dialog akan tampil, seperti pada gambar di bawah ini.

Jika user melakukan klik pada tombol Select, odoo akan mengeksekusi function dari option on_selected yang telah kita tulis diatas, dan akan return daftar record yang telah dipilih oleh user, seperti pada gambar di bawah ini.

Dari gambar di atas, terlihat bahwa kita bisa mendapatkan id dari model sale.order yang telah dipilih oleh user. Oleh karena itu kita bisa mengkombinasikannya dengan tutorial dari seri ke-4 agar data sales order yang dikirim ke server bersifat dinamis. Seperti pada kode di bawah ini.

btn_dollar_action: function(){
    var self = this;
    new view_dialogs.SelectCreateDialog(this, {
        res_model: 'sale.order', // nama model      
        title: "Pilih Sale Order", // judul, optional
        domain: [['state','!=', 'draft']], // domain untuk membatasi record yang bisa dipilih, optional
        no_create: true, // opsi agar user tidak bisa create record baru, optional
        on_selected: function (records) {
            var record_ids = records.map(function(item){
                return item['id'];
            });
            self._rpc({
                model: self.attrs.relatedModel,
                method: self.attrs.modifiers.relatedAction,
                args: [record_ids,0,0],
                kwargs: {value_3: 0, value_4: 0}                
            }).then(function(result){
                self._setValue(result.toString());
            });   
        }
    }).open();      
},

Demikian pembahasan tentang modal odoo kali ini. Saya sarankan untuk membaca source code odoo untuk melihat daftar opsi apa saja yang bisa anda gunakan pada modal. Karena pada artikel ini saya tidak membahas semua opsi tersebut. Perlu anda ketahui dialog di atas hanya bisa digunakan di halaman backend. Sejauh yang saya ketahui dialog di atas tidak bisa digunakan di Point of Sales atau Website.

Download Source Code