Notesへ戻る

Power Platformメモ

Power Appsの画面遷移(Navigate・Back)の使い方

Power Appsで画面を切り替えるNavigate関数とBack関数の基本的な使い方を整理したメモです。

Power AppsNavigateBack画面遷移スクリーン

Power Appsの画面遷移(Navigate・Back)の使い方

この記事の位置づけ

この記事は、Power Appsの初学者向け技術メモです。関数の動作は環境・バージョンによって変わることがあります。

実際のアプリで動作を確認してください。

ざっくり言うと

Power Appsで複数の画面(スクリーン)を持つアプリを作るとき、Navigate関数で画面を切り替え、Back関数で前の画面に戻ります。

ボタンの OnSelect プロパティにこれらの関数を設定するのが基本の使い方です。

基本の書き方

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)を使う方法の使い分けも意識すると、画面間のデータ受け渡しが整理しやすくなります。

関連メモ・関連ツール