Power Apps での Combo box コントロール

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

内容

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

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

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

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

注意

数値 で項目を検索する場合、数値を Text() 関数のテキストに変換します。 たとえば、Text(12345)

ユーザー ピッカー

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

主要なプロパティ

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

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

注意

Default プロパティは非推奨です。DefaultSelectedItems を使用してください。

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

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

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

注意

IsSearchable 少なくともひとつつのテキスト フィールドを含むデータ ソースでのみ有効にできます。 検索を伴うクエリを委任するためには、Items 式が委任可能となっている必要があります。 つまり、Items 式内の if ステートメントはサポートされていません。

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

注意

複数のフィールドを検索するには、この形式: ["MyFirstColumn"、"MySecondColumn"] の SearchFields プロパティを選択します。 テキスト フィールドのみがサポートされています。

追加のプロパティ

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

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

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

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

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

注意

特定のテンプレートの複数の表示フィールドを更新するには、この形式: ["MyFirstColumn", "MySecondColumn"]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. データ ペインにある、プライマリ テキスト リストを開いて Combo box コントロールに表示される プライマリ名 列を選択します。

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

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

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

  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. データ ウィンドウで、主要テキスト リストを開いてから、Combo box コントロールに表示する列を選択します。

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

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

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

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

    注意

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

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

色のコントラスト

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

  • ChevronFillChevronBackground
  • ChevronHoverFillChevronHoverBackground
  • SelectionColorSelectionFill
  • SelectionFillFill
  • SelectionTagColorSelectionTagFill

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

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

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

    注意

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

キーボードのサポート

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

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

    注意

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

注意

ドキュメントの言語設定についてお聞かせください。 簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。 個人データは収集されません (プライバシー ステートメント)。