List và form hiện field theo khuôn có sẵn. Nhưng khi bạn muốn mỗi bản ghi thành một tấm thẻ tự thiết kế — ảnh, badge màu, layout riêng — đó là việc của kanban view. Và cái làm kanban linh hoạt là QWeb: ngôn ngữ template của Odoo cho phép nhúng biến, điều kiện, vòng lặp ngay trong HTML. Bài này dựng một kanban thật cho thẻ thành viên, với badge tự đổi màu theo điểm, để thấy QWeb hoạt động ra sao.

Cấu trúc kanban: field + template card

Odoo 19 dùng cú pháp kanban gọn: khai các field cần dùng, rồi một template t-name="card" mô tả một tấm thẻ:

<kanban>
  <field name="hang_the"/>       <!-- khai field dùng trong template -->
  <field name="diem"/>
  <templates>
    <t t-name="card">            <!-- Odoo 19: t-name="card" -->
      <div class="d-flex justify-content-between">
        <field name="name" class="fw-bolder fs-5"/>
        <span t-attf-class="badge #{record.diem.raw_value >= 100 ?
                            'text-bg-success' : 'text-bg-secondary'}">
          <field name="hang_the"/>
        </span>
      </div>
      <field name="partner_id" class="text-muted"/>
      <div class="mt-2">
        <i class="fa fa-star text-warning"/>
        <t t-esc="record.diem.value"/> điểm
      </div>
    </t>
  </templates>
</kanban>

Ảnh chụp mã XML nền tối định nghĩa kanban view Odoo 19, thẻ kanban khai hai field hang_the và diem rồi templates chứa một t có t-name bằng card, bên trong một div flex chứa field name in đậm cỡ lớn và một span dùng t-attf-class với biểu thức QWeb badge kèm điều kiện nếu record chấm diem chấm raw_value lớn hơn hoặc bằng 100 thì class text-bg-success màu xanh còn không thì text-bg-secondary màu xám bao field hang_the, tiếp theo field partner_id màu mờ, và một div có icon ngôi sao vàng cùng t-esc record chấm diem chấm value hiển thị số điểm

Hình 1: Kanban + QWeb. Ba điểm QWeb cần nhớ: t-name="card" đặt tên template thẻ (Odoo 19 bỏ kanban-box cũ); t-esc="record.field.value" chèn giá trị field vào HTML; t-attf-class dựng class động bằng cú pháp #{...} — ở đây badge chuyển text-bg-success (xanh) khi điểm ≥100, ngược lại text-bg-secondary (xám). Field muốn dùng trong template phải được khai ở đầu kanban.

Xem kết quả: badge đổi màu theo điểm

Cài kanban này và mở danh sách, đây là kết quả thật với 4 thẻ:

Ảnh chụp giao diện Odoo 19 kanban Thẻ thành viên có bốn tấm thẻ xếp ngang, thẻ VIP-0003 có badge Vàng màu xanh lá và ngôi sao 150 điểm, thẻ VIP-0001 có tên khách Nguyễn Văn An badge Bạc màu xanh lá và 120 điểm, thẻ VIP-0002 badge Bạc màu xám và 85 điểm, thẻ VIP-0004 badge Bạc màu xám và 0 điểm, mỗi thẻ có mã thẻ in đậm ở trên và số điểm kèm icon ngôi sao vàng ở dưới, góc phải trên có nút chuyển giữa chế độ kanban và list

Hình 2: Cùng template ở Hình 1, render ra giao diện. Điều kiện QWeb chạy đúng: VIP-0003 (150 điểm) và VIP-0001 (120 điểm) có badge xanh vì ≥100; VIP-0002 (85) và VIP-0004 (0) có badge xám. Mỗi thẻ hiện mã (đậm), tên khách (mờ), và số điểm kèm icon sao — tất cả do template ta viết.

Màu xanh/xám không phải bốn giá trị cố định — nó là một biểu thức đánh giá trên từng bản ghi. Đây là sức mạnh của QWeb: logic hiển thị nằm ngay trong template.

Các chỉ thị QWeb hay dùng trong kanban

  • t-esc="biểu_thức": chèn giá trị (đã escape an toàn) vào HTML. record.diem.value là giá trị đã định dạng; record.diem.raw_value là giá trị thô để so sánh.
  • t-out: giống t-esc nhưng cho phép HTML (dùng cẩn thận, chỉ với nội dung tin cậy).
  • t-if="điều_kiện" / t-elif / t-else: hiện/ẩn một khối theo điều kiện.
  • t-att-XXX="biểu_thức": đặt thuộc tính động; t-attf-XXX="...#{...}..." đặt thuộc tính dạng chuỗi có nội suy (như class ở trên).
  • t-foreach / t-as: lặp qua một danh sách (ví dụ vẽ các tag).
  • <field name="..."/> trong kanban dùng được widget: image cho ảnh, many2many_tags, priority...

Vài lưu ý Odoo 19

  • t-name="card" là chuẩn mới; template kanban-box cũ vẫn chạy nhưng nên dùng card.
  • Field phải khai ở đầu <kanban> nếu dùng trong biểu thức QWeb (như record.diem.raw_value) — không thì giá trị không có sẵn ở client.
  • Dùng class Bootstrap (d-flex, badge, text-bg-success, mt-2...) để bố cục, vì Odoo nạp sẵn Bootstrap — không cần CSS riêng.
  • Kanban tự nhóm (group) được nếu action truyền default_group_by hay field trạng thái phù hợp — biến kanban thành bảng cột kéo–thả kiểu Trello.

Ba ý mang về

  1. Kanban biến mỗi bản ghi thành một tấm thẻ HTML tự thiết kế qua template QWeb t-name="card"; khai field cần dùng ở đầu <kanban>.
  2. QWeb nhúng logic vào template: t-esc chèn giá trị (.value/.raw_value), t-attf-class dựng class động với #{...}, t-if hiện theo điều kiện. Đã chứng minh: badge xanh khi điểm ≥100, xám khi <100 — chạy thật trên 4 thẻ.
  3. Odoo 19 dùng t-name="card" (không kanban-box); tận dụng class Bootstrap có sẵn để bố cục thẻ, không cần CSS riêng.

Ba loại view hiển thị đã xong (form, list, kanban). Lần sau tới thanh công cụ đứng sau mọi view: Phần sau mổ xẻ search view — cách khai bộ lọc (filter) và nhóm (group by) sẵn có, kể cả bộ lọc bật mặc định khi mở màn hình.