26
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

目的

Power Apps、Power Automate、SharePoint Onlineを使ってローコードで承認フローアプリを作成します。
ここではそれぞれのサービスの説明は省略しますが、以下を参照してください。
※参照
sharePoint Online
Power Apps
Power Automate

完成イメージ

全体像.png
①Power Appsから申請者が申請情報を入力
②Power AppsからSPOへデータを保存
③Power AppsからPower Automateを起動し、承認フローを実行
④Power Automateから担当者へ承認依頼メールを送信
⑤Power Automateから申請者へ承認依頼結果メールを送信

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

SharePoint Online

まず、申請データを格納するためSharePoint Online(以下SPO)のリストと各項目を作成します。
※参照
リストを作成する
リストまたはライブラリで列を作成する

image.png

各リスト項目の設定はこのようにしています。
image.png

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

Power Apps

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

Power Appsのアプリ作成画面から「キャンバス アプリを一から作成」を選択します。
image.png

アプリ名を任意に決め、作成します。
image.png

アプリ編集画面に遷移したら、サイドメニューの"データ>データの追加"より先ほど作成したSPOのリストを追加します。
image.png

キャンバスにサイドメニューの"挿入>編集フォーム"からフォームを追加し、"データソース"に先ほど追加したSPOのリストを設定します。
設定後、リストの項目がキャンバスに表示されます。(添付画像は少しレイアウトを変更しています。)
image.png

キャンバスにサイドメニューの"挿入>ボタン"からボタンを追加します。
後ほど、このボタンが押されたタイミングでSPOへのデータ登録及び、Power Automateの承認フローの起動を行います。
image.png

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

NewForm(Form1);

こうすることで、アプリが開かれた際にフォームが新規作成されるようになります。
image.png

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

SubmitForm(Form1);

こうすることで、ボタンが押下されたときフォーム内のデータがSPOのリストに登録されるようになります。
image.png

Power Automate

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

Power Automateのフロー作成画面から「インスタント クラウド フロー」を選択します。
image.png

フロー名を任意で決め、トリガーに"Power Apps"を選択します。
image.png

承認フローの各アクションを以下のように配置します。
注意点としては、Power AppsからSPOへ登録されたフォームデータのIDを引数として渡しています。
また、担当者への承認依頼メールはPower Automateがもつ承認機能を利用しています。
image.png

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

SubmitForm(Form1);
承認フロー.Run(Form1.LastSubmit.ID);  <-- 追記

image.png

動きの確認

動作の確認として、Power Appsから申請を行ってみます。
申請内容
image.png

申請後、SPOのリストにデータが保存されていることが確認できました。
image.png

Power Automateも正常に動作し、担当者に承認依頼メールが送信されています。
image.png

承認の可否を行った場合、承認結果メールが申請者に返ってくることまで確認できました。
※今回は申請者と担当者は同一アカウントを使用しています。
image.png

まとめ

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

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

26
41
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?