PowerAppsだけで承認ワークフローアプリを作る。Power Automate無しで！ （画像の追加コントロール使用）
今回は承認申請、承認処理、結果の通知をメールで出す承認ワークフローをPowerAppsだけで作ってみました。通常使うPower Automateを使わずに、PowerAppsだけでどの様に作っているかもご紹介してます。
（動画時間：9:52）
初級編：「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました！
⇒ 半額になる「ディスカウントリンクページ」へ
PowerAppsだけで作った申請承認アプリの動作を見る
こんにちは、リーンシグマ、ブラックベルトのマイク根上です。
業務改善コンサルをしています。
最近、承認ワークフローのシステムを作る案件がありました。
承認ワークフローについての動画を以前、シリーズで作ったのですが、
その時はPower Automateを使ったやり方でした。
⇒「Power Automate（旧名：Microsoft Flow）の基本と承認ワークフローの改善プロジェクト」
Power Automateはノーコードでも
沢山の業務ワークフローを構築できるのですが、
日本語での情報が少なかったり、
会社によっては使用の制限があると聞きます。
そこで今回はPower Automate無しで
PowerAppsだけでそのアプリを作ったのです。
実はPowerAppsだけで承認ワークフローを作る情報は
英語圏でも無かったのですが、
思考錯誤の末うまくできましたので、
皆さんにご紹介しようと思います。
まずはそのアプリの動きを見てみましょう。
承認申請の履歴画面
これが承認ワークフローアプリのホーム画面です。
ここで過去の申請履歴が表示されます。
いつ、誰が申請し、その申請金額や承認の進捗も閲覧できます。
そしてサムネ画像をクリックして
提出したレシートの画像を拡大表示できます。
これはギャラリーコントロールで作っているのですが、
ユーザーが承認者なら自分に承認依頼があった全ての申請が画面に表示されて、
一般ユーザーの申請者は自分が申請した案件だけが表示されます。
この機能の為には誰が承認者なのかの記録をしなければいけません。
この画面は承認者としての画面です。
画面下に「承認者登録」と「集計結果」ボタンがあります。
この「承認者登録」ボタンをクリックすると、承認者登録画面に行きます。
承認者登録画面
ここで会社のメルアドを登録すればその人は承認者となるのです。
この画面で登録済みのメルアドの編集もできますし、
無効にして一時的に承認者権限を外す事もできます。
今著者のアカウントを無効にしました。
これからは一般ユーザーとなります。
するとさっきの二つのボタンが消えましたね。
この様にしてPowerAppsではどのグループが
どの情報にアクセスできるかの制御ができるのです。
レシート画像提出画面
次に一般ユーザーとして承認申請処理をしてみましょう。
さっきの画面の下の「レシート画像の提出」ボタンをクリックします。
レシートの撮影に「画像の追加」コントロールを使ってますので、
PCユーザーの人もレシート画像を選択してこのアプリを使う事ができます。
これは携帯端末から見た映像です。
携帯端末を使えば付属のカメラでレシートの写真を撮ってそのまま提出できます。
申請金額は必須で、必要があればここに申請理由などのコメントを入力して、
自分の承認者を選んで、「申請提出」ボタンをタップするだけです。
するとその申請が履歴に追加されました。
もうクラウドに保存されたのです。
進捗が「提出済み」になっています。
ここで「申請取消」ボタンをタップすればそれを取り消す事もできます。
承認者の申請承認処理と結果メール通知機能
一方、承認者には申請者名と申請番号の入った
承認申請の通知メールが自動で送られます。
これはPowerAppsから直接送られたのです。
本文に申請金額と、申請者のコメントも載っているし、
「こちらをクリック」の部分はリンクになっていて、
それをクリックする事でブラウザが開き、
アプリ上で申請内容と提出画像を直ぐに見れるのです。
この時、画像が反対になっている事もありますね。
その時は下のドロップダウンから画像を回転できます。
またコントロールキーを押しながらマウスをスクロールすると
簡単に拡大して内容を見易くできます。
コメントを書いてあげて承認か却下かの決済をします。
これで進捗部分に決済結果が載り、
その下の部分で申請毎の全てのやり取りが記録として残ります。
申請者も承認者もこれを見れますので、
これだけでもコミュニケーションが取れる様に工夫がされています。
また申請者には同時に承認結果の通知のメールも行っているのです。
それには承認結果が件名に、コメントが本文に掲載され、
さっきと同じ様にリンクがありそれをクリックすれば
アプリの履歴画面に直ぐに行けます。
申請者別月間承認金額集計結果画面
最後に承認者ですと最初の画面に「集計結果」ボタンが
ありますのでそれをクリックすると、
最近3か月の申請者毎の承認金額の集計結果が見えます。
また、申請者をクリックすると、その提出者の
承認金額の詳細が下のテーブルで表示されます。
もちろん、この結果をエクセルに出力してそっちで集計をすることも可能です。
このアプリ作成での技術的な重要ポイント
この様なアプリをPowerAppsだけで
短期間で作成する事ができるのです。
今日は作成の詳細は話しませんが、
重要ポイントを少しご紹介します。
これから先はPowerAppsの少し技術的な
内容になるのをご了承下さい。
画像の追加コントロールで撮った画像をSharePointリストに保存する方法
まず、一番難しかった事から話しますと、
今回使った画像の追加コントロールで撮った画像を
ShaPointリストに直接保存する事でした。
通常、これをやるのにPower Automateを使う必要がありましたが、
今回、それをせずにやる方法が見つかったのです。
画像を撮った後の「申請提出」ボタンの「OnSelect」属性を見ると、
JSON関数とMid関数を使ってその画像データを加工し、
変数：「加工レシート画像」に入れています。
それともう一つSharePointリスト側での準備があります。
それについては次のQiita.comでの僕の記事をご覧下さい。
⇒「【PowerApps】カメラで撮った画像をSharePointリストに保存し、他のアプリで見る。」
その記事ではカメラコントロールを使ったやり方で、
今回は画像の追加コントロールです。
これをする事によって、普通にPatch関数でSharePointリストの、
ここでは「Image_URL」列にそのデータを記録して、
それを後でPowerAppsで再取得して表示させる事ができる様になったのです。
これができる様になるのに試行錯誤の連続でした。
データベース内で新しく作ったレコードのID番号を直ぐに取得する方法
もう一つのコツは、このPatch関数でデータベースに
新しいレコードを作るわけですが、
そのID列の番号を取得して、
後で申請番号として使う方法です。
それをこの様にPatch関数の後に「.ID」をつけて、
それをSet関数を使ってそのまま変数：「申請番号」に入れて
そのID列が取得できるのです。
そしてその申請番号を次のEメールを送る関数で使っています。
サムネ画像から拡大画像の表示とその回転
次にサムネ画像から拡大画像の表示と回転の仕方も見てみましょう。
ギャラリー内のサムネ画像が押された時に
「OnSelect」属性でUpdateContext関数で
変数：「拡大Vis」にtrueを入れてます。
そして前もって作ってあった大きいImageコントロールの
「Visible」属性にその変数を、
その「Image」属性に「Gallery1.Selected.Image_URL」を入れているので、
「Visible」属性がtrueになった時に大きい画像が表示されるのです。
またそのImageコントロールの「ImageRotation」属性の設定を変える事で
その画像を回転させられます。
そして、下の選択肢のドロップダウンと連携させる事で
ユーザーの任意で回転ができる様にしています。
エクセルのピボットテーブルの様な集計をする。（GroupBy関数、AddColumns関数）
集計結果画面も見てみましょう。
このデータテーブルの「Items」属性に、
すごい関数のネストがされてます。
ポイントはGroupByとAddColumns関数を使って
エクセルのピボットテーブルの様な集計をしています。
これについては以前詳しい説明の動画を
作りましたのでそちらをご覧下さい。
⇒「【PowerApps 】 GroupByとAddColumns関数でピボットテーブルみたいな集計をする。」
今回は概要だけ書きましたが、
数式も含めたもっと詳しい説明を聞きたい話題がありましたら
コメント欄で教えて下さい。
その説明動画の作成を検討します。
その他の機能でアプリからのメールの出し方や、
メールのリンクから所定のPowerAppsの画面を開ける方法、
ユーザー毎にアクセス権を変える方法などもありました。
リクエストを頂いたものから動画を作っていこうと思います。
この様にPowerAppsでは高品質の業務システムを
短期間で作成する事ができます。
ぜひ挑戦してみて下さい。
また僕の方でその様なシステムを作るお手伝いもできますので
その時はお問合わせ下さい。
⇒「ご質問／仕事依頼」
初級編：「マイクロソフトPowerApps【コントロールと関数 完全ガイド】」
Udemyオンラインコースを作りました！
⇒ 半額になる「ディスカウントリンクページ」へ
「こちらの記事も読まれてます｡」
