【Power Platform】コンボボックスにレコードセットのアイテムを表示する

## はじめに
Power Appsでコンボボックスを作成する際に、既存のリストをそのまま表示するのではなくコンボボックス用に表示内容を整え選択肢に設定したいと考えました。
そこでレコードセットを使って値を整形しリストのアイテムを表示する方法について整理しました。

## 前提
今回は取引先を選択するコンボボックスを作成します。
取引先名はリストで管理されており取引先ID、取引先名、取引先名略称の列を持っています。
![image (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/63e89e1f-3d4e-ecbe-422a-02304f07fc28.png)
コンボボックスには
　取引先名
　取引先ID_取引先名略称
といった形で、1つの選択肢に2行値を表示したいと考えています。

## １．画面上にコンボボックスを配置
画面左側の 挿入>入力 から、コンボボックスを選択し画面上に配置します。
![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/f6314d8b-a34b-c2ca-f69f-fac0b5989741.png)

## ２．レコードセットを作成
アプリ画面（Screen1）のOnVisibleにレコードセットを作成します。
レコードセットの作成にはClearCollect関数を使用します。
```
ClearCollect(
    SelectList,
        AddColumns(test,
            "Search_col",
                取引先ID & "@" & 取引先名 & "@" & 取引先名略称,
            "Select_col",
                取引先ID & "_" & 取引先名略称)
)
```

ここでは「SelectList」という名前のコレクションに、2つのレコードセットを準備しています。
(1) Search_col
　コンボボックス内で検索を行う際に、取引先ID、取引先名、取引先名略称すべてで検索が実行できるよう1つのセットに設定しました。
(2) Select_col
　取引先IDと取引先名の2つのアイテムが1行で表示されるように設定しました。
【表示内容】 取引先ID_取引先名略称
![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/6f23d335-714e-60fb-bb77-aef5b70bcf82.png)


## ３．コンボボックスに表示内容を設定
①まず、コンボボックスの 詳細設定タブ にある「items」に先ほど作成した「SelectList」を設定します。
![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/7e052197-444c-6807-7c1a-390fd8417b38.png)

②次に プロパティタブ に移動し、フィールドの 編集ボタン を押下します。
　するとキャプチャのようなデータの子画面が表示されます。
![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/d6407273-ed1b-4068-d1c7-e4e3df9a2492.png)
今回はコンボボックスに取引先名だけでなく
　取引先名
　取引先ID_取引先名略称
といった形で選択肢に2行表示したいので、レイアウトは初期値の「シングル」ではなく「二重線」を選択します。
レイアウトに「二重線」を選択すると、主要なテキストに加え副次的なテキストの設定が可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/79bf9f85-c51c-d9cf-304b-65cca779a668.png)

③主要なテキスト、副次的なテキスト、SearchFieldにそれぞで参照したいデータを設定します。
・主要なテキスト：
　選択肢の1行目には「取引先名」を設定したいため、取引先マスタの取引先名列（SupplierName）を選択します。
・副次的なテキスト：
　　選択肢の2行目には「取引先ID」と「取引先名略称」を1行で表示します。
　　先ほど作成したレコードセットの(2)Select_colを選択します。
・SearchField：
　　コンボボックス内検索を行う際に検索するデータを設定します。
　　取引先ID、取引先名、取引先名略称すべてで検索可能にするため、先ほど作成したレコードセットの(1)Search_colを選択します。
![image (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/9b572729-bb79-5bd6-169c-1b56a7d82925.png)

③コンボボックス内検索ができるように「検索の許可」をオンにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/a83afe48-6bfd-664c-4dc6-dac23237429c.png)

以上で設定は完了です。


## ４．動きを確かめてみる
コンボボックスの表示内容が理想通りになっているか確認してみます。
![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/9d36b01c-e420-785b-9887-e8a1d9219be3.png)

ボタンを押下すると、先ほど設定したレコードセットの値がしっかり表示されています。
![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/b0361714-f197-524e-4a78-a9bff2db357b.png)

取引先名略称の「A社」で検索をしてみると、A株式会社が絞り込まれました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/44ae83d5-8535-76fe-603b-80a724a90468.png)

次に取引先IDの「2」で検索すると、B株式会社が絞り込まれました。
![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/3c9f6261-4a2e-7b3e-ef02-c36d0c807aaa.png)

全ての取引先名に共通している「株式会社」で検索すると当然すべて表示されました。
![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2851732/41219ef8-2136-68d2-4d0b-d72c2ebbfc3c.png)

## ５．まとめ
Power Appsでは単純にリストの１つの列を表示するだけでなく、複数の列を1行に表示するなど簡単な設定で自由に編集を行うことができました。
機能を利用するだけでローコード、ノーコードで理想のアプリ開発ができるのは嬉しいですね。