Điều khiển Picker

Một điều khiển được sử dụng để cung cấp trải nghiệm tìm kiếm.

Lưu ý

Toàn bộ tài liệu và mã nguồn có trong kho lưu trữ thành phần mã GitHub.

Description

Bộ chọn được sử dụng để chọn một hoặc nhiều mục, chẳng hạn như thẻ hoặc tệp, từ một danh sách lớn.

Các thành phần mã bộ chọn cho phép sử dụng các thành phần của menu bộ chọn Fluent UI từ bên trong ứng dụng canvas và trang tùy chỉnh.

Thành phần mã Bộ chọn thẻ cung cấp các tính năng sau đây:

1. Liên kết với tập hợp đầu vào cho các thẻ đã chọn.
2. Liên kết với tập hợp đầu vào cho các thẻ được đề xuất.
3. Cho phép người dùng chọn từ các đề xuất hoặc nhập thẻ văn bản tự do.
4. Tạo sự kiện Khi thay đổi khi người dùng thêm hoặc xóa thẻ.
5. Cho phép Đặt tiêu điểm theo chương trình.

Tập dữ liệu

Bộ chọn thẻ có các tập dữ liệu đầu vào sau đây, được mô tả chi tiết trong Thuộc tính khóa ở phần sau của bài viết này.

• Tags
  • TagsDisplayName
• Suggestions
  • SuggestionsDisplayName
  • SuggestionSubDisplayName

Tập dữ liệu Suggestions phải được lọc bằng cách sử dụng thuộc tính đầu ra SearchTerm, ví dụ:

Search(colSuggestions,TagPicker.SearchTerm,"name")

Thuộc tính

Thuộc tính khóa

Thuộc tính	Description
Items	Tập hợp (bảng) thẻ. Ứng dụng chịu trách nhiệm thêm hoặc xóa các thẻ để phản hồi lại các sự kiện Thêm hoặc Xóa của thành phần (được mô tả trong phần sự kiện Khi thay đổi sau đây).
Suggestions_Items	Tập hợp (bảng) đề xuất.
TagMaxWidth	Chiều rộng tối đa của các thẻ khi kết xuất. Văn bản tràn sẽ bị cắt bớt bằng dấu chấm lửng và chú giải công cụ khi di chuột hiển thị văn bản đầy đủ.
AllowFreeText	Khi nhập một giá trị, không tự động chọn gợi ý đầu tiên để có thể cung cấp mục nhập văn bản miễn phí thay vì chọn từ danh sách được xác định trước.
SearchTermToShortMessage	Thông báo hiển thị khi Từ tìm kiếm ít hơn MinimumSearchTermLength.
HintText	Thông báo hiển thị bên trong Bộ chọn khi không có từ tìm kiếm nào được cung cấp.
NoSuggestionsFoundMessage	Thông báo hiển thị khi tập hợp Đề xuất không chứa kết quả nào.
MinimumSearchTermLength	Số lượng ký tự tối thiểu để kích hoạt hộp đề xuất thả xuống.
MaxTags	Số thẻ tối đa có thể được thêm. Sau số này, Bộ chọn thẻ sẽ chỉ hoạt động lại cho đến khi thẻ bị xóa.
Error	Đúng khi đường viền lỗi màu đỏ được hiển thị.

Thuộc tính Items

Thuộc tính	Description
TagsDisplayName	Đặt thành tên của cột chứa tên hiển thị thẻ.

Thuộc tính Suggestions

Thuộc tính	Description
SuggestionsDisplayName	đặt thành tên của cột chứa tên hiển thị đề xuất.
SuggestionsSubDisplayName	(Không bắt buộc) được đặt thành tên của cột chứa dòng văn bản phụ.

Thuộc tính kiểu

Thuộc tính	Description
Theme	Chấp nhận chuỗi JSON được tạo bằng cách sử dụng Fluent UI Theme Designer (windows.net). Để trống phần này sẽ sử dụng chủ đề mặc định được xác định bởi Power Apps. Xem chủ đề để biết hướng dẫn về cách đặt cấu hình.
FontSize	kích thước phông chữ của các thẻ được hiển thị bên trong Bộ chọn.
BorderRadius	bán kính đường viền của các thẻ được hiển thị bên trong Bộ chọn.
ItemHeight	Chiều cao của thẻ (pixel) được hiển thị bên trong Bộ chọn.
AccessibilityLabel	Nhãn aria cho trình đọc màn hình

Thuộc tính sự kiện

Thuộc tính	Description
Input Event	Đặt thành sự kiện để gửi tới TagPicker

Thuộc tính đầu ra

Thuộc tính	Description
SearchTerm	Văn bản được nhập vào Bộ chọn thẻ có thể dùng để lọc tập dữ liệu đề xuất.
TagsDisplayName	văn bản được sử dụng để tạo một Thẻ mới khi sự kiện Khi thay đổi được kích hoạt
AutoHeight	Khi bộ chọn thẻ bao bọc trên nhiều dòng, thuộc tính Chiều cao tự động có thể được sử dụng để điều khiển chiều cao của chiều cao vùng chứa đáp ứng.

Hành vi

Hỗ trợ SetFocus dưới dạng InputEvent.

Sự kiện Khi thay đổi

Thành phần TagPicker tạo sự kiện OnChange khi các thẻ được thêm hoặc xóa. Các thuộc tính được sử dụng là:

Thuộc tính	Description
TagEvent	Tên của sự kiện được tạo
TagKey	Khóa của mục đã tạo sự kiện (nếu sự kiện liên quan tới một thẻ)

Sự kiện này phải chứa một biểu thức tương tự như:

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

Giới hạn

Chỉ có thể sử dụng thành phần mã này trong ứng dụng canvas và trang tùy chỉnh.