実習ラボ 4 - フォームとビューを構成する

シナリオ

このラボでは、モデル駆動型アプリのフォームとビューを構成します。

Contoso Real Estate は次の 2 つの重要な要素を追跡したいと考えています。

  • 不動産物件一覧
  • 不動産物件の内覧予定者

学習する内容

  • テーブル フォームを構成する方法
  • テーブル ビューを構成する方法

ラボ手順の概要

  • 不動産物件と内覧のメイン フォームを構成する
  • タブとセクションを構成する
  • フォームに列を追加する
  • サブグリッドを追加する
  • 新しいフォームを作成する
  • フォームにセキュリティ ロールを関連付ける
  • 不動産物件と内覧のビューを構成する
  • ビューをフィルター処理する
  • 簡易検索ビューを構成する

前提条件

  • 以下を完了している必要があります。「ラボ 2: データ モデル」

詳細な手順

演習 1 - 不動産物件のメイン フォーム

この演習では、不動産物件テーブルのメイン フォームを変更します。

タスク 1.1 – メイン フォームのレイアウトと列

  1. Power Apps Maker ポータル https://make.powerapps.com に移動します

  2. Dev One 環境にいることを確認します。

  3. ソリューションを選択します。

  4. [物件一覧] ソリューションを開きます。

  5. [不動産物件] テーブルを選択します。

  6. データ エクスペリエンスで、フォームを選択します。

  7. [フォームの種類] が [メイン] の [情報] フォームを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  8. フォーム デザイナーの左側にある [ツリー ビュー] を選択します。

  9. 全般タブを選択します。

  10. [名前] に「generalTab」と入力します。

  11. 右側の [プロパティ] ペインで、[レイアウト] ドロップダウンの [3 列] を選択します。

    3 列タブを含むメイン フォームのスクリーンショット。

  12. [ツリー ビュー] で、[全般] タブを展開します。最初のセクションを選択し、[名前] に「generalSection」と入力します。

  13. 2 番目のセクションを選択し、[ラベル] に「Timeline」と入力し、[名前] に「timelineSection」と入力します。

  14. 3 番目のセクションを選択し、[ラベル] に「Related」と入力し、[名前] に「relatedSection」と入力します。

  15. [所有者] フィールドを [ヘッダー] 領域にドラッグします。

    ツリー ビューと名前を含むメイン フォームのスクリーンショット。

  16. 最初のセクションを選択します。

  17. フォーム デザイナーの左側のナビゲーションから [テーブル列] を選択します。

  18. [物件名] フィールドの下に [クライアント] 列をドラッグします。

  19. [番地] 列を選択して、[クライアント] の下のフォームに追加します。

  20. [市区町村] 列を選択して、[番地] の下のフォームに追加します。

  21. フォーム デザイナーの左側のナビゲーションから [コンポーネント] を選択します。

  22. [1 列セクション] コントロールを選択して、フォームに追加します。

  23. [ラベル] に「Details」と入力し、[名前] に「detailsSection」と入力します。

  24. フォーム デザイナーの左側のナビゲーションから [テーブル列] を選択します。

  25. [希望価格] 列を選択して、[詳細] セクションに追加します。

  26. [通貨] 列を選択して、[希望価格] の下のフォームに追加します。

  27. [寝室] 列を選択して、[通貨] の下のフォームに追加します。

  28. [浴室] 列を選択して、[寝室] の下のフォームに追加します。

    テーブル列を含むメイン フォームのスクリーンショット。

タスク 1.2 – タイムライン コントロールを追加する

  1. フォーム デザイナーの左側のナビゲーションから [ツリー ビュー] を選択します。

  2. [タイムライン] セクションを選択します。

  3. フォーム デザイナーの左側のナビゲーションから [コンポーネント] を選択します。

  4. [表示] を展開します。

  5. [タイムライン] コントロールを選択して、[タイムライン] セクションに追加します。

  6. フォーム デザイナーの左側のナビゲーションから [ツリー ビュー] を選択し、[全般] タブを展開して、[タイムライン] セクションを選びます。

  7. 右側の [プロパティ] ペインで、[ラベルの非表示] チェック ボックスをオンにします。

    フォーム上のタイムライン コントロール。

  8. [ツリー ビュー] で、[タイムライン] の [メモのテキスト] コントロールを選択します。

  9. 右側の [プロパティ] ペインで、[ソーシャル活動] を選び、[有効] チェック ボックスをオフにして、[完了] を選択します。

  10. 右側の [プロパティ] ペインで、[活動の並べ替え] ドロップダウンの [作成日] を選択します。

  11. フォーム デザイナーの左側のナビゲーションから [テーブル列] を選択します。

  12. [状態の理由] 列を [ヘッダー] 領域にドラッグします。

タスク 1.3 – 簡易表示コントロールを追加する

  1. フォーム デザイナーの左側にある [ツリー ビュー] を選択します。

  2. [関連] セクションを選択します。

  3. フォーム デザイナーの左側のナビゲーションで [コンポーネント] を選択します。

  4. [表示] を展開します。

  5. [簡易表示] コントロールを選択して、[関連] セクションに追加します。

  6. [検索] で [クライアント] を選び、[連絡先] で [アカウント連絡先カード] を選んで、[完了] を選択します。

タスク 1.4 – タブを追加する

  1. フォーム デザイナーの左側のナビゲーションで [コンポーネント] を選択します。

  2. [1 列タブ] コントロールを選択して、フォームに追加します。

  3. [ラベル] に「Showings」と入力し、[名前] に「showingTab」と入力します。

  4. フォーム デザイナーの左側の [ツリー ビュー] を選択し、[内覧] タブを展開して、[新しいセクション] セクションを選びます。

  5. [ラベル] に「Showings」と入力し、[名前] に「showingSection」と入力します。

  6. フォーム デザイナーの左側のナビゲーションで [コンポーネント] を選択します。

  7. [グリッド] を展開します。

  8. [サブグリッド] コントロールを選択して、[内覧] セクションに追加します。

  9. [関連レコードの表示] を選択します。

  10. [テーブル] で [内覧] (不動産) を選択し、[既定のビュー] で [アクティブな内覧] を選択して、[完了] を選択します。

  11. [ラベル] に「Showings」と入力し、[名前] に「showingsSG」と入力します。

  12. [ラベルの非表示] を選択します。

  13. 保存と公開を選択します。

  14. フォーム デザイナーを閉じます。

  15. 完了 を選択します。

演習 2 - 内覧のメイン フォーム

この演習では、内覧テーブルのメイン フォームを変更します。

タスク 2.1 – メイン フォームのレイアウトと列

  1. Power Apps Maker ポータル https://make.powerapps.com に移動します

  2. Dev One 環境にいることを確認します。

  3. ソリューションを選択します。

  4. [物件一覧] ソリューションを開きます。

  5. [内覧] テーブルを選択します。

  6. データ エクスペリエンスで、フォームを選択します。

  7. [フォームの種類] が [メイン] の [情報] フォームを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  8. [所有者] フィールドを [ヘッダー] 領域にドラッグします。

  9. フォーム デザイナーの左側のナビゲーションから [テーブル列] を選択します。

  10. [不動産物件] 列を [名前] フィールドの下にドラッグします。

  11. [表示先] 列を選択して、[不動産物件] の下のフォームに追加します。

  12. [表示元] 列を選択して、[表示先] の下のフォームに追加します。

  13. [内覧日] 列を選択して、[表示元] の下のフォームに追加します。

  14. [関心レベル] 列を選択して、[内覧日] の下のフォームに追加します。

  15. [コメント] 列を選択して、[関心レベル] の下のフォームに追加します。

  16. 右側の [プロパティ] ペインで、[フォーム フィールドの高さ] を [3 行] に増やします。

  17. 保存と公開を選択します。

  18. フォーム デザイナーを閉じます。

  19. 完了 を選択します。

演習 3 - 複数のフォーム

この演習では、新しいフォームを作成し、セキュリティ ロールを使用してアクセスを制限します。

タスク 3.1 – セキュリティ ロール

  1. Power Apps Maker ポータル https://make.powerapps.com に移動します

  2. Dev One 環境にいることを確認します。

  3. ソリューションを選択します。

  4. [物件一覧] ソリューションを開きます。

  5. [+ 新規]、[セキュリティ]、[セキュリティ ロール] の順に選択します。

  6. [ロール名] に「Property admin」と入力します。

  7. [部署] を選択して保存します。

  8. [カスタム列] セクションまで下へスクロールします。

  9. [不動産物件] テーブルを選択します。 すべての特権のアクセス レベルを [組織] に変更します。

    セキュリティ ロールの不動産物件の権限。

  10. [内覧] テーブルを選択します。 すべての特権のアクセス レベルを [組織] に変更します。

  11. 保存して閉じる を選択します。

  12. 完了 を選択します。

タスク 3.2 – フォームをコピーする

  1. [内覧] テーブルを選択します。

  2. データ エクスペリエンスで、フォームを選択します。

  3. [フォームの種類] が [メイン] の [情報] フォームを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  4. [関心レベル] を選択し、[プロパティ] ペインで [読み取り専用] を選びます。

  5. [コメント] を選択し、[プロパティ] ペインで [読み取り専用] を選びます。

  6. [コピーの保存] を選択します。

  7. [表示名] に「Showing admin form」と入力し、[保存] を選択します。

    内覧メイン フォームのコピー。

  8. [フォーム設定] を選択します。

  9. [物件管理者] のセキュリティ ロールを選択します。

    メイン フォームのセキュリティ ロール。

  10. 保存と公開を選択します。

  11. フォーム デザイナーを閉じます。

  12. 完了 を選択します。

演習 4 - 不動産物件のビュー

この演習では、不動産物件テーブルのビューを変更します。

タスク 4.1 – 不動産物件のパブリック ビュー

  1. Power Apps Maker ポータル https://make.powerapps.com に移動します

  2. Dev One 環境にいることを確認します。

  3. ソリューションを選択します。

  4. [物件一覧] ソリューションを開きます。

  5. [不動産物件] テーブルを選択します。

  6. データ エクスペリエンスで、ビューを選択します。

  7. [アクティブな不動産物件] ビューを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  8. [作成日] 列の横にあるキャレットを選び、[削除] を選択します。

  9. [希望価格] 列を選択して、ビューに追加します。

  10. [市区町村] 列を選択して、ビューに追加します。

  11. [寝室] 列を選択して、ビューに追加します。

  12. [浴室] 列を選択して、ビューに追加します。

  13. [クライアント] 列を選択して、ビューに追加します。

  14. [プロパティ] ペインで、[並べ替え] の下の [物件名] を削除します。

  15. [プロパティ] ペインで、[並べ替え] を選択し、[希望価格] を選びます。

    不動産物件のアクティブ ビュー。

  16. 保存と公開を選択します。

  17. ビュー デザイナーを閉じます。

  18. 完了 を選択します。

タスク 4.2 – 不動産物件の簡易検索ビュー

  1. [アクティブな不動産物件の簡易検索] ビューを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  2. [作成日] 列の横にあるキャレットを選び、[削除] を選択します。

  3. 右側の [アクティブな不動産物件の簡易検索] ペインで、[検索条件] の下にある [テーブルの検索列の編集] を選択します。

  4. 次の列を選んで、[適用] を選択します。

    • 市町村
    • クライアント
    • プロパティ名

  5. 保存と公開を選択します。

  6. ビュー デザイナーを閉じます。

  7. 完了 を選択します。

演習 5 - 内覧ビュー

この演習では、内覧テーブルのビューを変更します。

タスク 5.1 – 内覧のパブリック ビュー

  1. Power Apps Maker ポータル https://make.powerapps.com に移動します

  2. Dev One 環境にいることを確認します。

  3. ソリューションを選択します。

  4. [物件一覧] ソリューションを開きます。

  5. [内覧] テーブルを選択します。

  6. データ エクスペリエンスで、ビューを選択します。

  7. [アクティブな内覧] ビューを選択し、[コマンド] メニュー (…) を選び、[編集] > [新しいタブで編集] の順に選択します。

  8. [作成日] 列の横にあるキャレットを選び、[削除] を選択します。

  9. [不動産物件] 列を選択してビューに追加します。

  10. [内覧日] 列を選択してビューに追加します。

  11. [表示先] 列を選択してビューに追加します。

  12. [関心レベル] 列を選択してビューに追加します。

  13. [関連] タブを選択します。

  14. [不動産物件] を展開します。

  15. [希望価格] 列を選択して、ビューに追加します。

  16. [プロパティ] ペインで、[並べ替え] の下の [名前] を削除します。

  17. [プロパティ] ペインで、[並べ替え] を選択し、[内覧日] を選びます。

  18. [保存して公開] ドロップダウン メニューで、[保存のみ] を選択します。

タスク 5.2 – 新しい内覧ビュー

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

  2. [名前] に「High Interest showings」と入力します。

  3. [保存] を選択します。

  4. [関心レベル] 列の横にあるキャレットを選択し、[フィルター条件] を選びます。

  5. [等しい] を選択し、[非常に高い] と [高い] を選びます。

  6. 適用を選択します。

  7. 保存と公開を選択します。

  8. ビュー デザイナーを閉じます。

  9. 完了 を選択します。