In OutSystems, efficiently fetching data from multiple aggregates or DataActions is key to delivering a smooth user experience. By default, aggregates are refreshed sequentially, which can slow down performance when working with multiple data sources. But did you know you can refresh your aggregates or DataActions in parallel using JavaScript? In today’s dev tip, OutSystems Developer Charles Visita walks us through how to implement this solution for faster and more efficient data loading in your application.
The Problem: Sequential Data Fetching
Imagine a screen with three dropdowns, each powered by a separate aggregate. By default, when you refresh these aggregates, they load one after the other. While this works, it can result in a slight performance lag, especially when your application is dealing with a lot of data. Each dropdown refreshes individually, leading to longer wait times and potential delays in rendering the entire UI.
The Solution: Refreshing Aggregates in Parallel
To address this, Charles introduces a technique where you can refresh multiple aggregates in parallel, speeding up the entire process and improving the user experience. The key is to leverage client actions and JavaScript to execute the refresh actions simultaneously.
Step-by-Step Guide to Implementing Parallel Refreshes
Step 1: Set Up Your Aggregates
In this example, we have three aggregates, each powering a dropdown menu. These aggregates are set to “on demand,” meaning they will only load data when explicitly refreshed by the user.
Step 2: Create Separate Client Actions
To execute the refreshes in parallel, you’ll need to create a separate client action for each aggregate. Instead of refreshing all aggregates within a single action, break them up into individual actions:
- Create three separate client actions: RefreshFileType1, RefreshFileType2, and RefreshFileType3.
Step 3: Use a JavaScript Node
Next, create a new client action for the button that will trigger the parallel refresh. Inside this action, add a JavaScript node. The purpose of this JavaScript node is to call each of the client actions for the three aggregates.
Here’s what the code might look like inside your JavaScript node:
