経費管理アプリ構築|モデル駆動

目次

経費管理アプリ

経費管理アプリは以下の要素で構築される、モデル駆動型アプリで作成します。

  • テーブル「経費申請」
    • ビュー
      • 申請中経費
      • 承認済かつ未支払経費(既定)
      • 支払完了経費
      • 否認経費
    • メインフォーム
    • ビジネスルール
  • キャンバスページ「ダッシュボード」

事前準備

動作確認で使用するため、前項で作成した経費申請アプリと経費承認アプリより、以下の経費申請を最低1つずつ作成してください。

  • 申請中
  • 承認済かつ未支払
  • 支払済
  • 否認済

モデル駆動型アプリの作成

[作成]メニューから[空のアプリ]を選択し、

モデル駆動型アプリの作成を選択します。

任意の名前を付け[作成]ボタンを押下します。

しばらく待つとモデル駆動型アプリが作成され、編集画面が起動します。

テーブル「経費申請」追加

作成したモデル駆動型アプリにテーブル「経費申請」を追加します。

[ページ]タブの[新規]ボタンを押し、

[Dataverseテーブル]を選択します。

[既存のテーブルを選択する]からテーブル「経費申請」を選択し、[追加]を押します。

ナビゲーションに[経費申請]ビューと[経費申請]フォームが追加されれば、テーブル「経費申請」の追加は完了です。

ビューの作成

経費申請管理アプリではテーブル「経費申請」に対し、以下4つのビューを作成します。

  • 承認済かつ未支払(既定)
  • 申請中
  • 否認
  • 支払済

ビュー「承認済かつ未支払」作成

[経費申請ビュー ]から[ビューの新規作成]をクリックします。

任意の名前(承認済かつ未支払であることがわかる名前)を付け[作成]を押します。

ビューの作成画面へ遷移するので、ビューに列を追加します。

※「勘定科目」や「金額」「承認日」など、バックオフィス(経理)のユーザーが一覧で確認したいと思われる項目を追加してください。

列の追加が完了したら、[フィルターの編集]を押します。

このビューでは「承認済かつ未支払(かつ列[状態]が[アクティブ])」のレコードのみを表示するので、以下のようにフィルターを設定し[OK]を押します。

※既定でDataverseのテーブルに追加される列[状態]と[ステータス]についてはこちら

[保存して公開]を押し、ビュー「承認済かつ未支払」の作成は完了です。

残りのビューの作成

同様の手順で以下のビューを作成します。

  • 申請中:承認日、否認日ともに未設定(かつ状態はアクティブ)
  • 否認済:否認日が設定済(かつ状態はアクティブ)
  • 支払済:支払日が設定済(かつ状態はアクティブ)

※要件によっては否認済と支払済のビューは「状態」を「非アクティブ」とすることもありますが、本アプリではすべてのレコードを「状態がアクティブ」で扱うため、上記フィルターとしています。 ※各ビューに表示する列は変えてください(エンドユーザーが必要と思う情報を表示)

 例:「否認済」ビューでは列「否認日」を表示する など

※[名前を付けて保存]からビューを複製可能なので、複製から残りのビューを作成しても問題ありません

既定のビューを設定

最後に、アプリケーションを開いた際に既定で表示するビューを選択します。

[データ]タブからテーブル経費申請の[オープン]を選択し、

[ビュー]をクリックします。

構築したビュー「承認済みかつ未支払」の[既定のビューとして設定]を選択します。

動作確認

モデル駆動型アプリへ戻り、[保存]→[公開]→[再生]を押し、アプリを再生します。

作成したビューがすべて表示され、【承認済かつ未支払】ビューが既定で表示されることを確認します。

※ビューが表示されない場合は、項目[このアプリ以外]にビューが表示されていないかを確認し、もしこの項目にビューがある場合は[追加]ボタンからアプリに追加します。

フォームの作成

続いてテーブル「経費申請」のフォームを作成します。

タブから[経費申請]の[フォーム]を選択し、[編集]を押します。

フォーム編集画面が開くので、[全般]タブの列数を変更し、

バックエンドユーザーが見やすいよう項目を配置していきます。

※サンプルでは左側に申請者・承認者が入力する項目、右側にバックエンドユーザーが入力する項目を配置しています。 ※列数は2列でなくても構いません。

※削除できない項目[所有者]は非表示にします。

承認日と否認日は後程のビジネスルールで使用するため必ず追加し、フォーム作成時点では非表示にします。

また、すべての入力項目を「読み取り専用」にします。 ※こちらも後ほどビジネスルールで使用します。

[保存して公開]を押して、フォームの作成は完了です。

動作確認

モデル駆動型アプリへ戻り、[公開]→[再生]ボタンを押します。

任意の経費申請を選択します。

作成したフォームが表示されることを確認します。

ビジネスルールの作成

要件「経費の承認が完了するまで、モデル駆動型アプリから経費申請の編集は行えないこと」を実現するため、テーブル「経費申請」にビジネスルールを作成します。

※ビジネスルールについてはこちら

フォームの編集画面に戻り、[ビジネスルール]から[新しいビジネスルール]を選択し、ビジネスルール編集画面に遷移します。

既定で追加されている「条件」コンポーネントを選択します。

[表示名]を「承認済み」に、[ルール]に列「承認日」と「値が設定済み」を設定し、[適用]ボタンを押します。

続いて[表示方法の設定]コンポーネントを[条件]コンポーネントの右側(条件がtrueのとき)に追加します。

※コンポーネントの追加はドラッグドロップで行えます

追加した[表示方法の設定]アクションを選択し、[表示名]を「承認日表示」に、[表示]を「承認日」「はい」に設定し、[適用]を押します。

続いて[表示方法の設定]コンポーネントの次に、[ロック/ロック解除]コンポーネントを追加します。

追加した[ロック/ロック解除]コンポーネントを選択し、[表示名]を「勘定科目ロック解除」に、[ロック/ロック解除]を「勘定科目」「ロック解除」に設定し、[適用]を押します。

[ロック/ロック解除]コンポーネントをさらに2つ追加し、「勘定科目」と同様に「支払日」「経理側メモ」もロックを解除するよう設定します。

続いて最初の条件「承認済み」の下側(条件がfalse)に[条件]コンポーネントを追加します。

[表示名]を「否認済み」に変更し、[ルール]を「否認日」「値が設定済み」に設定し、[適用]を押します。

追加した条件「否認済み」の右側(条件がtrue)に「表示方法の設定」コンポーネントを追加し、[表示名]に「否認日表示」、[表示]に「否認日」「はい」を設定します。

以上でコンポーネントの追加/編集は完了です。

左上の「経費申請:新しいビジネスルール」の右の三角ボタンを押してヘッダを開き、任意のビジネスルール名を入力し、スコープが[エンティティ]になっていることを確認したら、[保存]ボタンを押します。

[保存]が成功したら[アクティブ化]ボタンを押します。

以上でビジネスルールの作成は完了です。

動作確認

モデル駆動型アプリを再生し、「承認済かつ未支払」の経費申請をクリックします。

フォームに「承認日」が表示され、「勘定科目」「支払日」「経理側メモ」が編集可能になっていることを確認します。

続いて「申請中」の経費申請を選択します。

「勘定科目」「支払日」「経理側メモ」が編集不可であることを確認します。

最後に「否認中」の経費申請を選択します。

フォームに「否認日」が表示され、「勘定科目」「支払日」「経理側メモ」が編集不可能であることを確認します。

ページの作成

経費申請管理アプリに、ページ「ダッシュボード」を作成します。

※ダッシュボードはPower BIで作成するケースが多いですが、この課題ではPower Appsのキャンバスアプリを使用し作成します。

[ページ]タブの[新規]ボタンを押し、

[カスタムページ]を選択して[次へ]を押します。

[新しいカスタムページを作成する]を選択し、任意の名前を付け[追加]ボタンを押すと、

カスタムページ編集画面へ遷移します。

カスタムページ上に経費の合計を確認できる任意のグラフを作成します。

※サンプルアプリでは[折れ線グラフ]コントロールを使用し、月ごとの合計金額を表示しています。

グラフの作成が完了したら[保存]→[公開]を押します。

モデル駆動型アプリへ戻り、サイドメニューにページが追加されていることを確認し、[公開]→[再生]からアプリを起動します。

※[保存]がアクティブな場合は[公開]前に保存を押します。

再生したアプリのタブをクリックし、作成したページが表示されることを確認します。

以上で経費管理アプリの構築は完了です。

  • URLをコピーしました!

お役立ち資料



資料請求はこちら

資料請求

無料デモアプリはこちら

無料で作成依頼
目次