【Power Apps】「経費申請アプリ」ネイティブアプリ開発 下準備編

こんにちは。
MS開発部 入社1年目の新城です。

2021年11月3日～4日 Microsoft社主催オンラインイベント「Microsoft Ignite 2021」にて発表されたPower Appsのネイティブアプリ開発ですが、
Power Appsコミュニティを見ていた所、2022年6月14日に一般提供されたとの情報をキャッチした為、
まずは下準備として簡単に作成できるアプリケーションを作成してみました。

（公式）Microsoft Power Apps コミュニティはこちら
（公式）Microsoft Power Apps ネイティブアプリ開発に関するdocsはこちら

今回はネイティアプリ開発のベースとするアプリケーションのご紹介をさせて頂きます！

経費申請アプリ

概要

ネイティブアプリ開発によりPCやスマートフォンにインストールし、企業アイコンなどを用いてラッピングされたフロントアプリケーションから派生する、Power Appsエンタープライズアプリケーションを想定した

交通費/経費を日別で申請/履歴参照ができるアプリです。​

今回使用した製品は以下の4つです。

• Microsoft Power Apps キャンバスモバイル（以下、「Power Apps」と表記。）
• Microsoft Power Apps モデル駆動型（以下、「モデル駆動型」と表記。）
• Microsoft Power Automate（以下、「Power Automate」と表記。）
• Microsoft Dataverse（以下、「Dataverse」と表記。）

ライセンスについて

こちらの製品構成では、
「Power Apps Per App Plan」または「Power Apps Per User」のいずれかのライセンスが必要になります。

（公式）Power Appsの価格はこちら

機能一覧

【スプラッシュスクリーン】
ネイティブアプリ開発するにあたって、スプラッシュスクリーン（アプリケーション起動時に表示されるローディング画面）を作成。

【通勤費日割】
日別で通勤費を申請することが可能です。
履歴は年>月>日でドリルダウンで参照することが可能です。

【旅費/経費/交通費】
出張費用として新幹線代や、備品などの申請することが可能です。
履歴は年>月>日でドリルダウンで参照することが可能です。
通勤費と異なりこちらは領収書が画像で添付できる点がポイントです。​

利用者目線利用イメージ

経費申請アプリ(利用者)の「通勤費日割」についての操作や機能をご紹介していきます。

ホーム画面

• ヘッダーには、「部署名」「ユーザー名」が表示されます。

申請画面

• 必須項目は、「日付」「路線」「経路」「片道/往復」「片道」になります。
• 通勤費日割のテーブルにデータがない場合（その月で初回登録の場合）は、片道/往復の入力欄以外は空白になっています。
• 通勤費日割のテーブルにデータがある場合（その月で初回登録でない場合）は、最新のレコードの日付以外の値が入ってます。※同じ通勤経路を申請する場合の配慮。
• 必須項目を入力し申請ボタンをクリックすると、確認ダイアログが表示されます。

履歴画面

• 年度の絞り込み検索は、半角数字で入力します。
• 「更新」をクリックした際は、詳細画面の値が入力画面の入力箇所に入っています。
• 削除ボタンをクリックすると、確認ダイアログが表示されます。

管理者目線利用イメージ

通知機能

Power Automateを使用して、管理者に毎月1日AM 9:00に別途モデル駆動型で作成したダッシュボードのURLが添付されたメールが自動で送信されます。
※管理者やメールが送信される日時はソリューションの環境変数にて容易に変更可能としてみました。

ダッシュボード機能

今回はモデル駆動型のダッシュボードに標準のグラフ機能でグラフを作成してみましたが、初期表示は細かに制御できませんでした。※Power BIで作成して埋め込む事も可能。

ドリルダウンしてデータを見たい場合は、（例えば部署ごとで月別で表示 など）

①オレンジの棒グラフをクリック
②ドリルダウン基準で「月」を選択
③グラフの種類の選択は棒グラフを選択

といった形で確認可能です。

ビュー機能

モデル駆動型のダッシュボードと標準グラフのみでは管理者目線でデータの確認を行う事が難しいと感じた為、ビュー機能も追加してみました。
「昇順/降順の並び替え」や「フィルター」を使用してユーザーの詳細を確認することが可能です。

まとめ

【Power Apps】「経費申請アプリ」ネイティブアプリ開発 下準備編についてのご紹介はいかがだったでしょうか？

後日当アプリケーションを実際にネイティブ化し、
いずれかのデバイスでインストール、操作する所までをご紹介したいと思います！

ここまでお読みいただき、誠にありがとうございます。