Bảng kanban chia cột theo trạng thái, mỗi cột có một thanh màu tóm tắt — và cái bẫy khiến nó nổ OwlError chỉ vì một dấu nháy

Kanban là kiểu view "bảng thẻ" — mỗi bản ghi là một thẻ, xếp thành các cột kéo-thả được. Hai thứ khiến kanban thực sự hữu ích cho quản lý: chia cột theo một field (mỗi cột là một nhóm) và progressbar — một thanh màu trên đầu mỗi cột tóm tắt phân bố bên trong. Bài này thêm cả hai vào kanban thẻ thành viên, và kể luôn cái bẫy đã làm nó nổ tung một lần.

default_group_by và progressbar

default_group_by trên thẻ <kanban> chia thẻ thành cột theo giá trị một field. <progressbar> vẽ một thanh trên đầu mỗi cột, mỗi màu ứng với số bản ghi mang một giá trị nào đó của field khác:

Hình 1: default_group_by="hang_the" chia cột theo hạng thẻ. <progressbar field="trang_thai" colors="..."> vẽ thanh phân bố theo trạng thái. Odoo 19 dùng <t t-name="card"> cho thẻ. Chú ý khối cảnh báo dưới cùng — sẽ nói ngay.

Cái bẫy: colors phải là JSON

Lần đầu tôi viết colors="{'dang_dung': 'success', ...}" — kiểu dict Python quen tay. Kết quả: mở kanban là hiện thẳng hộp lỗi đỏ "Rất tiếc! Đã xảy ra lỗi". Truy vết ra:

OwlError: ... Caused by: SyntaxError: Expected property name or '}' in JSON at position 1
    at JSON.parse (<anonymous>)
    at KanbanArchParser.parseProgressBar

Odoo JSON.parse thuộc tính colors — mà JSON đòi nháy kép. Dict Python nháy đơn không phải JSON hợp lệ. Cách sửa: dùng nháy đơn làm dấu bọc thuộc tính XML, còn bên trong là JSON nháy kép:

<!-- SAI: nháy đơn kiểu Python -> OwlError -->
<progressbar field="trang_thai" colors="{'dang_dung': 'success'}"/>

<!-- ĐÚNG: nháy đơn bọc ngoài, JSON nháy kép bên trong -->
<progressbar field="trang_thai" colors='{"dang_dung": "success"}'/>

Đây là loại lỗi khó chịu vì XML nạp không báo gì — nó chỉ nổ ở trình duyệt khi render, log máy chủ vẫn 200. Phải mở console/kỹ thuật mới thấy JSON.parse thất bại.

Kanban nhóm chạy thật

Sửa xong, mở kanban lên:

Hình 2: Hai cột theo hạng — "Bạc" (3 thẻ) và "Vàng" (1 thẻ). Progressbar trên mỗi cột: Bạc có ba đoạn xanh/vàng/đỏ vì ba thẻ ở ba trạng thái (đang dùng = xanh, hết hạn = vàng, khoá = đỏ); Vàng toàn xanh vì thẻ duy nhất đang dùng. Số bên phải thanh là tổng thẻ trong cột.

Kéo một thẻ từ cột "Bạc" sang "Vàng" sẽ đổi luôn hang_the của thẻ đó — vì cột chính là giá trị của field nhóm. Progressbar cũng tự tính lại. Đây là cách các app Odoo (CRM, dự án) cho bạn "kéo cơ hội qua giai đoạn" hay "kéo việc sang cột khác".

Vài lưu ý

• Nhóm theo field nào thì kéo-thả đổi field đó. Nhóm theo trạng thái → kéo thẻ là đổi trạng thái. Chọn field nhóm cho khớp thao tác người dùng muốn làm.
• progressbar và field nhóm có thể khác nhau. Ở đây nhóm theo hang_the nhưng progressbar theo trang_thai — cho thấy trong mỗi hạng có bao nhiêu thẻ ở mỗi trạng thái. Bấm vào một đoạn màu còn lọc nhanh theo màu đó.
• Màu hợp lệ: success, warning, danger, info, muted — ánh xạ sang bảng màu Bootstrap của Odoo.
• Nhớ khai <field name="..."> cho field dùng trong progressbar/template, nếu không kanban không nạp giá trị.

Ba ý mang về

1. default_group_by chia kanban thành cột theo field; <progressbar> vẽ thanh phân bố màu trên đầu mỗi cột; kéo-thả thẻ sang cột khác là đổi giá trị field nhóm.
2. Bẫy thật của Odoo 19: colors phải là JSON nháy kép, không phải dict Python — sai là OwlError/JSON.parse ở trình duyệt (máy chủ vẫn 200). Dùng nháy đơn bọc ngoài, JSON bên trong.
3. field nhóm và field progressbar có thể khác nhau (nhóm theo hạng, phân bố theo trạng thái); màu dùng bảng success/warning/danger/info/muted; nhớ khai <field> cho field được dùng.

Kanban lo phần trình bày thẻ. Bài sau thêm một công cụ lọc mạnh cho danh sách: Phần sau về search panel — bảng lọc dọc bên trái giúp bấm một cái là thu hẹp dữ liệu theo danh mục.