Skip to main content

 

Developing an Application

 

Applies only to Mobile Apps and Reactive Web Apps
OutSystems

Implement asynchronous data fetching using Aggregates

There are use cases when you want to load data in chunks that are only needed for a part of the screen. For example, you may have a list with employees where clicking an employee name loads the details.

This pattern is often used in the master-detail UI pattern, and you can implement it by using two Aggregates with different Fetch properties, where the first "master" Aggregate fetches data on start, and the second "detail" Aggregate only when needed.

Implementation

Here is an overview of how you can implement synchronous fetching yourself, with Aggregates AggMaster and AggDetails in a master-detail pattern. The AggDetails fetches data asynchronously, only when the data is requested by the user interaction.

  1. Add the first Aggregate that loads the items list and set the Fetch property to At start. Name it AggMaster.
  2. Add the second Aggregate that loads the details and set the Fetch property to At demand. Name it AggDetails.
  3. Create a local variable that holds the current record, for example SelectionId and use it in the filter of AggDetails to fetch a single record.
  4. Add a widget and populate it with the items from AggMaster.
  5. Build another UI section and populate it with the values of the current AggDetails record.
  6. Create an Action that is triggered when the users click an item from the AggMaster. The Action should have an input that identifies the record. For example, the Action could be ListItemOnClick and the input SelectedItemId.
  7. Design the Action so it sets a new value of the SelectionId local variable and then refreshes AggDetails.

Example

To see a working example, create a Screen from one of the Screen Templates that are built around the master-detail pattern.

Master-Detail Pattern in Screen Template dialog

In the created Screen, check the Fetch properties of the Aggregates and related logic.

Master-Detail Pattern in Service Studio