課題 3:モデル駆動型アプリをビルドする方法

WWL テナント - 使用条件 講師による指導付きトレーニング配信の一環としてテナントを提供されている場合、テナントは講師による指導付きトレーニングでハンズオン ラボをサポートする目的で利用できます。 テナントを共有したり、ハンズオン ラボ以外の目的で使用したりしないでください。 本コースで使うテナントは試用版テナントであり、クラス終了後は使用およびアクセスすることはできず、延長の対象になりません。 テナントを有料サブスクリプションに変換することはできません。 このコースの一環として取得したテナントは Microsoft Corporation の財産のままであり、当社はいつでもアクセス権とリポジトリを取得する権利を留保します。

シナリオ

Bellows 大学は、複数のキャンパスとプログラムを持つ教育機関です。 Bellow 大学の講師や管理者の多くは、イベントに参加したり、品目を購入したりする必要があります。 従来から、これらの経費を追跡することは困難でした。

キャンパス管理では、従業員に経費を報告するためのデジタルの方法を用意することにより、経費報告システムを最新化したいと考えています。

このコース全体を通じて、Bellows 大学の従業員が経費を管理できるようにするアプリケーションを構築し、自動化を実行します。

ラボ手順の概要

モデル駆動型アプリを作成する一環として、次の手順を実行します。

  • “Bellows 経費管理” という名前の新しいモデル駆動型アプリを作成します。

  • 必要なテーブルを参照するようにアプリのナビゲーションを編集します。

  • アプリに必要なテーブルのフォームとビューをカスタマイズします。

次のコンポーネントを操作します。

  • ビュー:ビューを使用すると、ユーザーはフォーム テーブルに既存のデータを表示できます。

  • フォーム: ここで、ユーザーはテーブル内の新しい行を作成または更新します。

両方のコンポーネントは、より良いユーザー エクスペリエンスのためにモデル駆動型アプリに統合されます。

前提条件

  • モジュール 1 ラボ 0 - ラボ環境の検証の完了

始める前に考慮すべきこと

  • ユーザー エクスペリエンスを向上させるためにどのような変更を加える必要がありますか。

  • 構築したデータ モデルに基づいて、モデル駆動型アプリに何を含める必要がありますか?

  • モデル駆動型アプリのサイトマップで行うことができるカスタマイズは何ですか。

演習 1:ビューとフォームのカスタマイズ

目的: この演習では、モデル駆動型アプリで使用されるカスタム作成されたテーブルのビューとフォームをカスタマイズします。

タスク #1: 経費明細書フォームの編集

  1. まだサインインしていない場合は、https://make.powerapps.com にサインインします

  2. まだ選択していない場合は、右上隅の [Dev One] 環境を選択します。

  3. 左側のナビゲーションを使用して [テーブル] を選択し、[経費精算書] テーブルを開きます。

    経費精算書テーブルが表示されない場合は、正しい環境であることを確認します (手順 2)。

  4. [データ エクスペリエンス] セクションで、 [フォーム] を選択し、フォームの種類が [メイン] の [情報] フォームを開きます。 (重要: 必ずフォームの種類がメインのフォームを選択してください。)

    重要: すべてのフォームは既定で “情報” という名前が付けられるため、選択したフォームが [メイン] という種類のフォームであり、それ以外ではないことを確認してください。 既定では、フォームに次の 2 つのフィールドがあります。[名前] と [所有者] です。

  5. 画面の右側の [プロパティ] パネルで、[表示名] フィールドを選択し、それを [レポート情報] に変更します。

  6. 左側のナビゲーション ウィンドウから [テーブル列] を選択し、列をフォームにドラッグするか、単に列名をクリックして、 [所有者] フィールドの下に以下のフィールドを追加します。

    • 説明

    • レポートの目的

    • 報告書の期限

    • レポートの合計金額

  7. ステータスの理由列をドラッグし、フォーム ヘッダーにドロップします。

    ヘッダーはフォームの右上の領域です。 フォームのフィールドを表示するには、必要に応じて画面の右側にある [プロパティ] パネルを折りたたみます。

  8. [所有者] を選択します。 [プロパティ] パネルで、[ラベル] を [要求元] に変更します

  9. 右上の [保存して公開] ボタンを選択し、保存と公開が完了するまで待ちます。

  10. 編集ビューが新しいブラウザー タブまたはウィンドウで開いている場合は、それを閉じます。 それ以外の場合は、画面左上の 🡠 [戻る] を選択します。 これで、[経費精算書] テーブルの [フォーム] に戻ります。

  11. 左上の階層リンクを使用します ([テーブル] > [経費精算書] > [フォーム])。 Expense Report] を選択して、[Expense Report] テーブルのプロパティ画面に戻ります。

タスク #2: [アクティブな経費明細書] ビューの編集

このタスクでは、既定の Active Expense Reports ビューを変更し、今日の経費明細の新しいビューを作成します。

  1. [データ エクスペリエンス] セクションで、[ビュー] を選択し、[アクティブな経費精算書] ビューを開きます。

  2. フィールドをクリックまたはドラッグアンドドロップして、次のフィールドをビューに追加します。

    • レポートの目的

    • 報告書の期限

    • レポートの合計金額

  3. [作成日] 列のドロップダウン メニューを選択し、 [削除] を選択します。 [作成日] フィールドがビューから削除されます。

  4. データに合わせて個々の列幅をひとまとめに変更します。

  5. [並べ替え…] の下の [X] を選択して [報告書名] を削除し、代わりに [報告書の合計金額] を選択します。

  6. [報告書の合計金額] を選択して、並べ替え順序を [大きい順] に変更します。

  7. 右上の [保存して公開] ボタンを選択し、公開が完了するまで待ちます。

タスク #3: 今日が期限の報告書に関する新しいビューを作成する

ここで、ビューをクローンして、今日が期限のレポートのための新しいビューを作成します。

重要:[アクティブな経費精算書] ビューは、今日が期限のレポートについての新しいビューの作成に利用するため、閉じないようにしてください。

  1. [名前を付けて保存] を選択します。

  2. [名前] を「今日が期限の経費精算書」に変更し、[保存] を選択します。

  3. プロパティ パネルで [フィルターの編集] を選択します。

  4. [+ 追加] を選択し、 [行の追加] を選択します。

  5. [レポートの期限] をフィールドとして選択し、ドロップダウンの条件として [次の値に等しい] を [今日] に変更します。

  6. … その他のコマンド を 状態 行で選択し、削除 を選択してそのフィルター条件を削除します。

  7. [OK] を選択して、条件を保存します。 このビューは、[レポートの期限] が今日のレコードのみを表示するようにフィルター処理されます。

  8. [払戻金額] フィールドをビューに追加します。

  9. 右上の [保存して公開] ボタンを選択し、公開が完了するまで待ちます。

演習 2: モデル駆動型アプリを作成する

目的: この演習では、モデル駆動型アプリを作成し、サイトマップをカスタマイズして、アプリをテストします。

わかりやすくするため、また時間の都合上、このラボでは経費精算書のすべての列について説明しません。

タスク #1: アプリを作成する

  1. まだサインインしていない場合は、https://make.powerapps.com にサインインします

  2. まだ選んでいない場合は、右上隅の Dev One 環境を選びます。

  3. 左側のナビゲーションで [+ 作成] を選択します。

  4. モデル駆動型アプリケーションを作成します。

    • [アプリを作成する] 画面の [開始] セクションで [空のアプリ] を選択します。

    • [Dataverse に基づく空のアプリ] で、 [作成] を選択します。

    • [名前] に「Employee Expense Management」と入力して、[作成] を選びます。

  5. 新しいモデル駆動型アプリケーションが読み込まれたら、[+ ページの追加] ボタンを選択します。

  6. [ページの追加] 画面で、[Dataverse テーブル] を選択します。

  7. 次のテーブルを選択します。

    • 経費精算書

    • お問い合わせ先

  8. 両方のテーブルを選択したら、 [追加] を選択します。

  9. 画面の左側にあるナビゲーション アイコンを使用して、 [ナビゲーション] を選択します。

  10. ナビゲーション ウィンドウで、ナビゲーションと表示されている項目の下にある [新しいグループ] を選択します。 左側のメニューを展開することが必要な場合があります。

  11. 画面の右側にある [表示オプション] セクションで、“タイトル” プロパティを [報告書] に変更します。

  12. [保存] を選択し、変更が保存されるまで待ちます。

  13. [保存] が完了したら、 [発行] ボタンを選択して、変更を発行します。 公開が完了するまで待ちます。

タスク #2: アプリをテストする

アプリケーションを起動する

  1. [再生] ボタンを選択すると、モデル駆動型アプリが新しいタブに読み込まれます。

新しい連絡先を作成する

  1. アプリでは、 [自分のアクティブな連絡先] ビューが開きます。 そうでない場合は、左側のナビゲーションで [連絡先] を選びます。

  2. コマンド バーから [+ 新規] を選択します。

  3. [名] に「John」、[姓] に「Doe」と入力します

  4. メール アドレスに個人用メールを指定します。 これは、メールを受信する今後のラボで使用されます。

  5. 保存 & 閉じる を選択します。

  6. これで、 [アクティブな連絡先] ビューに作成された連絡先が表示されるはずです。

新しい経費精算書を作成する

  1. 左側のナビゲーション (サイトマップとも呼ばれる) から [経費清算書] を選択します。

  2. [+新規] を選択します。

  3. 次のようにフィールドを入力します。

    • 報告書名: New Test Report

    • レポートの目的: [会議] を選択します

    • 報告書の期限: 今日の日付を選択します

  4. 保存 & 閉じる を選択します。 これにより、新しいテスト レポートが作成され、Active Expense Reports ビューで 確認できるようになります。

  5. [Active Expense Reports] の横にあるドロップダウンを使用して、ビューを [Expense Reports Due Today] に変更します。

  6. さらにテスト レコードをいくつか追加できます。

起動中のモデル駆動型アプリは、おおむね次のようになります。

モデル駆動型アプリが作成されたところのスクリーンショット。

お疲れさまでした。 最初のモデル駆動型アプリの作成と構成を完了しました。