Dynamics 365へ機能を追加してみた(PCF Galleryサイト利用　40分ほどでガントチャート表示できた)　

## PCF Gallery とは？

機械翻訳（PCF ギャラリーは、Power Apps コンポーネント フレームワークで作成されたコントロールのコレクションです。）

PowerApps コミュニティのユーザーによって作成したPowerApps カスタム コンポーネントです。たくさんあります。
本当にかっこいいです。見た目もいいです。

## はじめに
この記事では、サイトを使用してPowerApps / Dynamics 365環境にコントロールを
インストールして使いやすくする方法を紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/883232c7-40c6-f450-a4a2-20a2b6533908.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/993b60f6-e0bf-bc95-79ee-f8466bdfdb80.png)

## ある機能を適用するとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/c7453093-b963-b6d4-5da2-c1f478238936.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/55c22d4c-387c-b5cd-457f-fde2a881cdb9.png)

↑をガントチャートで表示したい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/07653290-1f13-b820-b297-c9155f5f81d9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/a7d07626-4529-be28-68a0-61456ddde138.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/fd0329ab-fd14-e91b-a5da-aa72d48025e9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/dd58b47e-8c69-97fe-4c90-7062192dd0ea.png)


## どうやって利用できる？
### 1．PCF Gallery へアクセス　まずは取り入れたい機能を一覧や検索から選ぶ

https://pcf.gallery/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/a99d9700-c5c6-7689-d56e-8ae82e2cdf03.png)


### 2．取り入れたい機能を選択し、ダウンロードをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/2db8fa78-e0d1-2048-60f5-f7de54149734.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/d2b17d0c-6b69-098e-f125-df69095f780e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/dba8474f-f307-93a4-8f4a-82771d072ac2.png)

UniversalGanttChartSolution_1_5.zip ダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/b1ec7ccf-5110-035f-9890-78d8b382155c.png)

### 3．ソリューションをインポートする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/013177c7-c19f-4a0c-d0a4-929b9e05c151.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/70b04b6f-c1a7-0d91-e947-98578090cd37.png)

### 4．インポートした機能を適用する
今回は営業案件の中に設定する

https://github.com/MaTeMaTuK/pcf-universal-gantt-chart/blob/master/Model%20Driven%20Guide.md

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/1342294c-5efa-c0d2-a7bf-ac34aeb6520c.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3a48e436-c9f0-b8ad-f40a-d23461acdbb6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f4ca9dab-6cc8-f994-a228-5dac9ccf752d.png)

営業案件のフォームを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/3251923e-d065-2427-c239-b1923e17bbf5.png)

クラシックに切り替える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/73e89c8b-b6ba-7e85-4f98-a279e5daddcf.png)

挿入タブ→サブグリッドをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/7f11c02d-4fc4-f88c-f618-415f6e3f0886.png)

名前は英語にしないといけない。ソース元は活動で
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/9c7157db-e61a-9262-aad9-80e6b5f119c0.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/20e6bc3c-4c14-9688-1656-e039ed303248.png)



コントロールの追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/750c3232-0642-d3c8-316e-032568746899.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/cdfcb4a9-02c0-02a6-7b53-9a5473fc31da.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/0cd8b4d0-0599-e11c-74bb-484f1d7c8e9d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/b802660b-c2f0-0811-181c-d655adfc2ac1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/45f94568-e310-9e38-e29f-2aa5454ef471.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/48b97870-c431-ddf8-50c0-4810cd328cd1.png)

見積もりタブの中にできた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/f653306c-9e5b-f27a-80ea-2518aa280377.png)


保存して、公開する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/ca9818d6-2fc6-39d7-bad4-e925a0915a24.png)


完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/dd58b47e-8c69-97fe-4c90-7062192dd0ea.png)


## 感想
Dynamics 365 、Power Apps でできることの可能性がさらに広がります。

以上

## 参考
ReadMe読むの大事
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/bf901601-e9ee-766d-d80b-126609080aae.png)

https://github.com/MaTeMaTuK/pcf-universal-gantt-chart

https://pcf.gallery/universal-gantt-chart/


https://docs.microsoft.com/ja-jp/power-apps/maker/model-driven-apps/use-custom-controls-data-visualizations