H-List & V-List sử dụng Master Data

Hướng dẫn sử dụng Pango Element đặc biệt trên hệ thống PangoCDP

Master Data cho H-List và V-List

H-List & V-List Element hỗ trợ thêm tùy chọn sử dụng master data để làm nội dung.

Ví dụ sử dụng H-List & V-List Element:

1. Danh sách sản phẩm theo danh mục: Trong một ứng dụng mua sắm, bạn có danh sách sản phẩm từ Master Data và muốn hiển thị theo danh mục. Khi người dùng chọn Category A, hệ thống sẽ tự động hiển thị sản phẩm từ số 1 đến 10. Nếu người dùng chọn Category B, danh sách sẽ tự động chuyển sang hiển thị các sản phẩm từ số 11 đến 20. Điều này giúp tối ưu hóa trải nghiệm duyệt sản phẩm dựa trên sở thích cá nhân.

2. Danh sách nhà hàng theo khu vực: Nếu bạn đang làm một ứng dụng đặt món ăn, bạn có thể sử dụng H-List & V-List để hiển thị danh sách các nhà hàng. Khi người dùng chọn khu vực Quận 1, danh sách sẽ hiển thị các nhà hàng thuộc khu vực đó, trong khi chọn khu vực Quận 2 sẽ hiển thị danh sách các nhà hàng khác.

3. Danh sách ưu đãi theo loại dịch vụ: Trong một ứng dụng khuyến mãi, bạn có thể cho người dùng chọn các loại ưu đãi như Ưu đãi ăn uống, Ưu đãi mua sắm, Ưu đãi du lịch. Khi người dùng chọn Ưu đãi ăn uống, hệ thống sẽ hiển thị danh sách các mã giảm giá liên quan. Nếu họ chọn Ưu đãi mua sắm, danh sách ưu đãi cho mua sắm sẽ xuất hiện.

Khi nào nên sử dụng H-List & V-List Element:

• Khi bạn có một danh sách dài các mục (sản phẩm, dịch vụ, cửa hàng) và cần phân loại hoặc lọc dựa trên tiêu chí người dùng chọn.

• Khi bạn muốn tự động hiển thị dữ liệu từ Master Data theo lựa chọn của người dùng mà không phải tạo từng danh sách thủ công.

• Khi cần tối ưu hóa giao diện để hiển thị thông tin theo dạng danh sách ngang (H-List) hoặc danh sách dọc (V-List), giúp người dùng dễ dàng xem và chọn lựa mục hơn.

Chuẩn bị Master Data ở đây.

Lưu ý: Ngoài các trường thông tin Type, Code, Name, ParentId, Status, để sử dụng cho listing, bạn cần bổ sung các trường dưới đây:

• CustomField01: Tương ứng với Title của item.

• CustomField02: Tương ứng với Subtitle của item.

• CustomField03: Đường dẫn ảnh.

Cách 1

• Sử dụng link: https://your-zminiapp-link&pano_source=Selection02 vào ô "Master data parent field".
• Để Form load được danh sách item tương ứng từ Master Data, bạn cần thêm một tham số vào đường dẫn của Mini App. Đặt tham số theo quy cách pango_[youkey].

Ví dụ trên, pango_source là tham số và giá trị là Selection02 -> nghĩa là Form sẽ load những item có parentId là Selection02 từ Master Data.

Cách 2

Để load danh sách từ Master Data theo giá trị được chọn từ một element khác:

1. Chọn 1 item từ drop list ở phía trên, và danh sách tương ứng sẽ được load ở phía dưới. Tên của trường field name của drop list là pango_selection.

1. Trong mục "Master data parent field" của Listing, nhập field name của drop list là pango_selection.

Điều này sẽ giúp form load danh sách dựa trên giá trị đã chọn từ drop list.