Giao diện

Cài đặt và sử dụng ​

Cài đặt ​

Plugin @digiforce-nc/plugin-block-tree thường được cài sẵn trong bản phân phối chính. Kích hoạt qua trang Plugin Manager.

Plugin hoạt động hoàn toàn ở client — đọc dữ liệu phân cấp từ collection API và render bằng Ant Design Tree.

Thêm Tree block ​

  1. Mở trang ở chế độ thiết kế (Schema Editor).
  2. Click Add block → chọn Tree.
  3. Plugin hiển thị danh sách collection có tree template (có field parentId).
  4. Chọn collection phù hợp (VD: departments, categories, folders).
  5. Tree block xuất hiện với cây phân cấp từ dữ liệu collection.

Tree template

Plugin tự động detect collection sử dụng tree template — collection có field parentId tạo quan hệ cha-con tự tham chiếu. Chỉ những collection này mới hiển thị khi thêm Tree block.

Cấu hình cơ bản ​

Title field ​

Mở Settings → chọn field hiển thị làm tiêu đề node trên cây (mặc định: title hoặc field đầu tiên).

Tìm kiếm ​

Tree block tích hợp ô Search phía trên cây:

  • Gõ từ khóa → các node matching được highlight.
  • Node cha tự động expand để hiện node con matching.

Expand / Collapse ​

  • Expand all: Mở rộng tất cả node.
  • Collapse all: Thu gọn về root level.
  • Cấu hình default expand level trong Settings (mặc định: level 1 — chỉ root).

Hiển thị số lượng ​

Bật Show count trong Settings để hiển thị badge số record con trên mỗi node.

Sử dụng làm Filter block ​

Tree block đặc biệt hữu ích khi dùng làm filter block — click node trên cây để lọc dữ liệu trên block khác:

  1. Thêm Tree block bên cạnh block cần lọc (Table, List, Grid Card...).
  2. Mở Settings của Tree block → Connect to block → chọn block đích.
  3. Cấu hình field liên kết (VD: departmentId).
  4. Click node trên cây → block đích tự lọc theo giá trị node.

Ví dụ ​

  • Tree hiển thị cây phòng ban (departments).
  • Table hiển thị nhân viên (employees).
  • Click "Phòng Kỹ thuật" → Table chỉ hiện nhân viên phòng Kỹ thuật.

Async loading ​

Với cây lớn (nhiều cấp, nhiều node), plugin hỗ trợ lazy load — chỉ tải children khi user expand node, giảm tải lần đầu.

Mẹo

Tree block kết hợp filter block là cách hiệu quả nhất để navigate dữ liệu phân cấp — user chọn danh mục trên cây, nội dung chi tiết cập nhật ngay bên cạnh.