PowerApps|Navigate関数の使い方|3つのできる事を事例もとに解説

このサイトはアフィリエイト広告(Amazonアソシエイト含む)を掲載しています
  • URLをコピーしました!

Navigate関数の使い方

PowerPlatform(PowerApps) を使うにあたり序盤に勉強する事になるNavigate関数の使い方を整理します。

整理しようと考えた理由は「Navigate関数=画面遷移」という思考の方が多いと感じたからです。

私いくつかの外部講習に参加しましたがどの講習でもNavigate関数を教える際は以下の様に教えていました。

一般的な講習におけるNavigate関数についての説明

〇〇画面に遷移する為各要素(ボタンやアイコンなど)のOnSelectプロパティに関数を記入。

Navigate(遷移先)

Aさん

理由なくこの関数を使ってくださいという事ですね。
思考停止感があります・・・。

ポジティブにとらえれば余計なことを伝えないシンプルな文章になっており初心者向けではあります。

Plat(プラット)

Navigate関数には画面遷移を含めてできる事が3つあります。
オプションの位置付けとなっている残りのできる事を紹介します。

Navigate関数は画面遷移だけではなく他にもできる事があります。以降で紹介、解説していきます。

関連書籍

PowerAppsは書籍を使って反復練習することが習得への近道です。

理由は「一度テキストを読んだだけでは理解することが難しい為」です。

書籍を使えば自分のペースで地道に勉強することができますよ。

目次

Navigate関数とは

Navigate関数ができることは大きく分けて3つです。

できること

Microsoftのドキュメントから説明を引用します。

表示される画面を変更します。

Microsoft:Back および Navigate 関数より抜粋

必須の作業は1つです。全部で3つですのであと2つできることがあります。

  • 画面遷移(画面Aから画面Bへの遷移など)
  • 画面遷移時の画面効果(フワッと画面を切り替えたり左右にスライドさせるなど)
  • コンテキスト変数の受け渡し(画面間でもコンテキスト変数を受け渡すことができる)

続いて構文とパラメータをご覧ください。残り2つのできる事を実現させましょう。

構文とパラメータ

構文についてもMicrosoftのドキュメントを引用、加工しました。

加工した理由は「そのまま載せると分かりにくい」為です。余計な情報を省いてシンプルにしました。

構文とパラメータ

NavigateScreen [, Transition [, UpdateContextRecord ] ] )

番号パラメータ名説明
1Screen必須。 表示する画面。
2Transitionオプション。 既定値は None 。
現在の画面と次の画面の間で使うビジュアルの切り替え。
3UpdateContextRecordオプション。新しい画面のコンテキスト変数 を更新。
読みやすくするために抜粋してテーブルにしました
Microsoft:Back および Navigate 関数より抜粋、加工

必須で指定するパラメータはScreenのみです。多くの講習ではここまでを紹介していることが多いです。

以降2つのパラメータについて解説します。

Screen

第1引数はScreenです。遷移したい画面(スクリーン)を記入しましょう。

Transition

第2引数はTransitionです。かんたんに申し上げますと「画面遷移時のアクション」です。

以下パターンの様に画面を遷移させることができます。実際に選択、実行して動きを確認してみてください。

切り替えの引数内容デモ
ScreenTransition.Cover新しい画面は、現在の画面を覆うためにスライドしてビューに表示され、右から左に移動します。画面の切り替えでアニメーションを覆います。
ScreenTransition.CoverRight新しい画面は、現在の画面を覆うためにスライドしてビューに表示され、左から右に移動します。画面切り替えで右のアニメーションを覆います。
ScreenTransition.Fade現在画面がフェードアウトし、新しい画面が表示されます。画面切り替えでアニメーションからフェードします。
ScreenTransition.None (既定)新しい画面は現在の画面をすばやく置き換えます。画面切り替えでアニメーションを表示しません。
ScreenTransition.UnCover現在の画面が右から左にスライドして表示されなくなり、新しい画面が表示されます。画面切り替えでアニメーションを表示します。
ScreenTransition.UnCoverRight現在の画面が左から右にスライドして表示されなくなり、新しい画面が表示されます。画面切り替えで右のアニメーションを表示します。
Microsoft:Back および Navigate 関数より抜粋
Plat(プラット)

色々ありすぎて選べない・・・。という声を聞きます。
無理に使うことはないです。基本はデフォルト(None)で良いですよ。

UpdateContextRecord

第3引数のUpdateContextRecord。ここがNavigate関数の一番難しいところです。

変数の考え方が絡んできます。変数については私のブログ記事をご覧ください。

ここで使用する変数はコンテキスト変数という要素です。文字列、数値、日付などを格納することができます。

基本的にコンテキスト変数は指定した画面内で使用する変数ですが例外があります。

UpdateContextRecordにパラメータとして情報を用意することで別の画面に変数を送ることができます。

変数の設定(登録)方法や使用方法は次のブロックで用意した「使用例」をご確認ください。

使用例

こちらもMicrosoftのドキュメントを参考に情報を整理しました。

番号計算式内容結果
1Navigate(screen2)画面切り替え時のアクション無しで次の画面を表示screen2が表示される
2Navigate( screen2, ScreenTransition.Fade )フェードの切り替え効果を使って次の画面を表示現在の画面がフェードアウトしてからscreen2が表示される
3Navigate( Details, ScreenTransition.Fade, { ID: 12} )フェードの切り替え効果を使って次の画面を表示
コンテキスト変数 ID の値を 12 に更新
現在の画面がフェードアウトしてからscreen2が表示される
screen2の画面上のコンテキスト変数 ID が 12 に設定される
  • 1番のコードではパラメータScreenのみを指示しています。
  • 2番のコードではパラメータScreenとTransitionを指示しています。
  • 3番目のコードではパラメータScreenとTransitionに加えUpdateContextRecordを指示しています。

関数を書く場所

一例を紹介します。基本的にはボタンやアイコンのOnSelectプロパティに関数を記入する事になります。

動画で動作確認

動画を作成しました。(約3分半)Navigate関数に興味がある方は初心者が多いと想定しています。

初心者の頃は文字から実際の操作を想像するのが難しいと思われます。私自身がそうでした。

動画も一部分を切り取らずできるだけ一連の流れを見ていただいた方が理解が進むと感じています。

よってアプリ起動時から使用例の関数を書いて実行するまでの一連の流れを動画にすることにしました。

多少速度を早くしています。理解が追い付かないと感じたら再生速度を調節してご覧ください。

Aさん

ポイントだけ見るのも良いですが通しで作業を見る事も必要ですね。
細かい事が分かる様になりました。

Plat(プラット)

コントロールを用意する様や関数を書く場所がよく分かります。
動画を見ると自分でもやってみようと思えてきます。

最初に青色の見出しを用意する作業やフォームの複製、アイコンを用意する方法等全部見える様にしました。

ユーザー目線では分からないところです。細かい作業の積み重ねでアプリができていることが分かります。

まとめ

Navigate関数についてできる事を深掘りしました。

スクリーンが切り替わる際のアクションや変数の取り回しなど細かいところに気が利く関数ですね。

だからといって無理に機能を最大限に使わなくても良いです。基本は画面遷移の為に使ってください。

よかったらシェアしてください!
  • URLをコピーしました!