カスタムページ ①概要 （Microsoft Power Apps Advent Calendar 2023/12/10）

はじめに

この記事は、Power Apps Advent Calendar 2023 12月10日担当分の記事です。
この後の記事も楽しみですねー。ぜひカレンダーの購読登録をお願いいたしますー！

先日JPPC2023（Japan Power Platform Conference 2023 ）のメインイベント
12/ 8 のアプリ＆サイト開発Application AP-09セッションで登壇させていただきました。

こちらの記事については別途自分ブログで書こうかと思いますが、
この中でお伝えしたカスタムページについて、概要部分を記事にしようと思います。

TIPSPower Appsのスタンドアロンライセンス（有償ライセンス）が必要な範囲の記事となります。

登壇の記事を書きました！こちらから登壇資料のダウンロードも可能です。

カスタムページとは

公式：カスタム ページを使用して、モデル駆動型アプリとキャンバス アプリを統合する – Power Apps | Microsoft Learn
公式：モデル駆動型アプリにカスタム ページを追加する – Power Apps | Microsoft Learn

上記におおむね記載がありますが、ざっくりとお伝えすると、
モデル駆動型アプリ上にページとしてキャンバスアプリを作れるイメージです。

ただ以降お伝えしますが一部通常のキャンバスアプリと異なる部分があります。

作成の流れ

以下のようにモデル駆動型アプリのデザイナーから新しいページ ＞ カスタムページを選択します。

新しいカスタムページを作成する。または既存のカスタムページを使用する＞選択の流れです。

そうするとよくみるキャンバスアプリの編集画面とほぼ同じものが開きます。
ここからキャンバスアプリと同じように作成していくイメージです。

作成するとページとして保持される

保存すると「ページ」として保持されます。
基本ソリューション内で作成するので、以下のようにページという項目に追加されます。ここからの編集開始や新規作成も可能。
表示名以外に名前というものが出来ます。

NOTEこの部分を指定の値にする方法はわかりませんでした。作ると自動で出来る感じです（接頭辞＋ランダム※英語ならそのまま反映されるっぽい）　JavaScriptで開く際に指定して使用するケースがあります。

バージョン管理も同じように可能です

コネクタは同様。コントロールは少し異なる

カスタムページは今から2年位前にプレビューされその後GAされました。
※2021年の7月パブリックプレビュー→ 9月GA
カスタムページランタイムが一般提供されました |Microsoft Power Apps

その際にコントロールはDataverse for Teams版のキャンバスアプリでも使われているFluent UIコントロールが採用されています。
Microsoft Teams の Power Apps アプリで Fluent UI コントロールを使用する – Power Apps | Microsoft Learn

これは通常のキャンバスアプリのコントロールとは異なり、デザインがおしゃれになっていたり、プロパティが一部異なり、数も少なくなっています。
現在来ている最新のモダンコントロールともまた異なります。その間に出来たコントロールという感じです。

NOTE※一応どちらからもFluent UIのリンクに飛ぶと以下のFluent 2となるのでくくりとしてはおんなじなのかも？

TIPSちなみにモダンコントロールはカスタムページでも有効化できます。そのうちに統一されていくのかなと思われる。

Home – Fluent 2 Design System (microsoft.design)

サポートされているコントロールとしては以下が記載されています。

大体は使えるのですが、一部が使えない（項目に表示されない）感じです。
ドロップダウンやPDFビューア（プレビュー）、AIBuilderやMRなどは出てこないです。

上記のようにボタンもUI異なりますし改行表示できない（改行しても反映されない）や、ラベルに背景が付けれなかったり(Fillがない)、その他、プロパティもDefaultやSelectedDateがValueとなっている。などの違いがちょこちょこあります。
基本出来ることが減っている感じですね。ただカレンダーは当時から今のモダンのようにコンパクトで使いやすいものだったりします。

NOTE普通はキャンバスアプリのコントロールに慣れていると思うので、最初ちょっとイラッとするかなと。
込み入ったデザインでなければ近い内容で作れはするのでまあ許容範囲かなーと個人的には思っています。

レスポンシブ対応。自動生成も出来る（ちょっと違う）

最近になって通常キャンバスアプリもレスポンシブな自動生成アプリが作れるようになりましたが、
こちらは当時からデータからの自動生成アプリが作れていました。（Dataverse for Teams版も）
ただ今のキャンバスアプリのものとはちょっと異なります。
またレスポンシブ対応がデフォルトになっていました。モデル駆動型アプリ自体がレスポンシブ対応ですし。

ちょっと今のキャンバスアプリの自動生成に似てますが、おしゃれかなー？と言える感じのUIと思ってます（個人の感想）
そもそもモデル駆動型アプリを使う前提なのであまり自動生成アプリを使うケースはないかとは思います。
もっと機能的なものをページとして作成するイメージです。

キャンバスアプリからの移行はOKとあり（公式）

こちらですが、以下の公式に既存のキャンバスアプリをカスタムページに移行するという内容があり、
手順としては画面をコピーして貼り付けて調整してね。という感じです。
ということは、キャンバスアプリのコントロールを移植して使ってもOKだよ！と言えるのかと認識しています。

NOTE実際、以前からキャンバスアプリからコピペすれば出てこないコントロールを使えます。が、サポートなどの面でどうなのかな？という感じでした。
以下の記載をみるとコピペしてとあるので使ってOKと思えるのですが、この点はちゃんと確認しないといけないかもですね。将来的にも問題ないか、出てこないAIBuilderなどでも使えるのか？など
自分も登壇のデモでAI Builderを埋め込んだりしましたが一応実験的なものですとしています。

カスタム ページを使用して、モデル駆動型アプリとキャンバス アプリを統合する – Power Apps | Microsoft Learn

ライセンスや共有

ライセンスは不要（モデル駆動型アプリに内包）

カスタムページのライセンスですが、これはモデル駆動型アプリの一部とみなされるので不要です！
モデル駆動型アプリ×１とカウントされます！

モデル駆動型アプリとキャンバスアプリをそれぞれ作成しそれぞれを使用する場合、（Premiumだと問題ないが）アプリごとのプランや従量課金プランの場合は２アプリとみなされます。
→カスタムページで作れば１アプリとみなされるのはうれしいポイントですね！

個別の共有も不要

また、共有についても不要です。モデル駆動型アプリの共有に依存するため。

キャンバスアプリをモデル駆動型アプリのフォームに埋め込む方式も別途あるのですが、その場合だとキャンバスアプリを個別に共有が必要となります。※別途のライセンスは不要

こちらも公式からの抜粋を載せておきます。
カスタム ページを使用して、モデル駆動型アプリとキャンバス アプリを統合する – Power Apps | Microsoft Learn

基本は１画面で作成する（設定で複数画面にも出来る）

最後に基本カスタムページは1画面で作成する前提の設定になっています。
ただここは設定で複数画面対応に変更できます。
１画面が推奨となっている理由としては基本サイドリンクから開くと常に最初の画面になる点だったり、Backをすると画面を閉じる（前に開いていたビューなどに戻る）など挙動が異なります。そのあたりが複雑化することを避けるイメージのようです。シナリオごとに１つのページを作っていくほうがいいよと。自分もそうかなと思います。ただ必要であれば複数画面にも出来ます。

モデル駆動型アプリのカスタム ページで Power Fx を使用する – Power Apps | Microsoft Learn

独自のPower Fx関数など

Power Fxを使った実装例が公式に載っています。
Notify関数にも対応しています。（履歴で残っていき自動では消えないという違いがある）
カスタムページの場合にはNavigate関数で指定のビューやフォーム、カスタムページだったりに遷移が出来ます。
この辺りは以下公式ページご参考ください。もちろんその他通常の実装が出来ます。

モデル駆動型アプリのカスタム ページで Power Fx を使用する – Power Apps | Microsoft Learn

その他

カスタムページについてはその他にも多言語対応できたり、コンポーネントやPCFも入れれたり、既知の問題が載っているページなどあるのでこの辺りは公式情報をご確認ください。

おわりに

今回はカスタムページの概要を書いてみました。登壇時には本記事ほどは伝えれてないので流用プラスアルファな感じです。
カスタムページは今後も登壇の際にデモを行ったページやダイアログで開く実装などご紹介もしていこうかと思っています。
それでは。