PowerApps コンポーネントフレームワーク : 開発したコントロールのパッケージ化と展開

今回は[前回の記事](https://qiita.com/kenakamu/items/13eae0bc1eb83ce671d5
)で開発した PowerApps Component Framework (PFC) コントロールをパッケージにして展開します。

# PCF のパッケージ

開発したコントロールは Common Data Service (CDS)/Dynamics 365 Customer Engagement (CE) のソリューションとしてパッケージにします。ソリューションについては以下記事を参照してください。

[参照: ソリューションの概要](https://docs.microsoft.com/ja-jp/powerapps/maker/common-data-service/solutions-overview)

では早速ソリューションを作成していきましょう。

1\. 任意の場所にソリューションとコントロールを含めるフォルダを作成。作成済のコントロールフォルダを移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/92b64ff9-b7f3-f3f5-5a03-f8255c5fb412.png)

2\. 同じフォルダ内に SampleSolution フォルダを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/9d9258c1-1eb8-760b-085f-7d163cdc9ebb.png)


3\. コマンドプロンプトで作成した Solution フォルダに移動して、以下コマンドを実行。
※発行者名やプリフィックスは上記のソリューションの概要を参照。

```shell
pac solution init --publisher-name SamplePublisher --publisher-prefix sam
```

4\. 既存のコントロールをソリューションに追加。

```shell
pac solution add-reference --path ../LinearControl
```

5\. 以下のコマンドで必要なパッケージをリストア。
※ msbuild のパスが通っていない場合は、Developer Command Prompt for VS2017/2019 から実行。

```shell
msbuild /restore
```

6\. 最後にビルドコマンドを実行。

- Release を指定することでマネージドソリューションとしてパッケージ化
- Debug を指定、または省略した場合、アンマネージドソリューションとなる

```shell
msbuild /p:configuration=Release
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/9d56920c-4b52-227a-988c-17e3baae20ff.png)

## 作成されるソリューションの内容

```pac solution init``` コマンドを実行されると .cdsproj ファイルとソリューションに必要な xml 類が追加されます。また ```add-reference``` コマンドを実行すると .cdsproj ファイルにアイテムが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/24513df4-fbd6-89bc-3419-82ac307181a6.png)

これらは msbuild でコンパイルできることから分かるように .NET Framework プロジェクトです。また Other フォルダにできるファイル類は CDS/Dynamics 365 CE のソリューションファイル類となっています。

# ソリューションのインポート

ソリューションは PowerApps の開発コンソールより実施します。

1\. https://make.powerapps.com に接続。管理者権限でログイン。任意の環境で Solutions を選択し、Import をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/f2736815-6a70-e5b3-121d-88c2bf130241.png)

2\. ビルドしたソリューションを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/fc902178-ea00-e0cc-b7e6-fc926a635dd4.png)

3\. 「次へ」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7df8e863-9b07-db98-b375-12c705ac8de3.png"/>

4\. 「インポート」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/70963f2c-0083-4ef8-0820-4115e5bac1c7.png"/>

5\. ソリューションのインポートが終わったら、「閉じる」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/e4901654-59b2-9027-98b5-d8e96f1e0663.png"/>

# コントロールの適用

最後の作ったコントロールを適用します。今回は取引先企業の従業員人数フィールドに適用してみます。尚、この際に表示される値などが、コントロールのマニフェストで指定した内容となります。

1\. Data | Entities | 取引先企業 を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/8a188ef1-079d-6f84-ee5e-44b5eeb562ef.png)

2\. Forms タブから「取引先企業」フォームを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/a362d186-af4d-dda9-b5c3-ab8a906639c8.png)

3\. 「Switch to classic」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ae1f7ea5-2606-cdc9-8649-9b90f47061a0.png)

4\. 「従業員数」フィールドを配置して、「プロパティの変更」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/9ad3ec3f-58fe-46c6-6d1b-1e071fbfc9d7.png)

5\. 「コントロール」タブより「コントロールの追加」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/898a06da-c08d-bd25-a9cc-98e911994f26.png"/>

6\. 開発した「Sample Slider Control」を選択して「追加」
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/fdbad96f-2076-aa84-69bf-130d289be9eb.png"/>

7\. Web で使えるようにチェックを行いプロパティを閉じる。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ba43aeaa-84b6-9c11-3bc5-5e21fa2f660b.png"/>

8\. 「未使用のフィールドのみ表示する」のチェックを外して、再度「従業員数」を配置。
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/9a992f93-20ee-84b7-d51b-09cfa6d30e9c.png"/>

9\. 「保存」を実行後、「公開」をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/ac48c236-5ab2-2543-9fad-37415bece6e7.png"/>

# 動作確認

アプリを作ってデータを確認します。

1\. Apps より Create an app | Model-driven をクリック。
<img width=500 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/db665b29-9e68-c59d-373d-6bec37d5db32.png"/>

2\. 任意の名前を付けてアプリを作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/7f9dee55-0255-e3a2-e525-a6d4b58be9cb.png)

3\. アプリデザイナーで「サイトマップ」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/87f082d6-55af-50c9-2322-31b1f9b4b3d0.png)

4\. 「新しいサブエリア」を選択して、エンティティより取引先企業を選択。「保存して閉じる」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/5b0a84c2-4684-87e7-d56f-199f21640a5d.png)

5\. アプリデザイナー画面で「保存」をクリックしてから、「公開」、「再生」の順でクリック。アプリが起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/67964858-311a-b8fb-da05-fa9f75247007.png)

6\. 任意のレコードを開いて従業員数の初期値を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/fb450885-7970-4d96-52ad-2e877c3113c2.png)

7\. スライダーを動かして動作を確認。最小値、最大値も開発したとおり、1 と 1000 であることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/322afcda-37c5-a0e4-aa8c-9ab5e6502bcb.png)

# まとめ

今回は開発したコントロールのパッケージ化と公開までを見ていきましたが、現時点でコントロールには以下の課題があるため、次回はコントロールを改修して再度公開するステップを見ていきます。

**改修したい課題**
最小値と最大値が固定になっている
従業員数の値をフィールドから変えても、ラベルは変わるがスライダーが反応しない

[目次へ戻る](https://qiita.com/kenakamu/items/5dd4c64b14c453fa7d85)
[次の記事へ](https://qiita.com/kenakamu/items/454d6d165db95458b17c)