Office PowerApps

PowerAppsTips~詳細データ画面への遷移 Navigate関数~

投稿日:2017/05/26 更新日:

PowerAppsTips~データの並び替え③ If関数~

さて、↑までで一覧画面らしいものができました

 

↓でデータを1件表示しようとしていました

PowerAppsTIPS~データの1件表示~

 

では、これらを組み合わせて

一覧画面のデータを1件選択して、

そのデータの詳細なデータを表示する画面に遷移する処理を入れてみましょう

Navigate 関数

指定した画面へ遷移するときは、

Navigate関数を使います

 

オンラインヘルプでは↓な感じで説明されてます

PowerApps の Back および Navigate 関数

構文

Navigate( Screen, Transition [, UpdateContextRecord ] )

  • Screen – 必須。 表示する画面
  • Transition – 必須。 現在の画面と次の画面の間で使用するビジュアルの切り替え
  • UpdateContextRecord – 省略可能。 1 つ以上の列の名前と、その列ごとの値を含むレコード。 このレコードは、UpdateContext 関数に渡されたときのように、新しい画面のコンテキスト変数を更新します。

第2引数には以下の切り替え用の引数を渡すことで、説明に記載の動きになりそうです

切り替えの引数 説明
ScreenTransition.Cover 新しい画面が、現在の画面を覆うようにスライドしながら表示されます。
ScreenTransition.Fade 前の画面がフェードアウトし、新しい画面が表示されます。
ScreenTransition.None 前の画面が新しい画面にすばやく置き換わります。
ScreenTransition.UnCover 前の画面がスライドしながら画面外に移動し、その下から新しい画面が現れます。

画面遷移をさせてみる(サンプル)

では、画面を遷移させる処理を入れてみましょう

一覧画面の一覧部各行に>アイコンをつけて、

それをクリックすると詳細データを表示する画面に遷移するようにします

条件

  • ↓のつづきで作ります
  • ScrList画面に追加する次へアイコンをクリックしたとき、
    ScrDisyplay画面に遷移するようにする
  • 以下のアイコンを追加する
    コントロール コントロール名
    次へアイコン IconNext

手順

  1. 次へアイコンを追加する
    メニューの挿入からアイコン→次へをクリックする

    ギャラリーコントロールの上の方をクリックして選択してからやってくださいね
  2. 次へアイコンが表示されました~

    見た目を変えましょう
    詳細設定をクリックする
  3. ↓に合わせてプロパティをかえます
    データ 設定値
    Tooltip “項目の詳細の表示”
    デザイン 設定値
    X Parent.TemplateWidth – 56
    Y (Parent.TemplateHeight / 2) – 20
    Width 40
    Height 40
  4. こんな感じ
  5. 次へアイコンに画面遷移の処理を入れます
    アイコンをクリックしたときに遷移させるので、
    OnSelectプロパティに次の処理を入れます

    Navigate(ScrDetailData, ScreenTransition.None)
  6. こんな感じ

実行してみる

では、実行しましょう画面右上に>ボタンがあるのでクリック

実行されました

次へアイコンをクリックしましょう

あっ。。。w

画面遷移はできましたねw

解説

手順5で、

次へアイコンのプロパティで、

OnSelectプロパティにNavigate関数を設定しました

構文は、

Navigate( Screen, Transition [, UpdateContextRecord ] )

で、

Navigate(ScrDetailData, ScreenTransition.None)と設定したので

表示させる画面はScrDetailData画面で、

前の画面が新しい画面にすばやく置き換わる

っと、なります

 

OnSelectは

OnSelect – ユーザーがコントロールをタップまたはクリックした場合のアプリの反応を指定します。

なので、

次へアイコンをクリックしたとき、ScrDetailData画面にすばやく切り替わる

っとなります

 

 

次の機会に遷移後の処理を入れる説明をしますかね

336px アドセンス

336px アドセンス

-Office, PowerApps
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

PowerAppsTIPS~表示画面と編集画面のきほん~

ExcelのデータからPowerAppsでアプリを自動作成 ↑でExcelファイルのテーブルのデータより、PowerAppsアプリを自動で作成しました そしたら、以下の3画面ができました データ一覧表 …

PowerAppsTips~データのソート SortByColumns関数~

さて表示されたデータ、並び順を任意のカラムにしたいですよね っていうことで、ソートを入れてみましょう SortByColumns関数 一覧データをソートするにはSortByColumns関数を使います …

SharePoint Designerをつかってみる

Office365のSharePointサイトで、リストを作ってみたのですが   意外とリストの列作ったりするのがめんどくさい   SharePoint Designer Offi …

PowerAppsTips~データの並び替え① PowerAppsの変数~

データの並び替えをしましょう ExcelのデータからPowerAppsでアプリを自動作成 ↑でできたアプリを解析してみました   「↓↑」アイコンをクリックすることで、 それをきっかけとして …

ExcelのデータからPowerAppsでアプリを自動作成

さてさて、ExcelのデータからもPowerAppsアプリを作成できます とはいえ手順というか下準備が必要なんですよ それらふくめてご案内 PowerAppsで読み込めるExcelファイル まずは下準 …

いちおうソフト屋さんやってます
だめリーマンをつづけて10年過ぎました

お笑いと二次元とアイドル界隈の住人です
クルマやお料理なんかもいけるんやで

それではゆるゆるふわふわいきませう