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

2024/5/18:UIを最新版に更新

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

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

スポンサーリンク

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

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

Power Appsのトップページの[作成]タブから[空のアプリ]を選択して、
[Dataverseベースの空のアプリ]の[作成]を押す。
モデル駆動型アプリの作成画面が表示されるので、任意の名前を付けて[作成]を押す。
初期画面はこんな感じ。

テーブルの追加

続いて、前回の記事で作成したテーブルをアプリに追加していく。

[新規]を押して、[Dataverseテーブル]を選択し[次へ]を押す。
[既存のテーブルを選択する]を選び、作成したテーブルを選択して[追加]を押す。
するとテーブルが一つのグループに追加されるので、グループの名前を変更したり、新しいグループを追加したり、[上へ移動]や[下へ移動]でサブエリアを移動したりして、
アプリを使いやすいようナビゲーションを整理する。
Tips:モデル駆動型アプリの「ナビゲーション(サイトマップ)」はモデル駆動型アプリの「サイドメニュー」みたいなもので、以下の3階層に分かれている。
※今回「エリア」は使用しない

  • エリア
  • グループ
  • サブエリア(テーブルのビューやダッシュボード、ページなど)

フォームとビューの編集

続いて各テーブルの「フォーム」と「ビュー」を編集していく。

ビューの編集

まずは各テーブルの「ビュー」を編集する。「ビュー」はテーブルのレコードを一覧表示する際に使用する部品

まずはテーブル「ねこ」のビューを選択し、[新しいタブで編集する]を押す。
ビューの編集画面に遷移するので、「名前」と「誕生日」と「年齢」を追加し、「並べ替え基準」を「誕生日」に変更したら、[保存して公開]を押す。
同様に「食事履歴」のビューを以下のように、
「体重履歴」のビューを以下のように、
「キャットフード」のビューを以下のようにそれぞれ編集し、[保存して公開]を押す。

フォームの編集

続いて各テーブルの「フォーム」を編集する。「フォーム」はテーブルのレコードの詳細を表示したり、編集したりする際に使用する部品

「ねこ」テーブルのフォームを選択して、[メインフォーム]の[新しいタブで編集する]を押す。
※フォームにはいろいろ種類があるけど、今回はメインフォームのみ編集する。
[全般]タブを画像のように編集して、
[1列のタブ]を追加して「履歴」に名前を変える。
タブの中のセクションのラベルを「食事履歴」に変更して、
[サブグリッド]を選択して、[関連レコードの表示]をチェックした状態でテーブル「食事履歴」を選択して[完了]を押す。
続いて[1列のセクション]を追加して、ラベルを「体重履歴」に変更。
先ほど同様に[サブグリッド]を選択して、[関連レコードの表示]をチェックした状態でテーブル「体重履歴」を選択して[完了]を押し、[保存して公開]を押せば「ねこ」テーブルのフォームの作成は完了。
このようにサブグリッドを追加すると、フォームに表示している「ねこ」に関連する「食事履歴」や「体重履歴」を一覧で表示できるようになる。
※本番では「No」や「ねこ」といった「サブグリッドには不要」な列を削除したビューを別に作ってサブグリッドに設定するんだけど、今回はサンプルなので省略。
続いて「食事履歴」フォームの編集を選んで、
こちらは[全般]タブを以下のように設定して完了。
あとは「体重履歴」のフォームを以下のように作成して、
「キャットフード」のフォームを作成したら完成。

動作確認

ビューとフォームの作成が完了したらモデル駆動型アプリを再生してみると、
こんな感じでねこを一覧で見ることができたり、
[体重履歴]の[新規]から、
ねこの体重履歴を追加したりできるようになる。
こんな感じで日付ごとに体重履歴を追加してあげれば、なんとなくねこを管理するアプリっぽくなってきている(気がする)。

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

コメント

タイトルとURLをコピーしました