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

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

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

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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/84b11dde-ecac-48e5-aa63-793b835b1351.png)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/1fc4b135-bf99-4ff9-82c9-10d3dbf29d19.png)

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

### リストの項目を選択肢にする場合
例えば `社員名簿テーブル` の `部署名` を選択肢にしたい場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/860cbc41-4153-4b39-a166-1a391f39c69b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/208dce3f-ccc1-4180-9966-e575d3af85e0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/d62bb151-cdbd-476a-ba27-a1e4dae8e262.png)

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/5bba9222-04fc-47d8-a802-3507811ff9f6.png)


## :pencil2:コンボボックス

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/61a2ddc1-1bdd-4b09-a62c-2add04132533.png)

### データソースの指定
`Items` にはテーブルもしくはテーブルの列名を設定します。

```ruby:Items
テーブル.列名

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/9e19f4c6-ab58-4eac-9168-619a809de8d7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/bf65eca1-b9cb-479e-9389-1b76a753e74f.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/b000b633-a592-44aa-9272-ab113923a4cf.png)

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

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

```ruby:Text
ComboBox1.Selected.Value
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/b77cde79-a648-4435-bfbc-f873e46408c0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/c228bc37-8328-424f-87d6-9a748f073e89.png)

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

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

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

```ruby:Text
Concat(選択部署,部署名,",")
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3719434/980dca9b-cea0-40da-b538-0c25e0e9db9d.png)

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