【PowerApps】画面遷移を完全マスター！実践的な内容で徹底解説

画面遷移の方法を理解していますか？

本記事では、PowerAppsの「画面遷移」について、実践的な観点からわかりやすく解説します。アプリ開発によって避けることのできない画面遷移をマスターしてしまいましょう！

なぜ画面遷移の理解が重要なのか？

業務アプリ開発において、画面遷移はユーザー体験（UX）を大きく左右する要素です。特に、以下のようなシナリオでは適切な実装が必要です：

• 一覧画面 → 詳細画面 へのスムーズな移動

• 複数ステップのフォーム入力（例：申請書やチェックリスト）

• エラー画面や確認画面の適切な表示

ユーザーが迷わないアプリ設計を目指すなら、画面遷移を正しく理解しましょう。

PowerAppsの画面遷移：基本の理解

PowerAppsでは、2つの関数を押さえるだけで画面遷移が可能です：

1. Navigate関数：新しい画面に移動する

2. Back関数：前の画面に戻る

逆に言ってしまえば、この二つだけ理解できればOKです。

Navigate関数の基本構文

Navigate(画面名, 遷移効果, {コンテキスト変数})

• 画面名：移動先の画面名

• 遷移効果：アニメーション効果（省略可能）

• コンテキスト変数：データの受け渡しに使用（省略可能）

Navigate関数の実践例

// 基本的な画面遷移（Screen2へ遷移）
Navigate(Screen2)

// フェード効果付きの遷移
Navigate(Screen2, ScreenTransition.Fade)

// データを渡しながら遷移
Navigate(Screen2, ScreenTransition.Fade, {ID: 123, Name: "山田"})

これらを適切に使い分けることで、ユーザーにとって直感的で使いやすいアプリを作成できます。

例えば、buttonをクリックした際に画面遷移をさせたい場合には、対象のbuttonの”OnSelect”にNavigate関数を記入します。（以下の画像はScreen2へ移動させる場合。２番目以降の引数を設定していないため、画面切り替えの効果なしにただ画面が切り替わる。）

Back関数

Back関数は最後に表示された画面へ遷移します。

また、トランジションの設定がされていない場合には、Navigate関数で指定したトランジションの逆の動きをして画面が切り替わります。（Navigate(Screen2, ScreenTransition.Cover)ならばBack()が実行されると、トランジションはUnCoverRightになる）

// 戻るボタン例
Back(ScreenTransition.UnCover)

画面遷移の効果や変数の受け渡し

1. 適切な遷移効果の選択

PowerAppsでは以下の遷移効果が選べます：

• Cover：次の画面が右から左にスライド

• CoverRight：次の画面が左から右にスライド

• UnCover：現在の画面が右から左にスライドして次の画面が表示される。

• UnCoverRight：現在の画面が左から右にスライドして次の画面が表示される。

• Fade：フェードイン/アウト
• None：即時切り替え

💡業務アプリのポイント：過度なアニメーションは操作性を損ねる場合があります。シンプルなFadeやNoneがおすすめです。

2. コンテキスト変数の活用

画面間のデータ受け渡しにはコンテキスト変数を活用します。

以下の例では、”RecodeID”、”Status”という2つの変数に対し、それぞれ”Gallery1.Selected.ID”、”未処理”という値を代入し、詳細画面へ渡します。

// 必要最低限のデータを渡す
Navigate(詳細画面, ScreenTransition.None, {
    RecodeID: Gallery1.Selected.ID,
    Status: "未処理"
})

3. エラーハンドリングの実装

Navigate関数の戻り値を活用することで、エラー発生時に通知を表示できます。

If(
    Navigate(詳細画面, ScreenTransition.None),
    true,
    Notify("画面遷移に失敗しました", NotificationType.Error)
)

画面遷移先でデータを受け取る方法

画面遷移時に渡された変数を利用して、適切なデータを表示する方法を解説します。この手法を用いると、詳細画面で特定のデータを動的に表示することが可能です。

1. コンテキスト変数を受け取る

Navigate関数で渡したコンテキスト変数は、遷移先の画面でそのまま利用できます。

//例：Navigateで渡したコンテキスト変数
Navigate(詳細画面, ScreenTransition.Fade, {RecordID: Gallery1.Selected.ID})

2. 遷移先でのデータの表示設定

遷移先の画面では、渡された変数を用いてデータを表示します。

1. ギャラリーやフォームにデータをバインドする

• 表示したいコントロールのItemsプロパティにフィルタ条件を設定します。

// 例：詳細画面のフォームに特定のデータを表示
LookUp(データソース, ID = RecordID)

2. 直接ラベルなどに値を表示する

• ラベルのTextプロパティにコンテキスト変数を指定します。

// 例：選択されたレコードのタイトルを表示
"タイトル: " & LookUp(データソース, ID = RecordID).タイトル

3. 応用例：関連データの表示

渡された変数を使って、関連するデータをフィルタリングすることも可能です。

例：顧客IDに基づいて注文履歴を表示する場合

// ギャラリーで顧客に関連する注文を表示
Filter(注文データソース, 顧客ID = RecordID)

実装時の注意点

1. 変数名の一貫性

渡す側と受け取る側で同じ変数名を使用してください。

2. 初期値の設定

画面遷移がない状態で詳細画面を開いた場合（直接アクセスなど）、コンテキスト変数がBlankになることがあります。このような場合は、デフォルト値を設定しましょう。

// OnVisibleプロパティで初期化
If(
    IsBlank(レコードID),
    Set(レコードID, DefaultID)
)

3. データソースの最適化

過剰なデータの読み込みを避けるため、必要なデータのみを取得するフィルタ条件を設定してください。

実装例まとめ

• 遷移元でNavigateを使いコンテキスト変数を渡す

• 遷移先でコンテキスト変数を用いてデータをフィルタリングする

• 必要に応じて、ラベルやフォームのItemsプロパティに設定する

まとめ

ここまで読んでいただいた方は画面遷移について一通り理解できたのではないでしょうか？画面遷移で抑えるべきは、Navigate関数とBack関数の2つだけです。ぜひ今後の開発に役立ててください。

ファンリピートは、Power Apps、Dataverseの導入・活用を支援するサービスを提供しています。Power Apps開発でお困りの方は、ぜひお気軽にご相談ください。

ローコード開発・内製化支援サービス資料はこちら＞＞

当社が提供する無料のPowerPlatformチュートリアルはこちら＞＞