Thêm một icon có dropdown lên thanh trên cùng Odoo: ba số liệu và một nút mở màn hình, gói trong systray

Ở bài registry ta đã nhét một mẩu chữ vào thanh trên cùng để minh hoạ cơ chế đăng ký. Giờ làm cho ra dáng: một icon cà phê có badge đếm, bấm vào bung ra dropdown hiện số liệu và một mục mở màn hình danh sách. Đây là kiểu mục systray bạn gặp khắp Odoo — biểu tượng chat, hoạt động, chuyển công ty đều là systray.

Systray là gì và nằm ở đâu

Systray là dải các mục nhỏ ở góc phải thanh điều hướng (system tray). Mỗi mục là một component OWL đăng ký vào category "systray" của registry. Web client duyệt category này, sắp xếp theo sequence, rồi vẽ ra. Điểm cần nhớ ngay: sequence càng nhỏ thì càng nằm về bên phải (gần avatar) — ngược với trực giác "nhỏ trước, bên trái".

Một mục systray "bài bản" thường không chỉ là chữ, mà là icon + dropdown. Odoo cho sẵn hai component để dựng dropdown: Dropdown và DropdownItem.

Hình 1: Component (trên) và template (dưới). static components = { Dropdown, DropdownItem } khai để dùng chúng trong template. Dropdown bọc một <button> (phần luôn hiện trên thanh) và một slot content (phần bung ra khi bấm). DropdownItem với onSelected.bind là một dòng bấm được — ở đây gọi action.doAction mở view. Đăng ký với sequence: 30.

Kết quả thật trên thanh

Khai hai file vào bundle web.assets_backend, nâng cấp. Icon cà phê xuất hiện ngay trên thanh, cạnh các mục có sẵn của Odoo:

Hình 2: Icon cà phê (badge "4" = tổng số thẻ) nằm cạnh các mục systray sẵn có (chat "3", hoạt động "2"). Vị trí của nó so với hai mục kia do sequence quyết định — cùng một cơ chế, cùng một dải.

Bấm vào icon, dropdown bung ra với số liệu thật và một mục mở màn hình:

Hình 3: Dropdown mở ra. Ba số liệu (4 thẻ, 385 điểm, 1 Vàng) do orm.searchRead nạp trong onWillStart. Dòng "Mở danh sách thẻ" là một DropdownItem — bấm vào chạy action.doAction("quan_ca_phe.action_the_thanh_vien"), đưa người dùng thẳng tới kanban thẻ. Một mục systray gọn gàng: liếc là thấy số liệu, một cú bấm là tới nơi.

Vài điều cần biết để nó đúng

• sequence quyết định vị trí, và nhỏ = phải. Nếu icon của bạn nằm sai chỗ so với mong muốn, chỉnh sequence (số nhỏ đẩy về gần avatar). Các mục lõi của Odoo dùng sequence riêng, bạn chèn xen vào giữa được.
• onWillStart để nạp dữ liệu, đừng nạp trong render. Số liệu trong dropdown gọi server, nên tải một lần lúc khởi tạo. Component systray sống suốt phiên nên dữ liệu là ảnh chụp lúc mở trang — cần tươi realtime thì phải nạp lại khi mở dropdown.
• Value đăng ký là { Component }, không phải class trần. Systray category chờ đúng hình dạng đó (khác "actions" nhận thẳng class). Sai hình dạng thì mục không hiện mà chẳng có lỗi.
• Đây vẫn là component OWL bình thường — dùng được useService, useState, mọi hook. Systray chỉ là nơi nó được gắn, không phải một loại component đặc biệt.

Ba ý mang về

1. Systray là dải mục ở góc phải thanh điều hướng; mỗi mục là component OWL đăng ký vào registry.category("systray").add(key, { Component }, { sequence }). Giá trị phải là { Component }, không phải class trần.
2. sequence quyết định vị trí, và số NHỎ nằm về bên PHẢI (gần avatar). Chèn xen giữa các mục lõi bằng cách chọn sequence phù hợp.
3. Dựng dropdown bằng Dropdown + DropdownItem: <button> là phần luôn hiện, slot content là phần bung ra, DropdownItem với onSelected là dòng bấm được (gọi action.doAction, orm, v.v.). Nạp dữ liệu trong onWillStart.

Ta đã gắn thêm mảnh nhỏ khắp nơi — field, view, systray. Phần sau làm thứ lớn hơn: một client action OWL — cả một màn hình riêng do bạn toàn quyền vẽ, mở từ menu như một app thực thụ.