1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Power Apps】入力コントロール ドロップダウンとコンボボックスの違いについて

Posted at

はじめに

Power Apps でアプリを作成している時にユーザーに値を選択させる方法として
ドロップダウンコンボボックス があります。
どちらも選択方式ではありますが、明確にはどのような違いがあるのでしょうか??
本記事では ドロップダウンコンボボックス の違いについての説明およびに
各コントロールの設定方法について説明したいと思います:clap:

各コントロールのおおまかな違いについて

それぞれのコントロールの違いについてざっくりと以下の表にまとめています。
項目の詳細については以下で説明していきます!

項目 ドロップダウン コンボボックス
複数選択 不可(単一選択) 可能(複数or単一選択)
検索機能 なし あり
カスタム入力 不可 可能(要設定)
データ表示 単純なリスト テーブルデータの列を選択して表示
用途 シンプルな選択肢 選択肢が多い時、複数選択したい時

:pencil2:ドロップダウン

コントロールの挿入で ドロップダウン を選択します。

image.png

手入力で選択肢を作成する場合

Items に選択肢を入力します。
[] で選択肢全体をくくります。
各選択肢はテキスト型になるので ""(ダブルコーテーション) でくくります。

Items
["選択肢A","選択肢B","選択肢C","選択肢D","選択肢E"]

以下のようにドロップダウンで選択することができるようになりました。

image.png

好きな選択肢を設定することができますが、選択肢内容に修正を加えると
アプリ自体の修正が必要になってきますので設定時からなるべく不変のものとなるようにしましょう。

リストの項目を選択肢にする場合

例えば 社員名簿テーブル部署名 を選択肢にしたい場合

image.png

コントロールの Items には 社員名簿テーブルValue には 部署 を選択します。

image.png

以下のようにドロップダウンで選択することができるようになりました。
ですが重複している値に関しては重複の排除を行いたいですよね?

image.png

重複の削除を行いたい場合は Distinct関数 を使用します。

ドロップダウンの Items の中身を以下のように変更してください。

Items
Distinct(社員名簿テーブル,部署)

そうすると重複が排除されて選択肢がスッキリしました!

image.png

:pencil2:コンボボックス

コントロールの挿入で コンボボックス を選択します。

image.png

データソースの指定

Items にはテーブルもしくはテーブルの列名を設定します。

Items
テーブル.列名

// 今回設定する値
社員名簿テーブル.部署

ドロップダウンの選択肢と同様の表示となりました。
重複を排除したいので、ドロップダウン時と同様に Distinct関数 を使用して値の重複排除を行います。

image.png

複数選択を許可する

プロパティの中に 複数選択の許可 があります。
こちらのオンオフを切り替えることで値の複数選択が可能になります。

image.png

複数選択をオンにしている状態↓

image.png

アプリ上で複数選択が可能であっても、保存先の列が複数選択に対応していなかったり
文字数制限が超えていると保存ができないのでご注意ください。

値の取得

コンボボックスで選択した値をテキストラベルに表示させます。
コンボボックスにはレコードを格納しているので .Value をつけて値を取得します。

Text
ComboBox1.Selected.Value

image.png

:anger_right:取得はできていますが複数選択を可能にしている場合、コンボボックスでは一番最後に選んだレコードの値が表示されます。

image.png

このような場合は一工夫必要で選択した値を一度 コレクション に格納する必要があります。
コンボボックスの OnChange に以下を設定してコレクションに値を格納させます。

OnCange
Collect(選択部署,{部署名:Self.Selected.Value})

そしてテキストラベルには以下を設定します。
, を区切り記号にしてテーブルに格納している値を結合させます。

Text
Concat(選択部署,部署名,",")

コンボボックスで値を選択すると以下のように複数選択を行っても
すべての値が取得できるようになりました。

image.png

:hatched_chick:まとめ

以上がドロップダウンとコンボボックスのおおまかな違いになります!!
選択肢が少なくシンプルに選んでほしい場合は ドロップダウン
選択肢が多く、複数選択も可能にして、検索もしたい場合は コンボボックス
ドロップダウンが比較的扱いやすいかなとは思いますが
アプリの用途に併せてぜひ色々な機能を試してみてください!!!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?