画面をまたがるナビゲーションで状態を維持する

Webアプリの例

場所の検索、レビュー、評価ができるGoOutWeb Webアプリケーションでは、［Places］画面を使用してエンドユーザーが様々な場所を検索できます。検索基準は、画面のローカル変数SearchKeywordに保存されます。別の画面に移動すると検索基準は失われます。ただし、［Places］画面に戻るときには、その検索基準を維持するようにします。そのため、検索基準をローカル変数ではなくセッション変数に保存する必要があります。

セッション変数を作成して使用するには、以下の手順を実行します。

1. ［Data］タブに移動してテキスト型のセッション変数を作成し、「Places_SearchKeyword」という名前を付けます。

2. ［Places］画面で、SearchInputウィジェットを選択し、ローカル変数を作成したセッション変数に置き換えます。

3. Preparationアクションで、GetPlaces Aggregateを開き、ローカル変数ではなくセッション変数を使用するようにFilterを変更します。

   Place.Name like "%" + Session.Places_SearchKeyword + "%" or Category.Label like "%" + Session.Places_SearchKeyword + "%"

4. ローカル変数SearchKeywordを削除します。エラーを確認し、ローカル変数をセッション変数に置き換えます。

5. パブリッシュしてテストします。

モバイルアプリの例

GoOutモバイルアプリでは、場所の検索、レビュー、評価ができます。［Home］画面で、エンドユーザーはカテゴリに基づいて場所をフィルタリングできます。選択されたカテゴリは、Filterに保存されます。Filterは、画面上にカテゴリを表示するDropdownウィジェットに関連するローカル変数です。

OutSystemsは、最後に閲覧した画面の状態を保存して自動的に状態を復元しますが、複数の画面をまたがって移動すると［Category］ドロップダウンメニューの状態は失われます。ただし、［Home］画面に戻るときには、その状態を復元するようにします。その画面で行ったユーザーの選択を保持するには、ローカルストレージを使用します。

この例では、［Home］画面のこのフィルタの値だけを保存していますが、同じエンティティ/ロジックを使用して他の要素/画面の状態を保存できます。

そのためには、以下の手順を実行します。

1. 要素の状態を保存するためのローカルエンティティを作成します。ローカルストレージに、テキスト型のアトリビュート値を持つNavStateエンティティを作成し、そのIdをテキスト型として設定します。このエンティティの各レコードには、画面要素の状態を保持するために使用できるキーと値のペアをマッピングします。

2. 要素/状態を保持し、ローカルストレージから取得するには、［Logic］タブで2つのクライアントアクションを作成します。

   1. SetStateが、キーと値を入力パラメータとして受け取り、その両方をNavStateレコードに保持します。そのためには、NavStateのAggregateを追加し、そのレコードのリストを取得します。Aggregateのフィルタを使用して、NavState.Id = StateKeyパラメータであるレコードを取得し、（すでに存在する場合は）キーのレコードを更新します。そして、入力パラメータに格納されている値をAggregateのリストの現在のレコードに割り当て、CreateOrUpdateNavStateを使用してローカルストレージにレコードを保持します。

   2. GetStateがキー（NavState識別子）を受け取り、そのキーの値を出力します。そのためには、そのレコードを取得するためのフィルタ条件としてNavState.Id = StateKeyを持つAggregateを追加します。そのレコードのValueアトリビュートの内容を出力パラメータに割り当てます。StateValue = GetNavStateById.List.Current.NavState.Value

3. 画面を表示する前に、最後のユーザーの選択をドロップダウンメニューに読み込みます。［Home］画面のプロパティのイベントで、On Initializeイベントを処理する新しいクライアントアクションを作成します。このアクションで、以下の手順を実行します。

   1. TextToIdentifier("Filter")式を使用してGetStateを呼び出し、NavState.Idに保存できる識別子のタイプを取得します。Filterは、ドロップダウンの選択を格納するローカル変数です。

   2. Filterに、GetStateから返された値を割り当てます。

4. 選択されたカテゴリの場所のレコードを画面に読み込みます。Listウィジェットのソースとして使用されている画面のローカルAggregateで、フィルタ条件LocalPlace.Category = Filter or Filter = ""を使用します。OR条件の最初の項は、［Home］画面でのユーザーの最後のインタラクションでエンドユーザーが選択したカテゴリのレコードを示します。OR条件の第2項は、Filter変数が空の場合、すべてのレコードを示します。

5. フィルタの状態（カテゴリの選択）を保持するには、Dropdown ウィジェットのOn Changeイベントを処理するクライアントアクションで、以下の手順を実行します。

   1. SetStateを呼び出し、StateValueをフィルタとして設定します。そして、StateKeyをTextToIdentifier("Filter")として設定し、キーと値のペアを保存します。

   2. Refreshデータノードを使用してGetLocalPlaces画面のAggregateをリフレッシュし、Listウィジェットのソースを調整します。