画面をまたがるナビゲーションで状態を維持する
OutSystemsでは、アプリケーションの状態を保存し、それを複数の画面にまたがるエンドユーザーのナビゲーションの中で使用できます。たとえば、ある画面に移動する際、それ以前の状態に基づいて画面を表示します。
Webアプリケーションでは、セッションは、エンドユーザーがサーバーに対して行った最初のリクエストで作成されます。アプリケーションの状態を保存するには、セッション変数を使用します。
- モジュールの［Data］タブを開いてセッション変数を作成します。
- アクションフローで、セッション変数に保存する値を割り当てます。
- 状態データを使う必要がある場合、他の変数の場合と同じ方法でセッション変数から入手します。
モバイルアプリでは、OutSystemsが、最後に閲覧した画面の状態を保存し、エンドユーザーがその画面に戻ったとき、自動的にその状態を復元します。モバイルアプリのフロー全体にわたって画面の状態を保持するには、ローカルストレージを使用します。
ローカルストレージに画面の状態を保存するには、以下の手順を実行します。
- 保存する状態データをモデル化したローカルストレージエンティティを作成します。
- 捕捉したデータをローカルストレージに保持するロジックを定義します。
- ローカルストレージから状態データを取得し、保存された状態で画面が表示されるように画面要素を初期化します。
Webアプリの例
場所の検索、レビュー、評価ができるGoOutWeb Webアプリケーションでは、［Places］画面を使用してエンドユーザーが様々な場所を検索できます。検索基準は、画面のローカル変数SearchKeywordに保存されます。別の画面に移動すると検索基準は失われます。ただし、［Places］画面に戻るときには、その検索基準を維持するようにします。そのため、検索基準をローカル変数ではなくセッション変数に保存する必要があります。
セッション変数を作成して使用するには、以下の手順を実行します。
-
［Data］タブに移動してテキスト型のセッション変数を作成し、「Places_SearchKeyword」という名前を付けます。
-
［Places］画面で、SearchInputウィジェットを選択し、ローカル変数を作成したセッション変数に置き換えます。
-
Preparationアクションで、GetPlaces Aggregateを開き、ローカル変数ではなくセッション変数を使用するようにFilterを変更します。
Place.Name like "%" + Session.Places_SearchKeyword + "%" or Category.Label like "%" + Session.Places_SearchKeyword + "%" -
ローカル変数SearchKeywordを削除します。エラーを確認し、ローカル変数をセッション変数に置き換えます。
-
パブリッシュしてテストします。
モバイルアプリの例
GoOutモバイルアプリでは、場所の検索、レビュー、評価ができます。［Home］画面で、エンドユーザーはカテゴリに基づいて場所をフィルタリングできます。選択されたカテゴリは、Filterに保存されます。Filterは、画面上にカテゴリを表示するDropdownウィジェットに関連するローカル変数です。
OutSystemsは、最後に閲覧した画面の状態を保存して自動的に状態を復元しますが、複数の画面をまたがって移動すると［Category］ドロップダウンメニューの状態は失われます。ただし、［Home］画面に戻るときには、その状態を復元するようにします。その画面で行ったユーザーの選択を保持するには、ローカルストレージを使用します。
この例では、［Home］画面のこのフィルタの値だけを保存していますが、同じエンティティ/ロジックを使用して他の要素/画面の状態を保存できます。
そのためには、以下の手順を実行します。
-
要素の状態を保存するためのローカルエンティティを作成します。ローカルストレージに、テキスト型のアトリビュート値を持つNavStateエンティティを作成し、そのIdをテキスト型として設定します。このエンティティの各レコードには、画面要素の状態を保持するために使用できるキーと値のペアをマッピングします。
-
要素/状態を保持し、ローカルストレージから取得するには、［Logic］タブで2つのクライアントアクションを作成します。
-
SetStateが、キーと値を入力パラメータとして受け取り、その両方をNavStateレコードに保持します。そのためには、NavStateのAggregateを追加し、そのレコードのリストを取得します。Aggregateのフィルタを使用して、
NavState.Id = StateKeyパラメータであるレコードを取得し、（すでに存在する場合は）キーのレコードを更新します。そして、入力パラメータに格納されている値をAggregateのリストの現在のレコードに割り当て、CreateOrUpdateNavStateを使用してローカルストレージにレコードを保持します。 -
GetStateがキー（NavState識別子）を受け取り、そのキーの値を出力します。そのためには、そのレコードを取得するためのフィルタ条件として
NavState.Id = StateKeyを持つAggregateを追加します。そのレコードのValueアトリビュートの内容を出力パラメータに割り当てます。StateValue = GetNavStateById.List.Current.NavState.Value
-
-
画面を表示する前に、最後のユーザーの選択をドロップダウンメニューに読み込みます。［Home］画面のプロパティのイベントで、On Initializeイベントを処理する新しいクライアントアクションを作成します。このアクションで、以下の手順を実行します。
-
TextToIdentifier("Filter")式を使用してGetStateを呼び出し、NavState.Idに保存できる識別子のタイプを取得します。Filterは、ドロップダウンの選択を格納するローカル変数です。 -
Filterに、
GetStateから返された値を割り当てます。
-
-
選択されたカテゴリの場所のレコードを画面に読み込みます。Listウィジェットのソースとして使用されている画面のローカルAggregateで、フィルタ条件
LocalPlace.Category = Filter or Filter = ""を使用します。OR条件の最初の項は、［Home］画面でのユーザーの最後のインタラクションでエンドユーザーが選択したカテゴリのレコードを示します。OR条件の第2項は、Filter変数が空の場合、すべてのレコードを示します。 -
フィルタの状態（カテゴリの選択）を保持するには、Dropdown ウィジェットのOn Changeイベントを処理するクライアントアクションで、以下の手順を実行します。
-
SetStateを呼び出し、
StateValueをフィルタとして設定します。そして、StateKeyをTextToIdentifier("Filter")として設定し、キーと値のペアを保存します。 -
Refreshデータノードを使用して
GetLocalPlaces画面のAggregateをリフレッシュし、Listウィジェットのソースを調整します。
-