[機能] 画面遷移と戻るボタンで使いやすい導線を作る

詳細画面の用意

一覧で選択したアイテムの詳細画面を作成します。

1. 「ツリービュー」>「＋新しい画面」を選択し、「ヘッダーとフッター」を選びます。
2. 新しくできたScreenContainerのMainContainerを選択し、キャンバスの＋マークを押下後、「入力」>「表示フォーム」を選びます。
3. 「データソースの選択」は「備品一覧サンプル」を選びます。
4. FormViewerの「ディスプレイ」>「列」は1、「レイアウト」は横にします。
5. 「フィールド」は、Title、備品、場所、購入日を残してそれ以外は削除し、順番を左記のように並び替えます。
6. FormViewerの「Height」をParent.Height、「Width」をParent.Widthにします。
7. 各DataCardの「Width」をParent.Widthにします。

画面の整理

Screenが2つになったので、それぞれ名前を付けます。

1. Screenを選択し、三点リーダーの「名前の変更」もしくはダブルクリックで名前変更します。
2. Screen1は「備品一覧」にし、Screen2は「備品詳細」にします。

画面遷移の設定

一覧画面のアイテムを選択した際に詳細画面へ移動するようにします。

1. 備品詳細のFormで、「詳細設定」>「Item」に下記を入力します。

Gallery2.Selected

2. 備品一覧のGalleyにある「NextArrow」を選択し、「詳細設定」>「OnSelect」に下記を入力します。

Navigate(備品詳細)

画面遷移テスト

1. 備品一覧画面で「ノートパソコン」を選択し、右端の「>」を押下します。
2. 備品詳細画面に遷移し、Titleから購入日までの情報が表示されることを確認します。

戻るボタン

1. 備品詳細のFooterContainerで、キャンバスの＋マークを押下後、「ボタン」を選択します。
2. Buttonの「ディスプレイ」>「テキスト」に、「戻る」を入力します。
3. 「詳細設定」>「OnSelect」に下記を入力します。

Back()

できたもの