【初心者向け】Power Appsを使って承認フローアプリを作る

# 目的
Power Apps、Power Automate、SharePoint Onlineを使ってローコードで承認フローアプリを作成します。
ここではそれぞれのサービスの説明は省略しますが、以下を参照してください。
※参照
[sharePoint Online](https://support.microsoft.com/ja-jp/office/sharepoint-%E3%81%A8%E3%81%AF-c17b6824-cc22-478f-8757-497cc6b57121?wt.mc_id=otc_sharepoint)
[Power Apps](https://powerapps.microsoft.com/ja-jp/)
[Power Automate](https://flow.microsoft.com/ja-jp/)

# 完成イメージ
![全体像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/8bbfcc5e-e409-5bea-c81b-69aa9ff70a51.png)
①Power Appsから申請者が申請情報を入力
②Power AppsからSPOへデータを保存
③Power AppsからPower Automateを起動し、承認フローを実行
④Power Automateから担当者へ承認依頼メールを送信
⑤Power Automateから申請者へ承認依頼結果メールを送信

※今回は申請者と担当者は同一アカウントを使用しています。


# SharePoint Online
まず、申請データを格納するためSharePoint Online（以下SPO）のリストと各項目を作成します。
※参照
[リストを作成する](https://support.microsoft.com/ja-jp/office/%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-0d397414-d95f-41eb-addd-5e6eff41b083)
[リストまたはライブラリで列を作成する](https://support.microsoft.com/ja-jp/office/%E3%83%AA%E3%82%B9%E3%83%88%E3%81%BE%E3%81%9F%E3%81%AF%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A7%E5%88%97%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B-2b0361ae-1bd3-41a3-8329-269e5f81cfa2)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/b6283ee7-271c-cd0d-1745-2ff867d52a80.png)


各リスト項目の設定はこのようにしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/85a8a4bd-b924-80d0-f1ae-2c2fe4d19711.png)


以上でSPOの準備は完了です。


# Power Apps
次に、Power Appsを使って申請アプリを作成します。

Power Appsのアプリ作成画面から「キャンバス アプリを一から作成」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/30fa3934-fb63-5795-fd4a-34f2c5c727cb.png)

アプリ名を任意に決め、作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/384ee6a8-4ff7-7126-bb91-db4749fecad8.png)

アプリ編集画面に遷移したら、サイドメニューの"データ>データの追加"より先ほど作成したSPOのリストを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/8e4a1a5b-d6ff-3621-b035-a03223d3be86.png)

キャンバスにサイドメニューの"挿入>編集フォーム"からフォームを追加し、"データソース"に先ほど追加したSPOのリストを設定します。
設定後、リストの項目がキャンバスに表示されます。（添付画像は少しレイアウトを変更しています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/3e1cd351-f67b-98fc-b42d-ce2ef4d56b7b.png)

キャンバスにサイドメニューの"挿入>ボタン"からボタンを追加します。
後ほど、このボタンが押されたタイミングでSPOへのデータ登録及び、Power Automateの承認フローの起動を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/f8372d7d-af5b-a149-980f-4e1419b856a3.png)

サイドメニューの"ツリービュー>Screen1"の`OnVisible`関数に以下を記述します。

```
NewForm(Form1);
```
こうすることで、アプリが開かれた際にフォームが新規作成されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/b1492d7a-f478-fa02-451e-060657485529.png)

サイドメニューの"ツリービュー>Button1"の`OnSelect`関数に以下を記述します。

```
SubmitForm(Form1);
```
こうすることで、ボタンが押下されたときフォーム内のデータがSPOのリストに登録されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/4eb7b854-abb3-63d1-f475-8fd3624deb84.png)


# Power Automate
次に、Power Automateを使って承認フローを作成します。

Power Automateのフロー作成画面から「インスタント クラウド フロー」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/be8b66e2-5168-582a-40ec-cf32ba265057.png)

フロー名を任意で決め、トリガーに"Power Apps"を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/b37555b2-f9f5-8630-7805-d3228516821a.png)

承認フローの各アクションを以下のように配置します。
注意点としては、Power AppsからSPOへ登録されたフォームデータのIDを引数として渡しています。
また、担当者への承認依頼メールはPower Automateがもつ承認機能を利用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/493f3b4c-4c26-6223-8ea6-92c5fa3240bc.png)


最後にPower Appsに戻り、申請ボタンを押下されたタイミングでフローが実行されるようにします。
サイドメニューの"ツリービュー>Button1"の`OnSelect`関数に作成したフローを追加し、以下を記述します。

```
SubmitForm(Form1);
承認フロー.Run(Form1.LastSubmit.ID);  <-- 追記
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/e630b39c-9125-be45-5dd1-f9ab055efac4.png)

# 動きの確認
動作の確認として、Power Appsから申請を行ってみます。
申請内容
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/a432140b-fc89-db0c-d65f-457014cf097b.png)

申請後、SPOのリストにデータが保存されていることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/e72f6c18-7d77-9d7e-ad28-32dda5890afd.png)

Power Automateも正常に動作し、担当者に承認依頼メールが送信されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/c1dc29a7-2f56-041e-8b84-709c3f214b65.png)

承認の可否を行った場合、承認結果メールが申請者に返ってくることまで確認できました。
※今回は申請者と担当者は同一アカウントを使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621838/08580ab1-7daa-a0e6-3296-1f362403d0e6.png)


# まとめ
Power Apps、Power Automate、SharePoint Online を使うことで短時間でコードの記述もほとんどなくアプリを構築することが出来ました。
便利。

ただその反面、複雑な業務フローやリッチな画面レイアウトを組み込む場合はそれなりに手を入れる必要があります。
そのため、Power Apps、Power Automate、SharePoint Online 内でどこまでを独自にカスタマイズできるかをあらかじめ考慮する必要があります。
ローコードでアプリを開発できるがゆえに痒いところに手が届かないこともありそうですね。。。