Power Apps モデル駆動型アプリで「ねこ管理アプリ」を作ってみる｜第3回「モデル駆動型アプリ作成」

練習がてらモデル駆動型アプリを使って「ねこ管理アプリ」を作ってみたシリーズ第3回。

今回は前回作成したテーブルを使ってモデル駆動型アプリを作成していく。

前回の記事はこちら

※ちょっと用語が入り乱れてしまいました。文章内の

• テーブル　＝　エンティティ
• 列　＝　フィールド
• 行　＝　レコード

はそれぞれ同義です。

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

それではさっそくモデル駆動型アプリを作成していく。

「新しいアプリ」から「モデル駆動型」を選んで

名前とIDを設定（今回はねこ管理）して、完了を押下。

これでモデル駆動型アプリは作成完了。

サイトマップの作成

モデル駆動型アプリの初期画面はこんな感じ。

いきなりエラーが出ているので、まずはサイトマップから作成していく。

サイトマップの編集を押すとこんな画面に遷移する。

まずはエリアとグループの名前を編集。

今回はこんな感じで設定。

そしたら「サブエリア」を編集。

サブエリアには「エンティティ」とか「ダッシュボード」を設定できる。今回はこんな感じで「ねこ」エンティティを表示してみる。

この調子で「食事履歴」「体重履歴」「キャットフード」エンティティをこんな感じでサブエリアに設定。「保存」→「公開」する。

そしたら左上の「アプリデザイナー」を押下して前の画面に戻る。すると、サイトマップに追加したエンティティが自動で追加されている！

一旦ここで動作確認。右上の「再生」を押下してモデル駆動型アプリを立ち上げる。

こんな感じで作成した「サイトマップ」が表示され、「サブエリア」を選ぶとエンティティ（テーブル）の一覧が表示されるはず。

せっかくなので食事履歴エンティティにデータ（レコード）を追加してみる。サブエリアで「食事履歴」を選んで、「新規」を押す。

前回の記事で作成した「食事履歴」エンティティのフォームが表示されるので、適当に入力して保存すると、「食事履歴」にレコードが追加されるはず！

フォームとビューの編集

「食事履歴」エンティティ（テーブル）のフォームとビューは前回の記事でカスタムしたけど、「体重履歴」のビューとフォームはデフォルトのまま。

そこで、モデル駆動型アプリの画面からこれらのビューとフォームをカスタムしていく。

まずはビューから。モデル駆動型のアプリデザイナーの画面から[体重履歴]→[ビュー]を選んで、「アクティブな体重履歴」ビューの編集を押下。

するとこんな画面が開くので、「列の属性」を選んで

表示したい列をドラッグドロップしたり、いらない列を削除していったりする。

今回はこんな感じで列を設定。「保存」→「公開」する。

モデル駆動型アプリを再生すると、いい感じに表示されているはず！

続いてフォームのカスタム。もう一度アプリデザイナー画面に戻って、「体重履歴」→「フォーム」を選んで、「メインフォーム」の編集を押下。

フォームのカスタマイズ画面は、前回の記事で紹介したテーブル（エンティティ）画面から編集するときと同様。出したい列を追加して、いらない列を削除or非表示にして、保存→公開。

アプリを再生して確認。　できた！！

グラフ、ダッシュボード

今回の記事のラストに、「グラフ」と「ダッシュボード」を追加していく。

まずは「体重履歴」テーブルにこんな感じでテストデータを追加していく。

まずはグラフを作成。アプリデザイナーから「体重履歴」→「グラフ」の「新規作成」

今回は「体重履歴」という名前の「折れ線」グラフを、縦軸に体重、横軸に日付を設定。

いい感じに表示されたら、保存してグラフの作成は完了。

続いてダッシュボード。アプリデザイナーから「ダッシュボード」の「新規作成」。

今回は一番タイルが少ないレイアウトを選択。

適当な名前を付けて、まずは左上のタイルの「グラフ」ボタンを押下。

レコードで「体重履歴」を選んで、先ほど作成したグラフを選択し、保存。

ダッシュボードが追加れされていることを確認し、サイトマップを開く。

今回は新しいエリアを作って、グループとサブエリアを追加。そしたらサブエリアに先ほど作ったダッシュボードを設定し、保存→公開。

そしたらアプリを再生し、作成したエリアを表示。

表示された！

少しずつねこを管理するアプリとしてのイメージができてきた、気がするｗ

次回はこのねこ管理アプリに「業務プロセスフロー」を追加してみる！

• Power Apps モデル駆動型アプリについてがんばって説明してみる
• 第1回「テーブル（エンティティ）の作成」
• 第2回「テーブルの作成とリレーション」
• 第4回「業務プロセスフロー（ビジネスプロセスフロー）」
• 第5回「ワークフロー／Power Automateのフロー」
• 第6回「キャンバスアプリの埋め込み」

おまけ：ダッシュボードがうまく表示されない場合

作ったダッシュボードがうまく表示されない場合、ソリューションの設定から修正すると直る場合がある。

まずはPower Appsのトップ画面へ戻って「ソリューション」タブを選択し、今回作成したモデル駆動型アプリがあるソリューション（今回は「既定のソリューション」）を選択。

そしたら「クラシックに切り替え」を押下して、クラシック画面へ移動。

クラシック画面に移動したら、左側からがんばって「ダッシュボード」メニューを探す。見つけたら今回作成したダッシュボードを選択して、「既定として設定」を選んで既定のダッシュボードにしてしまう。

これでひとまずは表示されるはずだけど、ダッシュボードをたくさん作りたい場合はこの方法でうまくいくのか未検証。。。