【Power Apps】キャンバスアプリの画面遷移挙動まとめ

やりたいこと

Power Apps キャンバスアプリをユーザーフレンドリーにするために、画面遷移の挙動に一工夫加えたい。

前提

• Power Apps が利用できる
• 遷移元、遷移先の2画面が存在する

使用サービス

• Power Apps キャンバスアプリ

使用する関数

Navigate関数

Power Appsキャンバスアプリで画面遷移する時に使用する関数です。

Navigate( Screen [, Transition [, UpdateContextRecord ] ] )

• Screen – 必須。 表示する画面。 画面 の代わりに、移動先の画面上にあるコントロールを使用することもできます。
• Transition – オプション。 現在の画面と次の画面の間で使うビジュアルの切り替えです。 この記事で既に説明した、この引数の有効な値の一覧を参照してください。 既定値は None です。
• UpdateContextRecord – オプション。 1 つ以上の列の名前と、各列に対する値を含んだレコードです。 このレコードは、UpdateContext 関数に渡されたときのように、新しい画面のコンテキスト変数 を更新します。

Back および Navigate 関数 – Power Platform | Microsoft Learn

Navigate(第1引数 , 第2引数 , 第3引数)

• 第1引数(Screen)【必須】：遷移先の画面名
• 第2引数(Transition)【任意】：遷移時の挙動(画面の切り替わり方)
• 第3引数(UpdateContextRecord)【任意】：遷移先画面のコンテキスト変数

つまり、画面遷移の挙動を気にしないようであれば最低限下記で使用できます。

Navigate(遷移先の画面名)

Back関数

Power Appsキャンバスアプリで1つ前の画面に遷移する時に使用する関数です。
様々なサイトやアプリでよく見かける「戻る」ボタンの動きですね。

Back ( [ 遷移 ] )

• Transition – オプション。 現在の画面と前の画面の間で使うビジュアルの切り替えです。 この記事で既に説明した、この引数の有効な値の一覧を参照してください。 既定では、画面が戻る切り替えは、表示された切り替えの逆になります。

Back および Navigate 関数 – Power Platform | Microsoft Learn

Back(第1引数)

• 第1引数(Transition)【任意】：遷移時の挙動(画面の切り替わり方)

Navigate関数と比較すると、Back関数は引数が少ないです。
また、引数が任意のため引数無しでも使用することができます。
つまり、画面を戻る時に画面遷移の挙動を気にしないようであれば最低限下記で使用できます。

Back()

それでは、Navigate関数とBack関数の動きの挙動

Navigate関数とBack関数どちらにもTransitionという引数を設定できることがわかります。
続いては引数で設定する具体的な値を見ていきます。

画面遷移に使用する引数

Transitionの引数では、具体的にはScreenTransitionを使用します。
いくつか種類があるので、各挙動と合わせて説明します。

ScreenTransition.Cover

画面遷移時に右から左に新しい画面がスライドしてくる挙動になります。

Navigate関数の挙動

Navigate( Screen1, ScreenTransition.Cover )

Back関数の挙動

Back(ScreenTransition.Cover)

ScreenTransition.CoverRight

画面遷移時に左から右に新しい画面がスライドしてくる挙動になります。

Navigate関数の挙動

Navigate( Screen1, ScreenTransition.CoverRight )

Back関数の挙動

Back(ScreenTransition.CoverRight)

ScreenTransition.Fade

表示している画面がフェードアウトしていき、新しい画面が表示されます。
Power Pointでもよく使われるアニメーションですね。

Navigate関数の挙動

Navigate( Screen1, ScreenTransition.Fade )

Back関数の挙動

Navigate( Screen1, ScreenTransition.Fade )

ScreenTransition.None

引数を指定しない際に設定される既定の挙動です。新しい画面への遷移にアニメーションは付かず、素早く切り替わります。

Navigate関数の挙動

Navigate( Screen1 )

Back関数の挙動

Back()

ScreenTransition.UnCover

ScreenTransition.Coverの挙動と少し似ています。ScreenTransition.Coverは新しい画面側がスライドするのに対し、ScreenTransition.UnCoverは現在表示されている画面側がスライドします。
どちらにするかは好みになりそうですね。

Navigate関数の挙動

Navigate( Screen1 , ScreenTransition.UnCover )

Back関数の挙動

Back(ScreenTransition.UnCover)

ScreenTransition.UnCoverRight

こちらはScreenTransition.UnCoverと対になるものです。ScreenTransition.UnCoverは右から左に対してスライドしますが、ScreenTransition.UnCoverRightは左から右にスライドします。

Navigate関数の挙動

Navigate( Screen1 , ScreenTransition.UnCoverRight )

Back関数の挙動

Back(ScreenTransition.UnCoverRight)

おわりに

いかがだったでしょうか？
Power Appsの画面遷移時にTransitionの一工夫を入れることでユーザーフレンドリーなアプリになるのではないでしょうか。

是非、試してみてください！