Menampilkan Chatter Odoo di Modal

Pada postingan sebelumnya saya telah menulis bahwa jika kita menggunakan class oe_chatter chatter tidak akan tampil jika dibuka dari modal. Setelah saya lihat lebih detail ternyata ini disengaja oleh odoo.

Pada odoo 12 jika chatter dibuka dari modal, chatter akan disembunyikan dengan kode CSS. Silakan lihat source code odoo mulai baris ke-627 di halaman github odoo ini..

Sehingga jika kita ingin menampilkan chatter pada modal kita harus meng-override kode di atas, seperti pada kode di bawah ini.

.modal .modal-dialog .o_form_view .oe_chatter {
    display: block !important;
}

Saya telah membuat module yang meng-override kode CSS odoo di atas. Silakan download disini. Setelah module diinstall, saat membuka modal yang memiliki elemen DIV dengan class oe_chatter, chatter akan tampil. Tombol Log Note juga tampil sehingga kita bisa menambah catatan secara manual.

Tampilan chatter di modal odoo

Module di atas saya tulis berdasarkan odoo 12, tetapi juga bisa digunakan pada odoo 13.

Yang berbeda adalah odoo 14. Pada odoo 14, secara default chatter juga tidak tampil jika dibuka dari modal. Tetapi sedikit lebih kompleks, karena selain disembunyikan dengan kode CSS juga diatur dengan kode javascript. Perhatikan kode javascript mulai baris ke-133 pada source code odoo ini.

Pada source code odoo di atas, terlihat bahwa jika ada element DIV dengan class oe_chatter dan dibuka dari modal, maka akan retur element DIV kosong. Selain itu akan retur blok chatter. Agar chatter tampil pada modal kita harus meng-override method _renderNode di atas dengan kode seperti di bawah ini.

odoo.define('show_chatter_on_modal.form_renderer.js', function (require) {
"use strict";

    const FormRenderer = require('web.FormRenderer');
    require('mail/static/src/widgets/form_renderer/form_renderer.js');

    FormRenderer.include({
        _renderNode(node) {
            if (node.tag === 'div' && node.attrs.class === 'oe_chatter') {
                return this._makeChatterContainerTarget();
            }else{
                return this._super.apply(this, arguments);
            }            
        },
    });

});

Saat kita meng-inspect tampilan chatter dengan google chrome developer tool, elemen DIV dengan class oe_chatter juga tidak ada, karena element tersebut akan direplace dengan elemen DIV dengan class o_FormRenderer_chatterContainer. Secara default elemen dengan class o_FormRenderer_chatterContainer juga tidak tampil jika dibuka dari modal, perhatikan kode CSS mulai baris ke-15 pada source code odoo ini. Oleh karena itu kita juga harus meng-override kode CSS di atas.

.modal .modal-dialog .o_form_view .o_FormRenderer_chatterContainer {
    display: block !important;
}

Download module untuk odoo 14 disini.

Tulisan Serupa

Leave a Reply

Your email address will not be published. Required fields are marked *