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

Cài đặt

Plugin @digiforce-nc/plugin-block-multi-step-form 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 — dữ liệu form gửi đến collection API khi submit.

Thêm Multi-step Form block

1. Mở trang ở chế độ thiết kế (Schema Editor).
2. Click Add block → chọn Multi-step Form.
3. Chọn collection (data source) cho form.
4. Chọn chế độ hoạt động: Create, Edit, hoặc Add New.
5. Form wizard xuất hiện với Step 1 mặc định.

Thêm bước (Step)

1. Trong chế độ thiết kế, click nút + (Add Step) trên step bar.
2. Đặt tên cho bước mới.
3. Mỗi bước có grid layout riêng — kéo thả field vào bước tương ứng.

Cấu hình field cho từng bước

1. Click vào vùng nội dung của bước cần cấu hình.
2. Kéo thả field từ collection vào grid layout của bước đó.
3. Mỗi bước chứa nhóm field liên quan — VD: Step 1 = thông tin cá nhân, Step 2 = địa chỉ, Step 3 = xác nhận.

Ba chế độ hoạt động

Mode	Mô tả	Use case
Create	Tạo bản ghi mới	Form đăng ký, onboarding
Edit	Chỉnh sửa bản ghi có sẵn	Cập nhật hồ sơ
Add New	Thêm mới với preset values	Tạo nhanh với giá trị mặc định

Navigation giữa các bước

Form wizard cung cấp ba loại action:

Action	Mô tả
Next	Validate bước hiện tại → nếu OK, chuyển sang bước tiếp theo
Previous	Quay lại bước trước (không validate)
Submit	Merge dữ liệu tất cả bước → gửi đến collection API

Validation chạy từng bước — user phải điền đúng fields bước hiện tại trước khi chuyển bước.

Luồng submit

1. User điền đầy đủ tất cả bước.
2. Nhấn Submit ở bước cuối.
3. Hệ thống merge data từ tất cả steps thành một object.
4. Gọi collection API (create/update) với data đã merge.
5. Thông báo thành công, popup đóng (nếu trong popup).

Mẹo

Chia form phức tạp thành 3-5 bước — mỗi bước không quá 5-7 field — giúp user không bị choáng ngợp và giảm tỷ lệ bỏ form.