Butuh Panduan: Cara Membuat Custom Widget di Odoo 11

Halo Mas Ridwan, Sobat Odoo dari divisi IT! Wah, kebutuhan untuk bikin custom widget di Odoo 11 memang sering banget muncul kalau ada fitur khusus yang nggak bisa diakomodir widget bawaan. Nggak usah bingung, Mas. Ini langkah-langkah detail dan tips-tips yang bisa Mas Ridwan ikuti agar widget yang dibuat stabil dan mudah di-maintain.

---

Membuat custom widget di Odoo 11 itu melibatkan tiga komponen utama: XML untuk definisi field di view, JavaScript untuk logic widget-nya, dan CSS untuk styling. Kita akan bahas satu per satu.

---

### 1. Definisi di XML (View Field)

Langkah pertama adalah memberitahu Odoo bahwa ada field yang akan menggunakan widget kustom kita. Ini dilakukan di file XML view Mas Ridwan.

Misalnya, jika Mas Ridwan punya field di model Odoo (misalnya `x_custom_data`), dan ingin menampilkannya dengan widget baru, cukup tambahkan atribut `widget` dengan nama unik untuk widget kustom Mas Ridwan.

```xml

```

Pastikan `nama_widget_kustom_anda` ini unik dan akan kita gunakan untuk mendaftarkan widget di JavaScript nanti.

---

### 2. Logic di JavaScript (Widget itu Sendiri)

Ini adalah bagian paling inti dari pembuatan widget. Mas Ridwan akan membuat file JavaScript baru di modul kustom Mas Ridwan, biasanya di folder `static/src/js/`.

Mari kita buat contoh sederhana.

`static/src/js/custom_widget.js`

```javascript
odoo.define('nama_modul_anda.CustomWidget', function (require) {
"use strict";

var core = require('web.core');
var field_registry = require('web.field_registry');
var AbstractField = require('web.AbstractField'); // Atau FieldChar, FieldText, dll.

var CustomWidget = AbstractField.extend({
template: 'CustomWidgetTemplate', // Jika menggunakan QWeb template

init: function (parent, name, record) {
this._super.apply(this, arguments);
// Inisialisasi properti atau variabel yang dibutuhkan widget Anda
this.custom_data = record.data[name];
},

start: function () {
this._super.apply(this, arguments);
// Logika saat widget mulai di-render dan event binding
this._render();
this.$el.on('change', this._onWidgetChange.bind(this));
},

_render: function () {
// Logika untuk menampilkan nilai widget ke DOM
// Jika pakai QWeb template, cukup set nilai di template.
// Contoh tanpa QWeb:
this.$el.empty();
if (this.mode === 'readonly') {
this.$el.append($('').text(this.value || 'N/A'));
} else {
var $input = $('').val(this.value || '');
this.$el.append($input);
}
},

_getValue: function () {
// Ambil nilai dari input di widget (mode edit)
return this.$('input').val();
},

_setValue: function (value) {
// Set nilai ke widget dari Odoo model
if (this.mode === 'edit') {
this.$('input').val(value);
} else {
this.$el.find('span').text(value || 'N/A');
}
this.value = value;
return this._super.apply(this, arguments);
},

_onWidgetChange: function (event) {
// Handle event perubahan di widget (misal: input text berubah)
this.value = this._getValue();
this._setValue(this.value); // Update tampilan widget
this._reportChanged(); // Memberitahu Odoo bahwa nilai field berubah
},

// Metode-metode lain sesuai kebutuhan widget Anda
});

// Daftarkan widget Anda agar dikenal Odoo
field_registry.add('nama_widget_kustom_anda', CustomWidget);

return CustomWidget;
});
```

Penjelasan Penting untuk JavaScript:

`odoo.define`: Ini cara Odoo mendaftarkan modul JavaScript. Pastikan nama modulnya unik.
`require`: Untuk mengimpor modul Odoo lainnya yang dibutuhkan (misalnya `web.core`, `web.field_registry`).
`AbstractField`: Ini adalah base class yang baik untuk memulai. Bisa juga meng-extend `FieldChar`, `FieldBinary`, atau `FieldText` jika widget Mas Ridwan mirip dengan tipe field bawaan Odoo.
`template`: Kalau Mas Ridwan butuh tampilan yang lebih kompleks, bisa pakai QWeb template. Buat file XML terpisah untuk template QWeb ini (misal: `static/src/xml/custom_widget_templates.xml`) lalu daftarkan di `__manifest__.py`.
```xml

Custom Action

```
`field_registry.add('nama_widget_kustom_anda', CustomWidget)`: Ini adalah bagian krusial! Nama di sini harus sama persis dengan nama `widget` yang Mas Ridwan definisikan di XML view.

---

### 3. Styling di CSS

Untuk tampilan yang cantik, Mas Ridwan tentu butuh CSS. Buat file CSS di `static/src/css/` pada modul kustom Mas Ridwan.

`static/src/css/custom_widget.css`

```css
.o_field_nama_widget_kustom_anda {
/ Gaya umum untuk widget ini /
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 5px;
border-radius: 3px;
}

.o_field_nama_widget_kustom_anda input.o_custom_widget_input {
/ Gaya untuk input di dalam widget /
width: 100%;
border: 1px solid #ccc;
padding: 3px;
}
```

Gunakan prefix yang spesifik (misalnya `o_field_nama_widget_kustom_anda`) agar CSS Mas Ridwan tidak bentrok dengan gaya Odoo atau modul lain.

---

### 4. Update File Manifest (`__manifest__.py`)

Terakhir, Mas Ridwan harus memberitahu Odoo untuk memuat file JavaScript, CSS, dan QWeb template (jika ada) yang baru. Tambahkan di key `assets` pada file `__manifest__.py` modul kustom Mas Ridwan.

```python
{
'name': "Modul Custom Widget Saya",
'version': '1.0',
'depends': ['web'], # Pastikan 'web' ada karena ini modul UI
'data': [
'views/custom_view.xml', # Jika ada XML view yang menggunakan widget
'static/src/xml/custom_widget_templates.xml', # Jika pakai QWeb template
],
'assets': {
'web.assets_backend': [
'nama_modul_anda/static/src/js/custom_widget.js',
'nama_modul_anda/static/src/css/custom_widget.css',
],
},
'installable': True,
'auto_install': False,
'application': True,
}
```

`web.assets_backend`: Ini adalah bundle aset yang dimuat di halaman backend Odoo.

---

### Tips Penting agar Widget Stabil dan Maintainable:

1. Pahami Lifecycle Widget: Pahami kapan `init`, `start`, `_render`, `_setValue`, `_getValue`, dan `destroy` dipanggil. Ini krusial untuk manajemen state dan event.
2. Gunakan QWeb untuk UI Kompleks: Untuk tampilan yang tidak sederhana, selalu gunakan QWeb template. Ini memisahkan struktur HTML dari logika JavaScript, membuat kode lebih rapi dan mudah dibaca.
3. Manajemen Event dengan Baik: Saat menambahkan event listener, pastikan untuk menghapus listener tersebut di metode `destroy` untuk menghindari memory leak, terutama jika widget akan di-render ulang berkali-kali. Gunakan `this.$el.off()` jika perlu.
4. Gunakan Existing Components: Sebelum membuat dari nol, cek apakah ada `AbstractField` lain atau komponen Odoo JS yang sudah ada yang bisa Mas Ridwan `extend` atau manfaatkan. Ini menghemat waktu dan memastikan konsistensi.
5. Validasi Input: Jika widget Mas Ridwan menerima input dari user, pastikan ada validasi di sisi client (JavaScript) sebelum mengirim data ke server.
6. Error Handling: Tambahkan `try-catch` jika ada operasi yang rawan error atau tampilkan pesan error yang informatif.
7. Komentar Kode: Jangan pelit komentar di kode JavaScript Mas Ridwan, terutama pada bagian-bagian yang kompleks. Ini sangat membantu untuk maintenance di masa depan.
8. Upgrade Modul: Setelah setiap perubahan di file JS, CSS, atau XML yang berkaitan dengan aset, jangan lupa untuk meng-upgrade modul Mas Ridwan di Odoo agar perubahan diterapkan. Seringkali Mas Ridwan juga perlu clear cache browser.

---

Semoga panduan ini membantu Mas Ridwan dalam mengembangkan custom widget di Odoo 11. Kalau ada bagian yang kurang jelas atau butuh contoh lebih spesifik, jangan sungkan bertanya lagi ya! Selamat berkarya, Mas Ridwan!