次の方法で共有


Picker コントロール

検索エクスペリエンスを提供するために使用されるコントロール。

Note

説明書の全文とソース コードは、GitHub コード コンポーネント リポジトリ を参照してください。

ピッカー コントロール

Description

Pickers は、タグやファイルなどの 1 つ以上のアイテムを大きなリストから選択するために使用されます。

Picker コード コンポーネントは、Fluent UI Picker メニュー コンポーネントをキャンバス アプリとカスタム ページ内から使用できるようにします。

Tag Picker コード コンポーネントは、次の機能を提供します:

  1. 選択したタグの入力コレクションにバインドします。
  2. 提案されたタグの入力コレクションにバインドします。
  3. ユーザーが提案から選択したり、フリーテキスト タグを入力したりできるようにします。
  4. ユーザーがタグを追加または削除すると、変更時イベントが発生します。
  5. プログラムによるフォーカス設定を許可します。

データセット

Tag Picker には、次の入力データセットがあり、この記事の後半で説明する重要なプロパティで詳しく説明します。

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

Suggestions データセットは、次の例のように SearchTerm 出力プロパティを使用してフィルター処理する必要があります。

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

プロパティ​​

重要なプロパティ

Property 説明設定
Items タグのコレクション (テーブル)。 アプリは、コンポーネントが発生させる Add または Remove イベントに応じてタグを追加または削除する責任があります (次の OnChange イベント セクションで説明します)。
Suggestions_Items 提案のコレクション (テーブル)。
TagMaxWidth レンダリング時のタグの最大幅。 オーバーフロー テキストは省略記号で切り捨てられ、ホバー ツールチップに全文が表示されます。
AllowFreeText 値を入力するときは、事前定義されたリストから選択するのではなく、自由なテキスト エントリを提供できるように、最初の候補を自動的に選択しないでください。
SearchTermToShortMessage 検索語句が MinimumSearchTermLength より小さい場合に表示するメッセージ。
HintText 検索語句が指定されていない場合に、Picker 内に表示するメッセージ。
NoSuggestionsFoundMessage 候補コレクションに結果が含まれていない場合に表示するメッセージ。
MinimumSearchTermLength 候補ポップアップをトリガーする最小文字数。
MaxTags 追加できるタグの最大数。 この数を超えると、タグが削除されるまで Tag Picker は再表示のみになります。
Error 赤いエラー枠を表示する場合は True。

Items プロパティ

Property 説明設定
TagsDisplayName タグ表示名を保持する列の名前に設定します。

Suggestions プロパティ

Property 説明設定
SuggestionsDisplayName 提案表示名を保持する列の名前に設定します。
SuggestionsSubDisplayName (オプション) テキストの 2 行目を保持している列の名前に設定します。

スタイル プロパティ

Property 説明設定
Theme Fluent UI テーマ デザイナー (windows.net) を使用して生成された JSON 文字列を受け入れます。 これを空白のままにすると、Power Apps が定義した既定のテーマが使用されます。 構成方法に関するガイドラインは、テーマ を参照してください。
FontSize Picker 内に表示されるタグのフォント サイズ。
BorderRadius Picker 内に表示されるタグの境界線の半径。
ItemHeight Picker 内に表示されるタグの高さ (ピクセル)。
AccessibilityLabel スクリーン リーダーの aria-label

イベントのプロパティ

Property 説明設定
Input Event TagPicker に送信するイベントに設定します

出力プロパティ

Property 説明設定
SearchTerm 候補データセットをフィルターするために使用できる Tag Picker に入力されたテキスト。
TagsDisplayName 変更時 イベント発生時に、新しい タグ を作成するために使用されるテキスト
AutoHeight Tag Picker が複数の行にまたがる場合、Auto Height プロパティを使用して、レスポンシブ コンテナーの高さを制御できます。

Behavior

SetFocusInputEvent としてサポートします。

OnChange イベント

TagPicker コンポーネントは、タグが追加または削除されると、OnChange イベントを発生させます。 使用されるプロパティ:

Property 説明設定
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) )
);

制限

このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。