Power Appsのドロップダウンとコンボボックス

Rev.0, Y.Nishimura, 2023/6/11

Power Appsの入力コントロールのなかでよく使われるドロップダウンとコンボボックスについて、アプリの使用例を交えてご紹介します。
ドロップダウンは、選択肢が少ない場合に使用されます。一方、コンボボックスは、選択肢が多い場合に使用されます。また、コンボボックスでは、選択する項目を検索することができます。

ドロップダウンとコンボボックスの違い

ドロップダウンは、選択肢からアイテムを選ぶことができます。ただし一つのアイテムだけで、複数のアイテムを選択することはできません。

コンボボックスは、複数のアイテムを選択することもできますし、アイテムを検索することもできます。ドロップダウンの高機能版です。

 

参考文献:マイクロソフト公式ドキュメント

実例

ここでは、選択肢から選んだ姓名に対応する電子メールを表示するアプリを作成し、ドロップダウンとコンボボックスの違いを説明します。

データソース

データソースをExcelで作成し、OneDriveにアップロードします。

  • テーブル名:開発部名簿
  • 列名:姓名、電子メール(__PowerAppsID__の列は自動作成されますので不要です)

アプリの編集

次に、Power Appsを立ち上げます。

+作成 > 空のアプリ を選び、新規アプリを作成します。

データ > データの追加から OneDrive for Businessを選び、先ほど用意したテーブル「開発部名簿」に接続します。

ドロップダウン

以下のようにコントロールを配置します。

  • ドロップダウン:Dropdown1
  • ラベル:Label14

その他の項目ラベルの説明は省略します。

ドロップダウン「Dropdown1」に関して、以下のようにプロパティとそのfxを設定します。

  • Items = 開発部名簿
  • Value = 姓名
  • Default = “森田 健二”

ラベル「Label14」に関して、以下のようにプロパティとそのfxを設定します。

  • Text = Dropdown1.Selected.電子メール

コンボボックス

以下のようにコントロールを配置します。

  • コンボボックス:ComboBox1
  • ラベル:Label18

その他の項目ラベルの説明は省略します。

コンボボックス「ComboBox1」に関して、以下のようにプロパティとそのfxを設定します。

初期値はDefaultではなく、DefaultSelectedItemsで定義しますので、注意してください。

  • Items = 開発部名簿
  • DefaultSelectedItems = Filter(開発部名簿,姓名 in [“森田 健二”,”安藤 由美”])  // 初期値をテーブルとして設定します。Itemsで定義したテーブルからFilterなどで選択します。
  • IsSearchable = true   // IsSearchableをtrueとすることで、検索可能となります。
  • SelectMultiple = true   // SelectMultipleをtrueとすることで、複数のアイテムを選択することができます。。
  • DisplayFields = [“姓名”]   // コンボボックスに表示するフィールドを指定します。
  • SearchFields = [“姓名”]   // 検索するフィールドを指定します。

ラベル「Label18」に関して、以下のようにプロパティとそのfxを設定します。

コンボボックスで選択されたアイテムに対応する電子メールが、 ; (セミコロン)で連結された文字列として表示されます。

  • Text = Concat(ComboBox1.SelectedItems,電子メール,”;”)

動作を確認しましょう。

コンボボックスで選んだ姓名に対応する電子メールが表示されているのが確認できます。

初期設定ボタン

ドロップダウンとコンボボックスの初期設定をするためのボタンを追加します。

  • ボタン:Botton1

以下のようにプロパティとそのfxを設定します。

Reset関数で、指定されたコントロールを初期値に戻します。

  • Text = “初期設定”
  • OnSelect = Reset(Dropdown1);Reset(ComboBox1);

アプリの動作を確認しましょう。

以上


コメントを残すコメントをキャンセル

ピディアック株式会社をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

%%footer%%