Droplist

Hướng dẫn sử dụng Element thao tác cơ bản

Droplist element là thành phần để tạo ra danh sách dạng đổ xuống cho user chọn. Droplist chỉ hỗ trợ chọn 1 giá trị từ danh sách.

Vd: dùng để chọn tình trạng hôn nhân của User trong 3 trường hợp: Độc thân / Đã kết hôn / Đã ly hôn

Element này có thể được dùng để tạo ra các danh sách có nhiều lựa chọn, ngoài các thuộc tính chung như label, placeholder, required hay hiển thị theo điều kiện thì element này có một số cài đặt riêng như sau:

• Data Items: Là danh sách để người dùng lựa chọn, item nào được thêm vào trước sẽ được hiển thị phía trên, bao gồm 2 phần:

  • Display: là thông tin sẽ hiển thị trên màn hình cho user chọn

  • Value: là giá trị tương ứng sẽ được lưu trữ phục vụ cho việc tính toán của bạn (hệ thống lưu cả 2 thông display và value). Vd: bạn muốn tính toán +/- cho giá trị chọn theo kiểu số.

• Default Value: để set mặc định 1 giá trị được chọn khi form tải lên (vd: giá trị này thường xuyên được chọn) và user có thể thay đổi.

Droplist element hỗ trợ tính năng Date Validation để áp dụng cho loại dữ liệu ngày giờ. Việc này có thể áp dụng cho các mục đích sau.

Vd: Bạn có khuyến mãi đặc biệt vào 1 số ngày trong tháng (19,20,29,30 tháng 10) và khung giờ booking nhận khuyến mãi là (10:00, 11:00, 13:00, 14:00) → Bạn muốn khách hàng của mình chỉ có thể thấy ngày hiện tại trở đi và nếu họ chọn ngày hiện tại thì khung giờ cũng chỉ hiển thị các khung giờ sau current time trở đi

Ví dụ hôm nay là 20/10/2023 và thời điểm khách hàng book là 10:10 → kết quả như sau

• Ngày 19 sẽ không hiển thị

• Khi chọn ngày 20 (hiện tại) sẽ chỉ show khung giờ sau 10:10

• Chọn các ngày sau đó → hiển thị tất cả các khung giờ

Turn ON “Only show from the current date/time onwards” cho 2 droplist loại Date và Time

Droplist Booking Date

• Đặt field name là “booking_date".

• Date/Time Format: Dựa theo giá trị bạn đã nhập ở danh sách để xác định tương ứng (vd bên format là DD/MM/YYYY)

Droplist Time Slot

• Date/Time Format: Dựa theo giá trị bạn đã nhập ở danh sách để xác định tương ứng (vd bên format là HH:mm)

• Date Parent Field: Bạn chọn là booking_date → Nghĩa là danh sách này sẽ load theo giá trị chọn ở Booking Date