Power Appsのモデル駆動型アプリでは、マウス操作のみで簡単に画面を作成できますが、画面レイアウトの柔軟性が低くデザインが固定されています。そのため、どの画面も同じようなレイアウトとなってしまいます。
そこで、モデル駆動型アプリの「カスタムページ」を利用します。これにより、柔軟なレイアウトが可能になります。
本記事では、カスタムページを用いてモデル駆動型アプリの画面を作成する方法を紹介したいと思います。
モデル駆動型アプリとカスタムページ
モデル駆動型アプリではあらかじめフォームやビューなどが用意されており、各レコードの詳細画面や一覧画面などをマウス操作のみで作成することができます。しかし、その分デザインは固定となってしまいます。
配置の自由度の向上や、標準機能では実現できない検索画面やダイアログ画面を表示したい場合などには、スタムページを使用することで対応できます。
カスタムページとは、モデル駆動型アプリのページの種類の1つで、キャンバスアプリを使用して自分好みのページを作成することができる機能です。作成したカスタムページをモデル駆動型アプリの編集画面から指定することで、モデル駆動型アプリの画面上に表示することができます。
モデル駆動型アプリの作成後
まず、モデル駆動型アプリを作成します。
モデル駆動型アプリのビューでは標準で検索機能が用意されていますが、同時に複数のフィールドを指定して検索することができません。
そこで、今回はカスタムページを使って「複数フィールドで検索可能な画面」を作成したいと思います。
カスタムページの作成方法
始めに、モデル駆動型アプリに追加するカスタムページを作成します。
1.モデル駆動型アプリの編集画面を開き、[ページの追加] ＞ [カスタムページ] ＞ [カスタムページを作成する]を選択し、任意の名前を入力後、作成ボタンを押下します。
2.カスタムページの作成画面が表示されます。
3.カスタムページを作成していきます。作成方法はキャンバスアプリと同じであるため、好きなコントロールを使用し自由にページを作成することができます。今回は下記のような複数フィールドで検索可能な検索画面を作成しました。
※カスタムページでサポートされているコントロールには一部制限があり、使用できないコントロールが存在します。（モデル駆動型アプリのカスタム ページの設計 - Power Apps | Microsoft Learn）
4.カスタムページの作成が完了したら、画面右上の公開ボタンから公開します。
モデル駆動型アプリへの追加方法
続いて、作成したカスタムページをモデル駆動型アプリへ追加します。
1.カスタムページを追加したいモデル駆動型アプリの編集画面を開きます。
2.今回は、サイトマップの「取引先企業」を選択するとカスタムページで作成した検索画面が表示されるように設定します。ナビゲーションの[取引先企業ビュー]を選択し、設定を開きます。
3.[コンテンツタイプ]を"カスタムページ"に変更し、[ページ]に作成したカスタムページを指定します。
4.モデル駆動型アプリを保存して公開します。
※ 手順3時点では「アプリを再公開する必要があります」の警告が表示されていますが、公開完了後は指定したカスタムページが正常に表示されます。
モデル駆動型アプリでのカスタムページ確認
それでは実際に、モデル駆動型アプリ上で追加したカスタムページを確認していきます。
1.モデル駆動型アプリを開き、サイトマップから[取引先企業]をクリックし、作成したカスタムページが表示されることを確認します。
2.まず、検索欄の[企業名]と[業種]に検索項目を入力します。検索ボタン押下後、検索項目と一致したレコードが表示されることが確認できました。
3.次に[住所]と[企業形態]にも検索項目を入力します。検索ボタンを押下後、さらに検索結果が絞り込まれて表示されることが確認できました。検索結果表示後、参照ボタンを押下します。
4.検索結果に表示されたレコードのフォームに遷移することができました。
まとめ
本記事では、モデル駆動型アプリにカスタムページを追加する方法を紹介しました。
用途に合わせカスタムページを使用することで、モデル駆動型アプリでは対応できないレイアウトや機能の実現が可能となり、アプリ開発に柔軟性を持たせることができますので、ぜひ試してみてください。
