Giao diện

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

Cài đặt ​

Plugin @digiforce-nc/plugin-block-workbench 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 — action panel cấu hình qua UI schema.

Thêm Action Panel block ​

  1. Mở trang ở chế độ thiết kế (Schema Editor).
  2. Click Add block → chọn Workbench (Action Panel).
  3. Block xuất hiện với layout trống, sẵn sàng thêm action.

Thêm action vào panel ​

  1. Trong chế độ thiết kế, click Add action trên block.
  2. Chọn loại action muốn thêm (xem bên dưới).
  3. Cấu hình chi tiết cho action: icon, label, màu sắc, hành vi.

Bốn loại action ​

Mở modal hoặc drawer chứa form hoặc block tùy chỉnh:

  • Click → popup hiển thị với nội dung bên trong.
  • Phù hợp cho: mở form nhập liệu nhanh, xem chi tiết, wizard.

Chuyển hướng đến URL hoặc route nội bộ:

  • Hỗ trợ URL nội bộ (route trong ứng dụng) và URL bên ngoài.
  • Phù hợp cho: shortcut đến trang thường dùng, mở link ngoài.

QR Scanner ​

Mở camera thiết bị để quét mã QR hoặc Barcode:

  • Sử dụng thư viện html5-qrcode để quét realtime.
  • Khi scan thành công → callback xử lý (navigate, gọi API, hiển thị kết quả).
  • Phù hợp cho: check-in, quản lý kho, xác nhận giao hàng.

Custom Request ​

Gọi API endpoint tùy chỉnh:

  • Cấu hình URL, method (GET/POST), headers, body.
  • Click → gửi request, hiển thị kết quả (thành công/thất bại).
  • Phù hợp cho: trigger workflow, đồng bộ dữ liệu, thao tác nhanh.

Tùy chỉnh giao diện action ​

Mỗi action có thể tùy chỉnh:

  • Icon: Chọn từ thư viện icon có sẵn.
  • Label: Tên hiển thị dưới icon.
  • Màu sắc: Tô màu icon/nền cho dễ nhận biết.
  • Badge: Hiển thị badge count (VD: số thông báo chưa đọc).

Mẹo

Workbench block tối ưu cho mobile — tạo app launcher style giống màn hình chính điện thoại, giúp user truy cập nhanh các hành động quan trọng.