Power Apps でアプリ開発してみた

## Power Apps とは

[Power Apps](https://docs.microsoft.com/ja-jp/powerapps/powerapps-overview) は、アプリ、サービス、コネクタ、データプラットフォームのスイートであり、ビジネスニーズに合わせてカスタムアプリを構築するための迅速なアプリケーション開発環境を提供します。 

Power Apps を使用すると、基になるデータプラットフォーム ([Common Data Service](https://docs.microsoft.com/ja-jp/powerapps/maker/common-data-service/data-platform-intro))またはさまざまな**オンラインおよびオンプレミスのデータソース (SharePoint、Excel、Office 365、Dynamics 365、SQL Server など)に格納されているビジネスデータに接続するカスタムビジネスアプリをすばやく作成できます。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/b04f64ff-27f8-8313-16fb-e1ef9bd31664.png)


## 完成形
簡易的な顧客ごとの資産・契約管理のアプリケーションです。
<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/09RDPjRkwC">pic.twitter.com/09RDPjRkwC</a></p>&mdash; TeppeiKikuchi🇮🇩ジャカルタ (@tpi29) <a href="https://twitter.com/tpi29/status/1229130942599401472?ref_src=twsrc%5Etfw">February 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 開発
### STEP1 Power Appsでプロジェクトを作成
今回は[Common Data Service](https://docs.microsoft.com/ja-jp/powerapps/maker/common-data-service/data-platform-intro)を使用して、アプリを作成していきます。

Common Data Serviceに最初から用意されているContactsテーブルを利用して、開始します。
![demo001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/3c2b340f-7b19-8f25-b549-b42d3d9bc36f.png)

![demo002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/c6186ead-9737-701e-f0a4-86cafb08dd33.png)

これだけで、実は、以下の３画面が自動で生成されます。
- 一覧画面
- 編集画面
- 新規作成画面

![demo003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/37711039-38ae-6f0f-ff1c-963f48e55e96.png)

### STEP2 画面の編集/作成 (資産一覧、契約一覧画面)

#### 2-1 新規画面追加

Inputタブより、New Screenを選択して、新規画面の追加
![demo004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/1fad30ef-215d-1241-3034-e04f19b6a821.png)

#### 2-2 四角形のViewの配置

画面左のサイドメニューより、Rectangleを選択。
![demo005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/fd0d722b-92a0-76fc-5639-6a88dd454d84.png)

#### 2-3 Labelの配置

画面上部のタブより、Textを配置。
![demo007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/5a471857-8944-2e2a-386a-f8f1110acedf.png)

#### 2-4 Buttonの配置

画面左のサイドメニューより、Buttonを選択。
![demo008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/35d33114-72b8-474f-2236-eabaf652d957.png)

#### 2-5 一覧部分の配置

画面上部のタブより、Galleryを配置。
![demo009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/a1f0b373-816f-5423-ebc0-d281d9475d68.png)


これでレイアウトは、ほぼ完成です。

### STEP3 Common Data Serviceのエンティティの作成

#### 3-1 Entityの新規作成 (Common Data Service)
Power Appsのトップ画面でEntityを選択し、New EntityからAgreementsエンティティの作成。
![demo010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/6b01268c-14f1-88dd-b4bd-eef2a1d5e7f9.png)
![demo011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/25be26d3-b86e-3657-be81-78e273c94fdd.png)

#### 3-2 Contactsエンティティとのリレーションの追加

![demo012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/29cbfa76-81ad-cbf3-893a-31645362af81.png)

#### 3-3 AgreementsエンティティにAmountフィールドの追加

![demo013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/7d54dc8f-2750-9be6-37d9-0c3fdac6cf49.png)

これでAgreementsエンティティの作成が完了です。

同様にして、Assetsエンティティも作成してください。
Assetsエンティティの構成はAmountの名前のみ、EvaluatedValueに変更しています。

### STEP4 画面遷移処理

画面遷移には[Navigate関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-navigate)を用います。

Galleryに以下の式を適用しています。

```
Navigate('Customer Top', ScreenTransition.Cover);
Set(customer_full_name, Gallery1.Selected.'Full Name');
```

![demo014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/2ea6ecc1-ad2e-2df5-4df2-58cf5ab6f70b.png)

値の受け渡しに以下のSet関数を使用しています。
※単純に次の画面のみに値を受け渡す場合は、Navigate関数の第三引数のContextに値を受け渡すことも可能です。

```
Set(customer_full_name, Gallery1.Selected.'Full Name');
```

### STEP5 値の受け取り

資産一覧/契約一覧画面のGalleryのData SourceにAgreementsを指定してください。
![demo015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/1af8ee94-ffdd-5ed8-77b3-6014b772db79.png)

Advancedのタブを選択し、Data項目のItemsにFilter関数を使用して、表示する値を抽出します。
![demo016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/d27add3b-bde4-b66f-6402-cd13da46b03a.png)

ここで、先程の画面遷移時にSetした**customer_full_name**を参照させます。

```
Filter(Agreements, Contact.'Full Name' = customer_full_name)
```

Assets表示用のGalleryにも同様に設定してください。

### STEP6 計算処理

契約一覧、資産一覧の値をもとに、(総資産)-(総契約額)を表示させます。

総資産額は以下の式で計算しています。

```
Sum(Filter(Agreements, Contact.'Full Name' = customer_full_name), Amount)
```

![demo017.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/738f8f55-d20e-4c4e-8ff9-268a3a5199a9.png)

(総資産)-(総契約額)は以下の式で計算します。

```
Sum(Filter(Assets, Contact.'Full Name' = customer_full_name), EvaluatedValue) - Sum(Filter(Agreements, Contact.'Full Name' = customer_full_name), Amount)
```

![demo018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/72436cd1-6584-ef49-c41b-eb691003655a.png)

これで、顧客選択時に各金額が出力されるようになったかと思います。

### STEP7 タブの切り替え実装

AgreementsタブとAssetsタブの切り替え処理を実装します。

各ボタン押下時に、値をセットします。

```
Set(varTab,btnAgreementsTab.Text)
```

```
Set(varTab,btnAssetsTab.Text)
```

![demo019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/cfce1f88-55f0-7542-e6fa-fae381485799.png)

GalleryのVisible項目に以下の式を適応させます。

```
varTab=btnAgreementsTab.Text
```

![demo020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/68d93a1f-47c2-6b4a-a136-b02a04e81600.png)


これで、タブの切替処理も完了です。

編集画面や新規画面などはまた別の記事で紹介致します。
誤り、改善点や疑問点ありましたらコメント下さい。宜しくお願い致します。