Picker控制項

用於提供搜尋體驗的控制項。

Note

完整文件和原始程式碼可在 GitHub 程式碼元件存放庫中找到。

描述

選擇器用於從大清單中選擇一個或多個項目，例如標籤或檔案。

選擇器程式碼元件可讓您在畫布應用程式和自訂頁面中使用 Fluent UI 選擇器功能表元件。

標籤選擇器程式碼元件提供以下功能：

1. 會繫結到所選取標籤的輸入集合。
2. 會繫結到建議標籤的輸入集合。
3. 允許使用者從建議中選取或輸入任意文字標籤。
4. 當使用者新增或移除標籤時，會引發變更時事件。
5. 允許程式設計設定焦點。

資料集

標籤選擇器包含下列輸入資料集，本文後方的索引鍵屬性中將詳細描述這些資料集。

• Tags
  • TagsDisplayName
• Suggestions
  • SuggestionsDisplayName
  • SuggestionSubDisplayName

應使用 SearchTerm 輸出屬性篩選 Suggestions 資料集，例如：

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

內容

索引鍵屬性

屬性	描述
Items	標籤的集合 (資料表)。 應用程式負責新增或移除標記，以回應元件引發的 [新增] 或 [移除] 事件 (如下列 OnChange 事件區段中所述)。
Suggestions_Items	建議的集合 (資料表)。
TagMaxWidth	呈現時標記的最大寬度。 溢出文字被省略符號截斷，而懸停工具提示會顯示完整文字。
AllowFreeText	輸入值時，不要自動選擇第一個建議，以便可以提供自由文字項目，而不是從預先定義清單中進行選擇。
SearchTermToShortMessage	當搜尋字詞小於 MinimumSearchTermLength 時顯示的訊息。
HintText	未提供搜尋字詞時在選擇器中顯示的訊息。
NoSuggestionsFoundMessage	當建議集合不包含結果時顯示的訊息。
MinimumSearchTermLength	觸發建議彈出式視窗的最少字元數。
MaxTags	可以新增的最大標記數。 在此編號之後，標記選擇器將重新使用，直到刪除標記。
Error	當應顯示紅色錯誤邊框時，為 True。

Items 屬性

屬性	描述
TagsDisplayName	設定為包含標籤顯示名稱的欄名稱。

Suggestions 屬性

屬性	描述
SuggestionsDisplayName	設定為包含建議顯示名稱的資料行名稱。
SuggestionsSubDisplayName	(選用) 設定為包含次要文字行的資料行名稱。

樣式屬性

屬性	描述
Theme	接受使用 Fluent UI Theme Designer (windows.net) 產生的 JSON 字串。 將此留空將使用 Power Apps 定義的預設主題。 有關如何設定的指南，請參閱佈景主題。
FontSize	選擇器內顯示標記的字體大小。
BorderRadius	選擇器內顯示標記的框線半徑。
ItemHeight	選擇器內顯示標記的高度 (像素)。
AccessibilityLabel	螢幕助讀程式 aria-label

事件屬性

屬性	描述
Input Event	設定為要傳送到 TagPicker 的事件

Output 屬性

屬性	描述
SearchTerm	輸入到標記選擇器中的文字，可用來篩選建議資料集。
TagsDisplayName	觸發變更事件時，用來建立新標記的文字
AutoHeight	當標記選擇器包含多行時，Auto Height 屬性可用於控制回應式容器高度的高度。

行為

支援將 SetFocus 視為 InputEvent。

OnChange 事件

當新增或移除標籤時，TagPicker 元件會引發 OnChange 事件。 使用的屬性為：

屬性	描述
TagEvent	引發事件的名稱
TagKey	引發事件的項目索引鍵 (如果事件與標記有關)

事件應包含類似下列的運算式：

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) )
);

限制

此程式碼元件只能在畫布應用程式和自訂頁面中使用。