Power Apps での コンボ ボックス コントロール

ユーザーが、提供された選択肢から選択できるようにするコントロール。 検索と複数選択をサポートしています。

内容

コンボ ボックスコントロールでは、選択する項目を検索できます。 検索は、SearchField プロパティ上のサーバーサイド実行されるため、非常に大規模なデータ ソースによってパフォーマンスが影響されることはありません。

単一選択モードまたは複数選択モードは SelectMultiple プロパティを介して構成されます。

選択する項目を検索するとき、データ ウィンドウのレイアウト設定を変更することで、項目ごとに、1 つのデータ値、2 つの値、または画像および 2 つの値 (個人) の表示を選択できます。

小さな画面で表示する場合、アイテム リストのポップアップは使いやすさを向上させるためにフルスクリーン コントロールになります。

ユーザー ピッカー

Combo boxをユーザー ピッカーとして使用するには、データ ウィンドウのレイアウト設定から個人テンプレートを選択し、ユーザーの下に表示される関連データのプロパティを構成します。

主要なプロパティ

Items – 選択元となるデータのソース。

DefaultSelectedItems – ユーザーがコントロールを操作する前に、最初に選択した項目。

SelectedItems – ユーザーの操作の結果として選択された項目の一覧。

SelectMultiple – ユーザーが、単一の項目または複数の項目を選択できるかどうか。

IsSearchable – 選択する前にユーザーが項目を検索できるかどうか。

SearchFields - ユーザーがテキストを入力するときに検索されるデータ ソースのデータ フィールド。

追加のプロパティ

AccessibleLabel – スクリーン リーダー用のラベル。

BorderColor – コントロールの境界線の色。

BorderStyle – コントロールの境界線が実線、破線、点線、またはなしかどうか。

BorderThickness – コントロールの境界線の太さ。

DisplayFields – 検索によって返される各項目に対して表示されるフィールドの一覧。 プロパティ オプション タブで、データ ウィンドウを介して構成するのが最も簡単です。

DisplayMode – コントロールがユーザー入力を許可するか (編集)、データのみを表示するか (表示)、または無効にするか (無効) どうか。

FocusedBorderColor – コントロールがフォーカスされているときのコントロールの境界線の色。

FocusedBorderThickness – コントロールがフォーカスされているときのコントロールの境界線の太さ。

Height – コントロールの上端と下端間の距離。

InputTextPlaceholder – 項目が選択されていない場合、エンドユーザーに表示される説明テキストです。

OnChange – ユーザーが選択を変更したときに実行するアクション。

OnNavigate – ユーザーがアイテムを選択したときに実行するアクション。

OnSelect – ユーザーがコントロールをタップまたは選択したときに実行するアクション。

TabIndex – 他のコントロールに関連するキーボード ナビゲーションの順序。

Visible – コントロールが表示されるか非表示になるか。

Width – コントロールの左端と右端間の距離。

X – コントロールの左端とその親コンテナー (親コンテナーがない場合は画面) の左端間の距離。

Y – コントロールの上端とその親コンテナー (親コンテナーがない場合は画面) の上端間の距離。

使用例

Basic コンボ ボックス

この例の手順は、すべてのテーブルを提供するデータ ソース に適用されますが、これらの手順を正確に実行するには、サンプルデータを持つ Microsoft Dataverse データベースを使用してください。

1. 挿入 > 入力 > Combo boxを選択して、「Combobox1」という名前をつけます。

2. 画面右側のペインのプロパティで、データ ソースを選択しますリスト (Itemsの隣) を開いて、そのあとで取引先企業テーブルなどのデータ ソースを追加または選択します。

3. 同じペインで、編集 (フィールドの隣) を選択します。

4. データペインにある、プライマリ テキストリストを開いてコンボ ボックスコントロールに表示されるプライマリ名列を選択します。

5. Alt キーを押しながら下矢印を選択して、コンボ ボックス コントロールを開きます。

   コントロールには、データ ソースに指定したプライマリ名のデータが表示されます。

(オプション) デフォルトで最初のレコードを表示します

1. DefaultSelectedItems を設定して、そのデータ ソース名で DataSource を置き換えます:

   First(DataSource)
   

(オプション) ラベルに選択した取引先企業名の値を表示します

1. 挿入 > テキスト ラベルを選択して、次にLabelを選択します。

2. この式でTextプロパティを設定して、次の式でテキストを置き換えます:

   If(CountRows(ComboBox1.SelectedItems)>0, Concat(ComboBox1.SelectedItems,'Account Name',", "), "NO SELECTED ITEM")
   

   注意

   If ステートメントでは、選択されたアイテムがどれだけ存在するかを確認し、それらをコンマ区切りのラベルで表示するか、空の場合は「選択されたアイテムはありません」メッセージを表示します。

単純なドロップダウン動作をシミュレートする

IsSearchable を false、SelectMultiple を false に設定することで、ドロップダウンと同じ機能を実現できます。

1. 挿入 > 入力を選択して、次にCombo boxを選択します。

2. 画面右側のペインのプロパティで、データ ソースを選択しますリスト (Itemsの隣) を開いて、そのあとでデータ ソースを追加または選択します。

3. 同じペインで、編集 (フィールドの隣) を選択します。

4. データ ウィンドウで、主要テキストリストを開いてから、コンボ ボックス コントロールに表示する列を選択します。

5. IsSearchable プロパティを false に設定します。

6. SelectMultiple プロパティを false に設定します。

7. Alt キーを押しながら下矢印を選択して、コンボ ボックス コントロールを開きます。

   コントロールには、指定したデータ ソースで指定した列からのデータが表示されます。

   注意

   「アイテムを検索」のテキストが消え、1 つのアイテムしか選択できなくなりました。

アクセシビリティのガイドライン

色のコントラスト

次の間には適切な色のコントラストが必要です:

• ChevronFill と ChevronBackground
• ChevronHoverFill と ChevronHoverBackground
• SelectionColor と SelectionFill
• SelectionFill と Fill
• SelectionTagColor と SelectionTagFill

これは、標準の色のコントラスト要件 に追加されるものです。

スクリーン リーダー サポート

• AccessibleLabel が存在する必要があります。

  注意

  タッチ スクリーンでは、スクリーン リーダーのユーザーはコンボ ボックスのコンテンツを順番に移動できます。 コンボ ボックスは、選択したときにコンテンツの表示または非表示を切り替えるボタンとして機能します。

キーボードのサポート

• TabIndex を 0 以上にして、キーボード ユーザーがそこに移動できるようにする必要があります。

• フォーカス インジケーターは明確に表示する必要があります。 これを実現するには FocusedBorderColor および FocusedBorderThickness を使用します。

  注意

  タブ キーを押すと、コンボ ボックスに移動したり、コンボ ボックスから移動したりします。 矢印キーを押すと、コンボ ボックスのコンテンツに移動します。 Esc キーは、開いたときにドロップダウンを閉じます。