Picker コントロール
検索エクスペリエンスを提供するために使用されるコントロール。
Note
説明書の全文とソース コードは、GitHub コード コンポーネント リポジトリ を参照してください。
Description
Pickers は、タグやファイルなどの 1 つ以上のアイテムを大きなリストから選択するために使用されます。
Picker コード コンポーネントは、Fluent UI Picker メニュー コンポーネントをキャンバス アプリとカスタム ページ内から使用できるようにします。
Tag Picker コード コンポーネントは、次の機能を提供します:
- 選択したタグの入力コレクションにバインドします。
- 提案されたタグの入力コレクションにバインドします。
- ユーザーが提案から選択したり、フリーテキスト タグを入力したりできるようにします。
- ユーザーがタグを追加または削除すると、変更時イベントが発生します。
- プログラムによるフォーカス設定を許可します。
データセット
Tag Picker には、次の入力データセットがあり、この記事の後半で説明する重要なプロパティで詳しく説明します。
TagsTagsDisplayName
SuggestionsSuggestionsDisplayNameSuggestionSubDisplayName
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
SetFocus を InputEvent としてサポートします。
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) )
);
制限
このコード コンポーネントは、キャンバス アプリとカスタム ページでのみ使用できます。