JavaScript (OWL) — web client & widgets

Selamat datang di bagian keempat FAQ OdooCamp: JavaScript (OWL) — web client & widgets. Prolog ini menyiapkan fondasi konsep dan peta kerja sebelum kita masuk ke pertanyaan teknis yang sering ditanyakan developer Odoo 18 CE.

Mengapa JavaScript (OWL) Penting?

Sejak Odoo modern, antarmuka klien dibangun di atas OWL (Odoo Web Library), sebuah framework UI reaktif berbasis komponen. Dengan OWL, kita membuat:

• Client Action: layar kustom yang dipanggil via ir.actions.client.

• Field/Widget: komponen untuk input/visualisasi field di form/tree/kanban.

• Service & Registry Extensions: menambah layanan global (RPC, dialog, notification, hotkey) dan mendaftarkan komponen di registry.

• Patching UI**: menyesuaikan perilaku komponen inti tanpa forking.

OWL membantu kita memisahkan state (data yang berubah) dari template (presentasi), sehingga UI lebih terstruktur, dapat diuji, dan mudah dirawat.

Mindset Kerja

Assets → Komponen → Registry → Aksi/Route → Integrasi RPC

• Assets: daftarkan berkas JS/SCSS kita di __manifest__.py (mis. web.assets_backend).

• Komponen: tulis class OWL, template XML, dan gaya pendukungnya.

• Registry: daftarkan komponen ke kategori yang tepat (actions, fields, systray, views, services).

• Aksi/Route: hubungkan komponen ke action Odoo atau route web jika diperlukan.

• RPC/Model: integrasikan dengan server melalui layanan RPC Odoo (JSON‑RPC) secara aman.

Ruang Lingkup yang Akan Kita Bahas di FAQ JS (OWL)

1. Anatomi Komponen: class, setup(), state/props, lifecycle, template.

2. Registries: actionRegistry, fieldRegistry, viewRegistry, systrayRegistry, serviceRegistry.

3. Client Action: definisi, binding ke ir.actions.client, cara memicu dari menu.

4. Field Widget: membuat widget baru untuk field atau memodifikasi yang ada.

5. Services: membuat service kustom (notifikasi, data store, bus) dan konsumsi service bawaan.

6. RPC & Keamanan: pola panggilan RPC, error handling, context, dan hak akses.

7. Patching: menyesuaikan perilaku komponen inti secara aman.

8. Assets & Bundling: cara mendaftarkan file JS/SCSS ke bundle backend/frontend.

9. Diagnostik: logging, devtools, trace error stack, dan konflik assets.

Anatomi Minimal — Komponen OWL

/** static/src/js/my_widget.js **/
import { Component, useState } from "@odoo/owl";

export class MyCounter extends Component {
  setup() {
    this.state = useState({ value: 0 });
  }
  increment() {
    this.state.value++;
  }
}
MyCounter.template = "my_module.MyCounter"; // t-name di template XML

<!-- views/my_widget_templates.xml -->
<odoo>
  <templates id="template" xml:space="preserve">
    <t t-name="my_module.MyCounter">
      <div class="o_my_counter">
        <span t-esc="state.value"/>
        <button type="button" t-on-click="increment">Tambah</button>
      </div>
    </t>
  </templates>
</odoo>

Registries — Menghubungkan Komponen ke Odoo

/** static/src/js/my_action.js **/
import { registry } from "@web/core/registry";
import { MyCounter } from "@my_module/js/my_widget";

registry.category("actions").add("my_module.action_counter", {
  name: "Counter",
  Component: MyCounter,
  props: {},
});

Dengan registrasi di atas, kita bisa memanggil komponen sebagai Client Action via ir.actions.client dengan tag: "my_module.action_counter".

Assets — Mendaftarkan Berkas JS/SCSS

# __manifest__.py (contoh ringkas)
{
  "name": "My Module",
  "version": "1.0",
  "depends": ["web"],
  "assets": {
    "web.assets_backend": [
      "my_module/static/src/js/my_widget.js",
      "my_module/static/src/js/my_action.js",
      "my_module/static/src/scss/my_styles.scss",
    ],
  },
}

Pastikan path sesuai dan modul web menjadi dependensi agar registry OWL tersedia.

Prinsip Utama (Do/Don’t)

Do

• Pisahkan logika ke komponen kecil dan reusable.

• Gunakan state/props untuk aliran data yang jelas; hindari global state sembarangan.

• Manfaatkan services untuk utilitas umum (RPC, dialog, notification) alih‑alih mengulang kode.

• Dukung batching/performansi: debounce event berat, hindari render berlebih.

Don’t

• Jangan tulis business logic berat di komponen; simpan di Python, komponen hanya konsumsi.

• Jangan memodifikasi DOM di luar OWL lifecycle; gunakan template dan event binding OWL.

• Jangan lupa mendaftarkan assets; perubahan JS tidak akan aktif tanpa bundling yang benar.

Debugging & Diagnostik

• Aktifkan Developer Mode dan gunakan DevTools browser untuk memeriksa komponen, event, dan network.

• Gunakan logging konsisten (console.debug/info/warn/error) saat pengembangan, lalu rapikan sebelum rilis.

• Periksa konflik assets di __manifest__.py jika komponen tidak ter‑load.

Checklist Sebelum Masuk ke FAQ Detail

• File JS dan template XML tercantum di assets dengan path benar.

• Komponen memiliki template (t-name) dan terdaftar di registry sesuai kategori.

• Integrasi RPC diuji dengan data nyata dan error handling memadai.

• Styling terpisah di SCSS, tidak mengandalkan inline style.

• Tidak ada side‑effect DOM di luar mekanisme OWL.

Yang Akan Kita Jawab di FAQ JavaScript (OWL)

• Cara membuat Client Action dari nol dan memicunya dari menu.

• Menulis field widget baru dan mendaftarkannya ke form/tree.

• Memakai services bawaan (dialog, notification, rpc) dan membuat service kustom.

• Pola patching komponen inti secara aman.

• Tips performa dan anti‑pola yang sering menjebak.

Dengan prolog ini, kita siap melangkah ke FAQ JavaScript (OWL) — web client & widgets dan membedah kasus nyata yang sering kita temui di proyek Odoo 18 CE.