Vì sao form Odoo mặc định mỗi field một hàng, còn muốn xếp hai field cạnh nhau thì phải hiểu con số 'col' đằng sau mỗi group

Mặc định, một form Odoo xếp mỗi field trên một hàng, kéo dài xuống dưới. Nhưng nhìn form chuẩn của Odoo thì field lại nằm hai cột, gọn gàng. Bí mật nằm ở thẻ <group> và một con số ít người để ý: col. Hiểu col, colspan và cách lồng group, bạn dựng được gần như mọi bố cục form mà không cần một dòng CSS. Bài này mổ xẻ chúng trên form thẻ thành viên.

col: số cột logic của group

Mỗi <group> chia không gian thành một số ô logic, mặc định là 2. Điểm mấu chốt hay bị bỏ qua: một field ăn 2 ô — một ô cho nhãn, một ô cho phần nhập. Vậy nên group mặc định (col=2) cho một field mỗi hàng.

Hình 1: Ba bố cục. Bố cục 2 cột kinh điển là group lồng group. col="4" cho hai field mỗi hàng (mỗi field 2 ô, 4/2 = 2). colspan cho một field chiếm nhiều ô hơn để rộng ra.

Bố cục 2 cột: group lồng group

Cách Odoo dựng form hai cột không phải bằng CSS, mà bằng một group bọc hai group con. Group ngoài col=2 đặt hai group con cạnh nhau; mỗi group con lại tự chia field 1-mỗi-hàng. Đây chính là cấu trúc form thẻ:

Hình 2: Hai group con "Thông tin thẻ" và "Điểm và số dư" nằm cạnh nhau — đó là group ngoài col=2 chứa chúng. Mỗi string trên group thành tiêu đề nhóm kèm gạch ngang. Bên trong mỗi group con, field xếp một hàng một.

col=4: hai field mỗi hàng

Muốn nén nhiều field vào ít hàng hơn, tăng col. Với col="4", mỗi hàng chứa được hai field (mỗi field vẫn 2 ô). Tôi thêm một tab demo với group col="4":

Hình 3: Cùng những field đó nhưng trong group col="4" — hai field một hàng: "Hạng thẻ" cạnh "Mức ưu tiên", "Điểm tích luỹ" cạnh "Nhận tin khuyến mãi", "Ngày cấp" cạnh "Số dư". Ba hàng thay vì sáu. Hợp khi field ngắn và muốn form gọn chiều dọc.

colspan: cho một field rộng ra

Trong một group nhiều cột, đôi khi bạn muốn một field chiếm rộng hơn phần còn lại — ví dụ ô ghi chú dài. Đó là việc của colspan:

<group col="4">
  <field name="ghi_chu" colspan="4" nolabel="1"/>   <!-- chiếm cả 4 ô = cả hàng -->
</group>

colspan="4" trong group col=4 khiến field chiếm trọn hàng. Kèm nolabel="1" để bỏ ô nhãn, dồn hết chỗ cho phần nhập. Đây là mẫu quen thuộc cho ô mô tả, địa chỉ, nội dung dài.

Vài lưu ý dựng bố cục

• Đừng lạm dụng col cao. col=4 gọn nhưng field dài (Many2one, ngày giờ) chen hai cột sẽ chật. Cân giữa gọn và dễ đọc.
• <group> không có string thì không có tiêu đề — vẫn chia cột bình thường, chỉ là không kẻ nhãn nhóm.
• Lồng group là cách chuẩn, đừng cố nhét mọi thứ vào một group với col rất cao. Hai group con dễ đọc hơn một group col=4 dày đặc.
• Toàn bộ chỉ là bố cục hiển thị — không đụng dữ liệu, đổi thoải mái.

Ba ý mang về

1. <group> chia form thành ô logic; col đặt số ô (mặc định 2), và mỗi field ăn 2 ô (nhãn + nhập) — nên col=2 cho 1 field/hàng, col=4 cho 2 field/hàng.
2. Bố cục 2 cột kinh điển là group lồng group: một group ngoài col=2 chứa hai group con — đây là cách Odoo dựng form hai cột, không cần CSS.
3. colspan cho một field chiếm nhiều ô để rộng ra (kèm nolabel cho ô dài); string trên group tạo tiêu đề nhóm. Tất cả thuần bố cục, không đụng dữ liệu.

Xong phần chia cột. Bài sau thêm công cụ ngăn nắp trong một nhóm: Phần sau về separator và gom nhóm trường — kẻ vạch phân đoạn và cụm các field liên quan cho form dễ đọc hơn nữa.