How to show a loading indicator in OutSystems when fetching data from the server?

Displaying a Loading Indicator in OutSystems while Fetching Data from the Server

In web and mobile applications, it's crucial to provide users with visual feedback while data is being fetched from the server. OutSystems, being a powerful low-code platform, offers various means to achieve this. This guide explains how to implement a loading indicator in your OutSystems app to inform users that data fetch operations are ongoing.

Prerequisites

• An active OutSystems environment with access to Service Studio.
• Basic understanding of the OutSystems platform, including modules, screens, and actions.
• A working application where you have a list or detail screen that fetches data from the server.

Understanding Loading Indicators in OutSystems

• Loading indicators, also known as progress indicators or spinners, are UI elements that notify users of ongoing background operations.
• In OutSystems, these can be implemented using various components, including built-in widgets and custom CSS.

Implementing a Loading Indicator Using OutSystems Widgets

Step 1: Prepare Your Screen

• Open Service Studio and navigate to the screen where you want to show a loading indicator.
• Ensure that the screen has an aggregate or a data action to fetch data from the server.

Step 2: Add a Loading Indicator

• Drag a "Container" widget onto your screen, which will host the loading indicator.
• Set the "Style" property of the container to something like "loading-indicator" for CSS styling purposes.
• Inside this container, place an "Icon" widget and set its type to a spinner or any other indicative icon that represents loading.
• Optionally, you can use a "Progress Bar" widget if a spinning icon doesn't suit your needs.

Step 3: Handle Loading State

• Define a local variable, say isLoading, of type Boolean to control the visibility of the loading indicator.
• Set the default value of isLoading to False.

Step 4: Control the Indicator with Logic

• Go to the screen's Fetch action flow, where data is being retrieved.
• Before initiating the data fetch step (aggregate or data action), set isLoading = True to display the indicator.
• After completing the data fetch operation, set isLoading = False to hide the loading indicator.
• In the "Container" widget, set its "Display" property to Expression and use isLoading as the expression value.

Customizing the Loading Indicator with CSS

• Open the "Interface" tab in Service Studio, navigate to "Theme," and then to the CSS tab.
• Add custom CSS to style your loading indicator container and icon. Example:

.loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.loading-indicator .icon {
  font-size: 24px;
  color: #0077ff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

• Make sure these styles match the classes you have given to your container and icon in the screen building step.

Testing the Loading Indicator

• Preview your screen in the OutSystems web or mobile app preview.
• Simulate slow network conditions if possible, to clearly see the loading indicator in action.
• Verify that the loading indicator appears upon initiating data fetch and disappears once the data is fully loaded and displayed.

By following these steps, you will successfully integrate a loading indicator into your OutSystems application, enhancing user experience by providing them with feedback during operations that require waiting. This not only improves the app's usability but also ensures user satisfaction by reducing uncertainty during data fetches.