Power Appsで複数画面のアプリを作るなら、Navigate関数を理解することが最初の関門です。これを押さえると、ボタンを押して画面を切り替える、一覧から詳細に移動するといった動作が一気に作れるようになります。
複数画面アプリの基本的な考え方
Power Appsでは、1つのアプリの中に複数のスクリーン（画面）を作ることができます。左側のツリービューを見ると、スクリーンが一覧で並んでいる場所があると思います。スクリーンを追加するほど、表現できるアプリの幅が広がります。
ただし、スクリーンは互いに独立しています。つまり、スクリーンAのコントロールにスクリーンBから直接アクセスすることはできません。画面をまたいでデータを使いたいときは、変数という仕組みを使う必要があります。この点は最初に覚えておくと後で混乱しません。
画面遷移を実現する関数が Navigate関数 と Back関数 です。この2つを使いこなすことで、複数画面アプリの基礎が固まります。
Navigate関数の基本
構文と使い方
Navigate関数の基本的な書き方はシンプルです。
Navigate(遷移先スクリーン, 遷移アニメーション)例えば、ボタンを押して詳細画面に移動させたいとします。そのボタンのOnSelectプロパティに次のように書きます。
Navigate(詳細画面, ScreenTransition.Cover)第1引数が移動先のスクリーン名、第2引数が遷移時のアニメーションです。アニメーションは省略も可能ですが、指定しておくと画面の切り替わりが自然に見えます。
遷移アニメーションの選び方
よく使うアニメーションは3種類です。用途ごとに使い分けると、アプリの操作感が良くなります。
| アニメーション | 動作 | おすすめの場面 |
|---|---|---|
| ScreenTransition.None | アニメーションなし、即切り替え | 高速な操作が必要なとき、パフォーマンス重視のとき |
| ScreenTransition.Fade | フェードイン・アウト | 一般的な画面遷移。どこでも使いやすい |
| ScreenTransition.Cover | 右からスライドしてくる | 一覧→詳細など、階層が深くなる方向への遷移 |
個人的には ScreenTransition.None か ScreenTransition.Cover をほぼ使っています。アニメーションが凝りすぎると動作がもたつくことがあるので、シンプルなもので十分です。
Back関数で元の画面に戻る
詳細画面から一覧画面に戻るボタンには Back関数 を使います。
Back()これは直前のスクリーンに戻る関数です。使い方は簡単なのですが、1点だけ注意があります。Back()は画面の履歴を遡るので、複雑な遷移フローだと意図しない画面に戻ることがあります。シンプルなアプリであれば問題ないのですが、慣れてきたら明示的に遷移先を書くほうが安全です。
Navigate(一覧画面, ScreenTransition.None)こちらのほうが、どの画面に戻るかが一目でわかるのでおすすめです。
コンテキスト変数を使って値を受け渡す
Navigate関数の第3引数
一覧画面でタップした行の情報を、詳細画面でも使いたい——こういう場面はよくあります。そのときに使うのが Navigate関数の第3引数 です。
Navigate(詳細画面, ScreenTransition.Cover, {selectedItem: ギャラリー1.Selected})こう書くと、詳細画面に selectedItem という名前のコンテキスト変数が渡されます。コンテキスト変数とは、そのスクリーン内だけで有効な一時的な変数のことです。料理でいえば、調理台の上にしか置けない食材のようなものです。別のスクリーンに持ち出すことはできません。
詳細画面では、渡されたコンテキスト変数をこのように使います。
selectedItem.タイトル
selectedItem.担当者名
selectedItem.期日SharePointリストのフィールド名をそのまま書けば、選択した行のデータが表示されます。
グローバル変数との使い分け
コンテキスト変数はそのスクリーン内でしか使えないので、詳細画面から編集画面にさらに移動したい場合は少し工夫が必要です。
よく使う方法は2つあります。1つ目は Navigate関数の第3引数でそのまま次の画面にも渡す方法。2つ目は Set関数を使ってグローバル変数に保存しておく方法です。
// グローバル変数に保存してから遷移する場合
Set(gSelectedItem, ギャラリー1.Selected);
Navigate(詳細画面, ScreenTransition.Cover)グローバル変数はアプリ全体からアクセスできるので、複数の画面をまたぐデータにはこちらが向いています。グローバル変数とコンテキスト変数の違いや使い分けについては、グローバル変数とコンテキスト変数の解説で詳しく整理しているので参照してみてください。
実際の画面設計——一覧・詳細・編集の3画面構成
業務アプリで最もよく使う画面構成が、一覧→詳細→編集の3画面パターンです。私が物流現場で作った申請管理アプリも、最初はこの構成から始めました。
画面の役割と遷移の流れ
各画面の役割を先に決めておくと、設計がスムーズになります。
- 一覧画面：ギャラリーでデータをリスト表示する。行をタップすると詳細へ移動
- 詳細画面：選択したレコードの情報を表示する。編集ボタンで編集画面へ
- 編集画面：データを入力・変更してPatch関数で保存。完了後は一覧に戻る
一覧画面のギャラリーのOnSelectプロパティはこのようになります。
Navigate(詳細画面, ScreenTransition.Cover, {selectedRecord: ThisItem})ThisItemはギャラリーが今タップされているレコードを指します。これをコンテキスト変数 selectedRecord として詳細画面に渡します。詳細画面の各テキストラベルには selectedRecord.フィールド名 と書けば、選んだレコードの値が表示されます。
変数の設計に少し時間をかけると後が楽になる
画面遷移で詰まるのは、だいたい変数の使い方が曖昧なときです。コンテキスト変数でいくか、グローバル変数でいくかを最初に決めておくと、作りながら迷わずに済みます。
私がよく使うパターンは、詳細画面まではコンテキスト変数でデータを渡して、編集画面に進む段階でグローバル変数に切り替える方法です。詳細画面では読み取りだけなのでコンテキスト変数で十分。編集画面ではフォームとのやり取りもあるので、アプリ全体からアクセスできるグローバル変数のほうが扱いやすいのです。
ギャラリーコントロール自体の使い方（リスト表示の設定、Selected状態の管理、Search関数との組み合わせ）については別記事で解説する予定です。Navigate関数と組み合わせると、より実用的な一覧画面が作れるようになります。
注意点と限界
画面数が増えると管理が大変になる
Power Appsはスクリーン数が増えると、どの変数がどの画面で使われているかを追うのが難しくなります。スクリーンが10枚を超えてくるあたりから、変数名の付け方や画面の命名規則を統一しないと自分でも混乱しやすくなります。
開発者ドキュメントには、スクリーン数やコントロール数が増えるほどパフォーマンスが落ちると書かれています。体感として、スクリーンが20を超えてくると動作がもたつき始めることがあります。複雑になりそうな場合は、画面の分け方自体を見直すか、コンポーネントの活用を検討してみてください。
Back()は使いすぎに注意
Back()自体は便利なのですが、Navigate()で画面を飛ばした経路が複雑だと、Back()で戻る先が想定外になることがあります。ユーザーが予期しない画面に戻った場合、操作に迷わせてしまいます。シンプルな構成なら問題ないので、複雑になってきたら Navigate()で明示的に戻り先を指定するほうが安全です。
アプリ開発の全体像についてはPower Apps開発の全体マップに整理しています。画面設計だけでなく、データソース・関数・フォームなど各トピックへの地図になっているので、何から学べばいいか迷ったときに使ってみてください。また、アプリを作る一連の手順を知りたい方はPower Appsアプリ開発の流れも参考にしてみてください。
まとめ
Navigate関数をマスターすると、複数画面を持つ本格的な業務アプリが作れるようになります。最初はNavigateで飛んで、Back()で戻るだけを覚えれば十分です。慣れてきたら第3引数でコンテキスト変数を渡して、画面間のデータ連携に挑戦してみてください。
一覧→詳細→編集の3画面構成は、業務アプリの定番パターンです。まずはこれを1本作り切ることを目標にしてみましょう。地道に積み上げていけば、使い物になるアプリはちゃんと作れます。
