Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Mobile Apps and Reactive Web Apps

 

 

OutSystems

Aggregateを使用して非同期のデータ取得を実装する

画面の一部のみを更新するときに、データをグループに分けて読み込むことでこれを実現できる場合があります。たとえば、従業員のリストを用意し、従業員名をクリックすると詳細が読み込まれるようにする場合があります。

これはマスター-詳細パターンと呼ばれ、Fetchプロパティが異なる2つのAggregateを使用して実装することができます。最初の「マスター」Aggregateではデータをすぐに取得し、2つ目の「詳細」Aggregateでは必要なときにのみデータを取得します。「詳細」は、リクエストが行われたときにバックグラウンドで非同期的に読み込まれ、データ受信時にUIを更新します。

Preparation

マスター-詳細パターンの実装の手順と非同期でのデータ取得の仕組みについて説明する前に、アプリを準備します。

概要

従業員リストを含む画面を作成します。名前をクリックすると従業員の詳細が表示されます。従業員リストは画面の読み込み時に読み込まれますが、詳細はクリックされてから非同期的に取得されます。

以下は、実装の概要です。

  1. すべての従業員のリストを取得する

  2. 1人の従業員の詳細を取得する

  3. UIを更新するロジックを作成する

すべての従業員のリストを取得する

画面の読み込み時にすべての従業員のリストを取得するAggregateのレコードが反映される「マスター」UIを作成します。このAggregateのFetchプロパティは、「At start」に設定します。

  1. 最初に空の画面を作成し、「MasterDetailTutorial」という名前を付けます。
  2. Interface]タブのUI Flows > MainFlowで画面を右クリックし、ヘルプメニューから[Fetch data from database]を選択します。Aggregateの詳細が開きます。
  3. Aggregateの詳細が開いたら、[Data]タブをクリックし、Entities > Database > OutSystemsSampleDataDBに移動し、Sample_EmployeeエンティティをAggregateの詳細画面にドラッグします。サンプルデータがビューに反映され、Aggregateの名前が「GetEmployees」に変わります。
  4. Interface]タブに戻り、GetEmployees AggregateのFetchプロパティを「At start」に設定します。これにより、画面の読み込み時にアプリからデータベースにデータがリクエストされます。

    AggregateのFetchプロパティ

  5. [MasterDetailTutorial]画面を開き、Columns Medium Leftウィジェットをエディタにドラッグします。

  6. ListウィジェットをColumns Medium Leftウィジェットの左の列にドラッグします。Service Studioで、リストのデータソースが必要であることが示されます。ListウィジェットのプロパティでSourceプロパティを探し、[GetEmployees.List]を選択します。
  7. TagウィジェットをListウィジェットにドラッグします。この時点で、画面は以下のようになっています。

    マスター詳細のすべての項目の読み込み

    プロパティでタグのスタイルを調整できます。

    Tagウィジェットのプロパティ

  8. ExpressionウィジェットをTagウィジェットにドラッグします。Expression Valueエディタが開きます。「GetEmployees.List.Current.Sample_Employee.FirstName + " " + GetEmployees.List.Current.Sample_Employee.LastName」と入力し、[Done]をクリックします。従業員の氏名がタグに表示されます。アプリを実行すると、従業員のリストを含む画面が表示されます。

1人の従業員の詳細を取得する

次に、クリックされてからデータを読み込んで表示する「詳細」のUIを作成します。このAggregateのFetchプロパティを「Only on demand」に設定します。さらに、このAggregateにレコードのIDのフィルタを設定し、1つのレコードのみが取得されるようにします。これにより、ユーザーインターフェイスが非常にレスポンシブになります。

  1. 画面の同じSample_Employeeエンティティに新しいAggregateを追加します。Aggregateに「GetEmployeeDetails」という名前を付けます。
  2. 引き続きAggregateの詳細ペインで、GetEmployeeDetails Aggregateに以下の条件のフィルタを追加します:。Sample_Employee.Id = GetEmployees.List.Current.Sample_Employee.Id。これにより、従業員リスト内の選択に一致する1つのレコードのみがAggregateで返されるようにします。

    1つのレコードのみが返されるようにするフィルタ

  3. GetEmployeeDetails AggregateのFetchプロパティを「Only on demand」に設定します。この設定により、リクエストが行われたときにのみAggregateによるデータベースへのクエリが実行されます。

  4. [MasterDetailTutorial]画面を開き、IfウィジェットをColumns Medium LeftウィジェットのColumn2にドラッグします。IfウィジェットのConditionプロパティに、「GetEmployeeDetails.List.Empty」と入力します。これにより、従業員の名前がクリックされたかどうかを評価します。
  5. IfウィジェットのTrueブランチを選択し、「Select an employee to see the details.」と入力します。これが、従業員名が選択されていないときの画面のこの部分の空の状態になります。
  6. GetEmployeeDetails AggregateをIfウィジェットのFalseブランチにドラッグします。これにより、従業員の詳細と画像を含むインターフェイスが「スキャフォールディング」により作成されます。この時点で、画面にはUIの各部を更新する2つのAggregateが含まれています。スクリーンショットには、Aggregateによって画面の各部のデータがどのように取得されるかを示す追加のオーバーレイが含まれています。

    マスター詳細のすべての項目の読み込み

  7. アプリをパブリッシュします。アプリをブラウザで開くと、「Select an employee to see the details.」というメッセージが表示されます。次のセクションで、UIを非同期的に更新するロジックを実装します。

このセクションで説明されているエンティティからのスキャフォールディングは、手順に従ってAggregateにフィルタを追加した後にのみ機能します。

UIを更新するロジックを作成する

データを読み込む「詳細」のUIは、リクエストが行われたときにのみトリガーされる必要があります。この例では、リストで名前をクリックするとアプリにデータが読み込まれます。アプリのアーキテクチャにより、バインドされているデータが変更されると自動的にUIが更新されます。

  1. Tag内のExpressionを選択します。プロパティの[Events]セクションのEventsリストで、[onclick]を選択します。Handlerリストで[New Client Action]を選択します。OnClickクライアントアクションの編集画面が開きます。

    非同期読み込みをトリガーするイベントの追加

  2. Assignノードをフローにドラッグします。Variableプロパティに「GetEmployeeDetails.List.Current.Sample_Employee.Id」と入力し、Valueに「GetEmployees.List.Current.Sample_Employee.Id」と入力します。これにより、リストで選択された従業員をアプリが知ることができます。

  3. Refresh DataをAssignの下のフローにドロップします。[Select Data Source]ダイアログが表示されたら、[GetEmployeeDetails]を選択します。これにより、データが使用されているUIが更新されます。

    AssignとRefresh Dataを含むフロー

  4. アプリをパブリッシュし、従業員名をクリックします。画面の右上に詳細が読み込まれるのが見えるはずです。

画面テンプレートの例

動作例を参照するため、マスター-詳細パターン関連の構築を行ういずれかの画面テンプレートから画面を作成することもできます。

Screen Templateダイアログのマスター-詳細パターン

作成した画面で、AggregateのFetchプロパティと関連ロジックを確認します。

Service Studioのマスター-詳細パターン