Power Apps モデル駆動型アプリ/Dynamics365 でPCF Gallery を使用して、複数の列に入力された文字列を結合し1つの列に入力する

こんにちは。日本マイクロソフトの向井です。
今回は、Power Apps のモデル駆動型アプリやDynamics 365 で、複数の列に入力された文字列を結合して1つの列に入力する方法をご紹介します。

この方法を使用すると、Dynamics 365 の取引先企業テーブルの住所を1行で表示することができます。

Dynamics 365 の住所は、都道府県、市区町村などそれぞれでデータを格納する列が違うため、表示も複数の行になってしまいます。

フォームの編集画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/078e96a0-c14e-8519-dec1-fe09b7edc126.png)

作成されたフォーム
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/c1807e4f-26e4-3a2b-679b-e467341c8f20.png)

これらのそれぞれの列のデータを結合することで、このようにシンプルに表示をすることができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8976ad72-4dae-7bed-460a-4e6861190fff.png)

表示は1行でされますが、クリックをすると各列それぞれにデータを入力することができます。


これを実現するためにはPCF Gallery を使用します。


# 0. PCF Gallery とは

PCF Gallery は、Power Apps のコンポーネントフレームワークで作成されたコントロールのコレクションです。
世界中のPower Apps ユーザーが作成したコントロールが[こちらのサイト](https://pcf.gallery/)で公開されています。
公開されているコントロールはソリューションになっているので、ダウンロードして、Power Apps の環境にインポートすることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8df9e229-a569-1e7c-0c2d-8dbc8bcb29a6.png)
[PCF Gallery とは](https://pcf.gallery/about)


# 1. PCF Gallery からコントロールをダウンロードする

今回は、[こちらのPCF コントロール](https://pcf.gallery/any-composite-fields/) を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/604cdd9d-77f2-262d-fb7e-9fcc5e23a78e.png)

ダウンロードをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8344e2d0-64fd-3742-b516-a3480e4151f8.png)

GitHubが開きます。
Codeをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/777ed8d4-f90c-789b-b1fb-1e07ee7696f9.png)

Releasesから最新バージョンを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/e19627e8-20b8-182e-cff7-6b7645e533eb.png)

画面下部から、zipファイルをクリックし、ダウンロードします。
このzipファイルがソリューションになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8a0c47e4-bdf7-57a0-5f8c-587be949cef5.png)


# 2. ソリューションをインポートする
[Power Apps のホームページ](https://make.powerapps.com/)を開き、メニューからソリューションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/f04ae158-3872-6036-a2c2-72e6d6a9a743.png)

ソリューションをインポート を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/2137040a-b081-9ba9-eed1-3b2dce53979d.png)

参照 から先ほどダウンロードしたzipファイルをアップロードし、次へ進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/c0b0a28f-9f50-b05d-7fac-a31b20ee8038.png)

インポートをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/47fff37d-4818-f528-3e48-4bb8a27bf0aa.png)

しばらく待っていると、このようにソリューションのインポートが完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/f0cc2875-2063-419e-5672-4b1d99d842cf.png)


# 3. インポートしたPCF コントロールを使用する

データを表示させたいフォームを編集します。
データを表示させるための列を一つ用意しておきます。
今回は 住所(1行) というテキスト列を1つ追加しました。
保存&公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/0ab7a30c-3b53-e149-0f36-7f5cf09438a1.png)

クラシックに切り替えるをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/7af75406-ef59-0c89-8af9-85c24ac467a6.png)

先ほど用意したフィールドをダブルクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8ffbea81-47c5-7b74-d72a-3fee1fce8e9a.png)

コントロールタブを選択し、コントロールの追加をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/e76357b2-70fe-9ba1-9b05-944b675c0a7e.png)

Carfup.AnyCompositeFields を選択し、追加をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/cf563e5f-e9ab-94a7-7d59-694d07a8cb18.png)

まず、このコントロールを表示する設定をします。
今回は、Web、電話（スマホ）、タブレットすべてにチェックを付けました。

次に、結合したい列を選択していきます。
今回は住所に必要な項目を順番に選択しています。
選択したらOKをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8419d4b1-fec2-fd58-02d5-29bd76dff809.png)


保存＆公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/ed3b0e85-4147-634d-936d-70c9a0a573b9.png)


該当のモデル駆動型アプリを開いて、設定が反映されているか確認します。
このように1行に住所を表示させることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/34aac254-6aa4-4ab9-fec3-b041f9139a69.png)



# まとめ
今回はPCF Gallery を使用して複数のフィールドに入力されたデータを1つのフィールドにまとめて表示する方法をご紹介しました。
PCF Gallery で公開されているPCF コントロールを使うと、この他にも標準機能では難しい機能を実装可能です。
ぜひいろいろなPCF コントロール を使ってみてください。