共用方式為


Picker 控制

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

Note

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

Picker 控制項。

描述

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

選擇器程式碼元件可讓您在畫布應用程式和自訂頁面中使用 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) )
);

限制

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