Chuyển tới nội dung chính

Tùy Biến Giao Diện Không Cần Code (No-Code Form Design)

Sứ Mệnh Của Bài Học

Trong các phần mềm kế toán và ERP truyền thống, mỗi khi phát sinh nhu cầu thêm một trường thông tin đặc thù (ví dụ: thêm ô điền "Xe tải lạnh giao hàng" vào Đơn bán hàng), doanh nghiệp sẽ phải trả chi phí nâng cấp hàng chục triệu đồng và chờ đợi lập trình viên sửa code hệ thống cả tháng trời.

Với ERPNext, "đặc quyền IT" này được giao trực tiếp cho Quản trị viên hệ thống của Vicore F&B. Bài học này hướng dẫn cách tùy biến giao diện kéo thả không cần code (No-Code Customize Form) chỉ trong 3 phút mà vẫn bảo toàn khả năng nâng cấp hệ thống sau này.

1. Thêm Trường Dữ Liệu Tùy Chỉnh (Customize Form)​

Để thêm thông tin quản lý phương tiện vận chuyển vào chứng từ Đơn bán hàng (Sales Order) phục vụ việc giao hàng nước ép chanh cho chuỗi siêu thị WinMart, chúng ta thực hiện các bước:

  1. Mở màn hình Đơn bán hàng (Sales Order), chọn Menu tùy chọn góc phải và bấm Customize.
  2. Màn hình lưới danh sách các trường dữ liệu hiện ra. Bấm nút Add Row để tạo trường mới.
  3. Label: Điền tên hiển thị là Xe tải lạnh giao hàng.
  4. Type (Định dạng): Chọn Data (nếu cho gõ chữ tự do) hoặc Select (nếu gõ danh sách cứng). Tuy nhiên, để đảm bảo tính chính xác, chúng ta sử dụng kiểu liên kết nâng cao ở phần dưới.
  5. Bấm Update. ERPNext sẽ tự động tái cấu trúc Database ở back-end và render ô nhập liệu mới lên giao diện người dùng ngay lập tức.

Nếu bắt nhân viên gõ tay biển số xe (ví dụ: gõ lộn từ 51D-987.65 thành 51D-98765), kế toán và thủ kho sẽ gặp khó khăn lớn khi đối chiếu chi phí nhiên liệu và lịch trình xe. Để giải quyết triệt để, chúng ta sử dụng kiểu dữ liệu Link Field:

  • Trong lúc thiết lập Custom Field, chọn Type là Link.
  • Tại ô Options, khai báo bảng dữ liệu đích là Vehicle (Doctype quản trị đội xe đã học ở phân hệ Fleet).

Hiệu quả hoạt động:​

Khi nhân viên kinh doanh tạo đơn hàng cho WinMart, tại ô "Xe tải lạnh giao hàng", hệ thống hiển thị dưới dạng một thanh tìm kiếm (Search bar). Nhân viên chỉ cần gõ số xe, ERPNext tự động truy vấn vào danh mục xe của phòng Vận tải và lôi ra biển số xe chính xác 51D-987.65 để click chọn, loại bỏ hoàn toàn việc gõ sai chính tả.

3. Thiết Kế Bố Cục Bằng Section & Column Break​

Nếu thêm nhiều trường tùy chỉnh mà không sắp xếp, màn hình nhập liệu sẽ dài lê thê và rất khó nhìn. ERPNext cung cấp 2 công cụ phân vùng giao diện trực quan:

  • Section Break (Phần chia): Gom nhóm các trường thông tin liên quan vào một khối. Chúng ta tạo một Section Break có tiêu đề là THÔNG TIN GIAO NHẬN VẬN TẢI để ngăn cách với phần thông tin giá bán sản phẩm.
  • Column Break (Cột chia): Chia màn hình nhập liệu thành các cột song song (tối đa 2 cột) để tối ưu hóa không gian hiển thị:
    • Cột bên trái: Trường Xe tải lạnh giao hàng (Link với Doctype Vehicle).
    • Cột bên phải: Trường Tài xế phụ trách (tự động nội suy từ hồ sơ xe thông qua cấu hình Fetch From là vehicle.driver).
Tính Toàn Vẹn Dữ Liệu

Việc kéo thả và liên kết các phân hệ thông tin (Sales ➔ Fleet ➔ HR) không những giúp nhân viên nhập liệu nhanh hơn mà còn tạo ra sợi xích dữ liệu thống nhất, giúp kế toán bóc tách chính xác chi phí logistics của từng đơn hàng cụ thể.