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:
//JavaScript
$actions.RefreshFileType1();
$actions.RefreshFileType2();
$actions.RefreshFileType3();
This ensures that all three actions are called simultaneously, executing the refresh for each aggregate in parallel.
Step 4: Test the Implementation
Once your setup is complete, test the functionality. First, try refreshing the aggregates sequentially to observe how they load one after the other. Then, trigger the button that refreshes the aggregates in parallel using the JavaScript node. You’ll notice that all three dropdowns populate at the same time, significantly speeding up the process.
Performance Gains
This technique not only improves user experience by reducing wait times but also enhances performance on the developer side. In the developer console, you can clearly see the difference between sequential and parallel refreshes. In the default setup, the console shows each aggregate being processed one after the other. But with the parallel approach, all aggregates are processed simultaneously, significantly improving efficiency.
Refreshing aggregates or DataActions in parallel is a simple yet powerful way to improve performance in OutSystems applications. By using client actions and a JavaScript node, you can refresh multiple data sources at the same time, reducing wait times and enhancing the overall user experience.
Want to learn more valuable Dev Tips? Sign up for our newsletter and stay updated with the latest insights! Also, don’t forget to check out our upcoming OutSystems courses to scale your career.
