さて、↑までで一覧画面らしいものができました
↓でデータを1件表示しようとしていました
では、これらを組み合わせて
一覧画面のデータを1件選択して、
そのデータの詳細なデータを表示する画面に遷移する処理を入れてみましょう
Navigate 関数
指定した画面へ遷移するときは、
Navigate関数を使います
オンラインヘルプでは↓な感じで説明されてます
PowerApps の Back および Navigate 関数
構文
Navigate( Screen, Transition [, UpdateContextRecord ] )
- Screen – 必須。 表示する画面
- Transition – 必須。 現在の画面と次の画面の間で使用するビジュアルの切り替え
- UpdateContextRecord – 省略可能。 1 つ以上の列の名前と、その列ごとの値を含むレコード。 このレコードは、UpdateContext 関数に渡されたときのように、新しい画面のコンテキスト変数を更新します。
第２引数には以下の切り替え用の引数を渡すことで、説明に記載の動きになりそうです
| 切り替えの引数 | 説明 |
| ScreenTransition.Cover | 新しい画面が、現在の画面を覆うようにスライドしながら表示されます。 |
| ScreenTransition.Fade | 前の画面がフェードアウトし、新しい画面が表示されます。 |
| ScreenTransition.None | 前の画面が新しい画面にすばやく置き換わります。 |
| ScreenTransition.UnCover | 前の画面がスライドしながら画面外に移動し、その下から新しい画面が現れます。 |
画面遷移をさせてみる（サンプル）
では、画面を遷移させる処理を入れてみましょう
一覧画面の一覧部各行に＞アイコンをつけて、
それをクリックすると詳細データを表示する画面に遷移するようにします
条件
- ↓のつづきで作ります
- ScrList画面に追加する次へアイコンをクリックしたとき、
ScrDisyplay画面に遷移するようにする - 以下のアイコンを追加する
コントロール コントロール名 次へアイコン IconNext
手順
- 次へアイコンを追加する
メニューの挿入からアイコン→次へをクリックする
ギャラリーコントロールの上の方をクリックして選択してからやってくださいね - 次へアイコンが表示されました～
見た目を変えましょう
詳細設定をクリックする - ↓に合わせてプロパティをかえます
データ 設定値 Tooltip “項目の詳細の表示” デザイン 設定値 X Parent.TemplateWidth – 56 Y (Parent.TemplateHeight / 2) – 20 Width 40 Height 40 - こんな感じ
- 次へアイコンに画面遷移の処理を入れます
アイコンをクリックしたときに遷移させるので、
OnSelectプロパティに次の処理を入れますNavigate(ScrDetailData, ScreenTransition.None) - こんな感じ
実行してみる
では、実行しましょう画面右上に＞ボタンがあるのでクリック
実行されました
次へアイコンをクリックしましょう
あっ。。。ｗ
画面遷移はできましたねｗ
解説
手順５で、
次へアイコンのプロパティで、
OnSelectプロパティにNavigate関数を設定しました
構文は、
Navigate( Screen, Transition [, UpdateContextRecord ] )
で、
Navigate(ScrDetailData, ScreenTransition.None)と設定したので
表示させる画面はScrDetailData画面で、
前の画面が新しい画面にすばやく置き換わる
っと、なります
OnSelectは
OnSelect – ユーザーがコントロールをタップまたはクリックした場合のアプリの反応を指定します。
なので、
次へアイコンをクリックしたとき、ScrDetailData画面にすばやく切り替わる
っとなります
次の機会に遷移後の処理を入れる説明をしますかね
