Power Apps のコンボボックスを使ってリスト A とリスト B を連携させるテクニック


# はじめに

Power Apps で、複数の SharePoint リストを用いたアプリを作成する場合があります。例えば、注文を管理するアプリを作成したい際、商品の一覧のリストと、商品に対する注文の処理を記録するリストを用意するような感じです。

* リスト A:商品マスターリスト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/283b5fe9-bf7f-c367-8b4e-a000d4cbd831.png)

* リスト B:注文リスト

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/831fa8a1-2732-41a4-665a-061a1012352c.png)

このようなケースにおいて、Power Apps のアプリで商品に対する注文処理を実装しようとする際、商品マスターから商品を選べるようにしたいと思います。今回は、そのような際によく使う方法について紹介します。

:::note warn
参照列を利用する方法もありますが、今回は、テキスト列で商品 (Item) 列を作成している場合における方法を紹介します。
:::

# 実装アプローチ

とりあえず、以下のように、フォームコントロールを配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e99c06c0-7c1f-3b92-8727-80526b169c68.png)

商品の箇所について、テキスト型のため、自由入力できてしまいます。こちらを、商品マスターから選択するように変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/dcfd9006-e934-c16b-d393-21db22d00478.png)

まず、フォームコントロールのデータカード内にコンボボックスを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f7e9a0d6-7352-b7d7-bc7a-d3cdc0e447de.png)

上手く追加できると、以下のように、データカードの他のコントロールと重複したような感じになると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/80c650f4-91d7-f1bb-bc1a-59297c46773a.png)

こちらのコンボボックスのデータソースを商品マスターにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0d18ec92-ef34-9eed-c3c8-03bd97bb68d6.png)

以下の三か所を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fea9386a-a056-49c4-44f1-08a7738ae2b3.png)

`[DisplayFields]`と、`[SearchFields]`は、商品マスターの列において、コンボボックス内で検索したい列、検索結果で表示したい列となります。今回は、Title 列の名前を変更し、商品名を入れているため、`["Title"]`とします。また、`[SelectMultiple]`を false にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b8501125-f6a9-0dd5-24be-34aae3a25a30.png)

問題なく、商品名で検索や表示が出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ec619c7c-1c33-3b20-63c0-8bb00f7c65c3.png)

そして、元々存在した、DataCardValue8 の `[Default]`プロパティを、`ComboBox2.Selected.タイトル`とします。こちらは、コンボボックスで選択されたもののタイトル列という意味になります。コンボボックスを利用する際、よく利用する表現になります。タイトルの部分は、要件次第で変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/888bd724-a493-6e5d-81c6-4f82050458c9.png)

上手く動作すると、以下のような感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/287a81a6-ed3c-0162-23cd-f61901c7cc6b.png)

次に、コンボボックスの位置やサイズを変更し、以下のように、DataCardValue8 を隠すようにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7580274b-b8d1-a6b5-9033-8109c5204ed1.png)

その結果、アプリの利用者は商品列に対して自由入力ができなくなり、コンボボックスから選択する必要が出てきます。しかし、実際には、コンボボックスで選択をすると、後ろに存在する、DataCardValue8 にも値が入り、データが登録されます。

:::note
DataCardValue8 自体を削除したい場合は、データカードの`[Update]`プロパティを、`ComboBox2.Selected.タイトル`にして、DataCardValue8 を削除します。この場合も、コンボボックスで選択したもののタイトルが商品列に入ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7fb071a3-27b2-6517-628b-174e5e1872cb.png)
:::

実際にデータを登録してみました。無事に商品の箇所にデータが入っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0685ae44-223a-3e28-3958-2f12053285d6.png)

# まとめ

今回は、Power Apps のコンボボックスを使ってリスト A とリスト B を連携させるテクニックについて紹介しました。リレーションシップの設定が出来ないデータソースで複数のテーブルを使用して連携させるケースもあると思うので、一つのアプローチとして参考にしていただけると幸いです。