Notesへ戻る
Power Platformメモ
Power Appsの画面遷移(Navigate・Back)の使い方
Power Appsで画面を切り替えるNavigate関数とBack関数の基本的な使い方を整理したメモです。
Power Appsの画面遷移(Navigate・Back)の使い方
この記事の位置づけ
この記事は、Power Appsの初学者向け技術メモです。関数の動作は環境・バージョンによって変わることがあります。
実際のアプリで動作を確認してください。
ざっくり言うと
Power Appsで複数の画面(スクリーン)を持つアプリを作るとき、Navigate関数で画面を切り替え、Back関数で前の画面に戻ります。
ボタンの OnSelect プロパティにこれらの関数を設定するのが基本の使い方です。
Navigate 関数
基本の書き方
Navigate(画面名)
例:DetailScreenに遷移する
Navigate(DetailScreen)
トランジション(画面切り替えのアニメーション)を指定する
Navigate(DetailScreen, ScreenTransition.Fade)
| トランジション | 効果 |
|---|---|
| ScreenTransition.None | アニメーションなし(デフォルト) |
| ScreenTransition.Fade | フェードイン・アウト |
| ScreenTransition.Cover | 新しい画面がスライドしてくる |
| ScreenTransition.CoverRight | 右方向にスライド |
| ScreenTransition.UnCover | 現在の画面がスライドして消える |
値を渡しながら遷移する
遷移先の画面にローカル変数(UpdateContext)として値を渡せます。
Navigate(DetailScreen, ScreenTransition.None, {selectedId: Gallery1.Selected.ID})
遷移先の画面では selectedId として参照できます(遷移先でUpdateContextが実行された扱いになります)。
Back 関数
前の画面に戻ります。ブラウザの「戻る」ボタンのような動作です。
Back()
トランジションを指定する
Back(ScreenTransition.UnCover)
Navigate で Cover を使った場合は、Back で UnCover を使うと自然な動きになります。
よくある使い方のパターン
一覧→詳細→編集の画面遷移
// 一覧画面のギャラリーのOnSelect
Navigate(DetailScreen, ScreenTransition.Cover, {selectedId: ThisItem.ID})
// 詳細画面の「編集」ボタンのOnSelect
Navigate(EditScreen, ScreenTransition.Cover)
// 編集画面の「戻る」ボタンのOnSelect
Back()
戻るボタンを作る
Back関数はシンプルですが、戻り先を明示したい場合はNavigateを使います。
// 明示的に戻り先を指定する場合
Navigate(HomeScreen)
注意点
Navigate関数に存在しない画面名を入力するとエラーになります。画面名を変更した場合は、Navigate関数の参照も更新が必要です。
また、Back関数は遷移の履歴がない状態(アプリのトップ画面)で実行するとアプリが閉じる場合があります。戻れる画面がない場合の処理を検討してください。
値を渡す方法(Navigate の第3引数)と、グローバル変数(Set)を使う方法の使い分けも意識すると、画面間のデータ受け渡しが整理しやすくなります。