Hello all,
I would like to implement a visual indicator to tell end users that the client is currently waiting for an answer from the server across all my applications.
My applications already uses a common theme and layout for their pages, so the solution I was considering was to add a container to that layout that shows up whenever there is a server action, controlled by a boolean variable. But that would require adding that logic to all of my applications.
I would like to ask if there is a solution that enables adding this behaviour to my applications with the least changes to the applications that are already created.
Thank you in advance for all the help.
Hi Carlos,
You don’t need to change your server actions for this. I built a small O11 Reactive test app and attached it here.
In Reactive apps, every server call goes to a URL with /screenservices/ in it. A small script watches those calls. While a call is running, it shows a thin bar at the top of the page. It waits 300 ms first, so quick calls don’t make it flash. It also hides the bar if a call fails.
Where to look in the app:
To use it, copy the script and the CSS to your shared layout module. Add the script to your layout’s Required Scripts. Then publish and republish your apps. Put the CSS on the layout, not the theme, so every app that uses the layout gets it.
You can also check these Forge components:
Mine only watches OutSystems server calls, and the bar doesn’t block the page. Use the one that suits your apps.I hope this helps.
You’re on the right track thinking at theme/layout level. In OutSystems 11 (Reactive/Traditional) there’s no built‑in “global AJAX wait” for all apps, but you can centralize the behavior enough that existing apps need only minimal changes.
Below are a few approaches, starting from “most global” to “per‑layout”.
If all your apps already consume a common UI module (for theme/layout), the cleanest approach is:
MyCompany.UI
GlobalLoader
If
IsLoading
SetGlobalLoading(IsLoading: Boolean)
RefreshData
Ajax Refresh
LayoutDefault
Then, for each application:
MyCompany.UI.LayoutDefault
Start → SetGlobalLoading(True) → <Your Server Action> → SetGlobalLoading(False) End
RunWithLoader
RunWithLoader(CallbackAction: YourServerAction)
This way, the visual and state logic is defined once; each screen only needs a couple of calls, not a full custom implementation.
IsDataFetch
If most of your server calls are done via Data Actions/Aggregates in Reactive screens:
IsAnyDataFetching
IsDataFetchExecuting
For new screens, if you standardize names or patterns of Data Actions, you can:
This still requires some wiring per screen, but avoids duplicating UI for the spinner.
For Traditional Web apps (or if you are using some custom JS already):
body
.is-loading
This is closest to the legacy Feedback_AjaxWait pattern: any AJAX request from any screen using that Theme will automatically show the loader, with zero per‑screen changes.
Feedback_AjaxWait
Note: native hooks differ between Traditional and Reactive – for Reactive you’d rely on your own client actions, not the old AJAX events.
There’s no single switch in O11 that automatically tracks all server calls across modules without any change:
So the typical “minimal changes” strategy is:
If you tell me whether your apps are mostly Reactive or Traditional, I can outline a concrete layout/block structure and a small example of the client actions needed for that specific stack.
Hallo @Carlos João Lopes Mendes
It's definitely a great idea to centralize this behavior in one place. However, from the application side, not all controls can be made common, and trying to do so may save time and effort in some cases, but it can also become complex.
A good middle-ground solution would be:
Create a common Loading control.
Add it to the main layout.
Add a Boolean input parameter to the layout, for example, IsLoading.
Set IsLoading to True when a Server Action starts.
Set IsLoading back to False when the action finishes, whether it succeeds or fail