How to show a loading spinner in OutSystems while retrieving data?

Displaying a Loading Spinner While Retrieving Data in OutSystems

To improve user experience while retrieving data in an OutSystems application, showing a loading spinner can be a helpful visual indicator. This guide walks you through the process using a step-by-step approach.

Prerequisites

• Access to an OutSystems environment with the necessary permissions to create or edit applications.
• Basic understanding of Client Actions and Screen lifecycle in OutSystems.
• Familiarity with OutSystems UI, especially Blocks and Widgets.

Understanding Loading Spinners in OutSystems

• Loading spinners provide visual feedback to users that a background operation is ongoing, preventing confusion and enhancing user experience.
• In OutSystems, spinners can be implemented using built-in widgets or by creating custom logic using JavaScript if necessary.

Implementing a Loading Spinner

1. Add the Spinner to Your Screen

• Open your application in Service Studio and navigate to the screen where you want to add the loading spinner.
• From the toolbox, drag and drop a UI widget for indicating a loading state. This can be a "Container" widget or the built-in "Spinner" that OutSystems provides.
• Style your spinner as needed using the Properties panel to fit it within your design framework.

2. Control Spinner Visibility

• Create a Boolean local variable (e.g., `IsLoading`) in the Data tab, which will control the spinner’s visibility on the screen.
• In the widget tree, set the Visibility property of the loading spinner to only display when `IsLoading` is true.
• You can do this by setting a condition on the widget’s Visible property: `If(IsLoading, True, False)`.

3. Implement the Logic to Toggle Spinner

• Open the "Action" flow where you retrieve data. This could be in a Screen Action or a Client Action depending on when data retrieval occurs.
• At the beginning of the data retrieval logic, set the `IsLoading` variable to True to display the spinner:

  Assign Action:
- IsLoading = True
  

• Once your data retrieval is complete, set the `IsLoading` variable back to False to hide the spinner:

  Assign Action (after data retrieval):
- IsLoading = False
  

4. Error Handling (Optional)

• Consider implementing error handling mechanisms to hide the spinner in case of errors during data retrieval. This involves handling exceptions and ensuring the `IsLoading` variable is set to False whenever an error occurs.
• This can be done using the 'Exception Handler' in your data retrieval flow to ensure the spinner is not stuck displaying indefinitely.

Testing the Spinner

• Run your application to test the spinner’s behavior during data retrieval operations.
• Ensure that the spinner is displayed at the start of data retrieval and disappears when the process is complete.
• Test various scenarios, including the occurrence of data retrieval errors, to confirm the spinner behaves as expected.

Deploying Your Application

• Once testing confirms that the loading spinner works correctly, proceed to deploy your application across the desired environments.
• Make sure to perform user acceptance testing (UAT) to validate the application’s usability in a real-world scenario.

By following these detailed steps, you can successfully display a loading spinner in your OutSystems application, enhancing user interaction by providing clear feedback during data retrieval processes. This not only improves the application's perceived performance but also increases user satisfaction.