Is there a way to add a loading symbol while the user waits for info to display?
Application Type
Reactive
Service Studio Version
11.11.0 (Build 42742)
Platform Version
11.9.1 (Build 20359)

Hi all! I have a screen in reactive where I am showing some data in a drop down. Now, the drop down takes some time to be populated and I want to add a loading sign or a spinner so that a user can know that the app is loading and it might take a few seconds. I disabled the drop down until all the data loads so that the user cannot click on it but I also want to add a widget or a pop up or something that can tell the user that the app is loading. Do we have something like that in reactive?

Thanks,
ZK.

Hey there! Yes of course, 

https://www.outsystems.com/forge/component-overview/8336/waiting-loading-react

You have an option on the aggregate to see if data is fetched, and while data is not fetched you put the spinner if data is empty, there is no spinner.

You need to do that condition.
You can check the example from the tables, if you use the scaffolding pushing an entity to the screen or the main flow, you will see a table, and that table as the loading, you can see that logic there on the widget tree too

If you have more doubts, feel free

Best regards,

Márcio 

Hey Marcio. Thanks for this. I am a bit confused exactly where to put this spinner. Where can I find the "if data is fetched" action? I am new to Outsystems so still figuring these things out. Below picture shows my drop down and here in this screen I want to show the spinner in that container until the data loads. I also added the dependency for the Waitingloadingreact to my app.

It's inside of the aggregate options.

As you can see the green isDataFetchet is a property where you can know when the data is fetched, its a boolean var, that says is fetched(true) or not fetched(false), and on the right its the logic to put the spinner.


To know how to do in your case, I need to play around and see how to put the spinner in a relative position on the container.

Can you share me your module?. I will share the module that I made to you to see by yourself the stuff that I am talking about

dropdownLoading.oml

Yes for sure. I am actually using SAP BAPIs to populate this drop down. The server action is called GetVendorInformation which is in the Homepage screen.

TollerWheatAutomation.oml

I was not able to use what you send but was able to see the screen and use some stuff

Copy what is selected, it is what you are going to use for your loading!

And if you want, you can copy the element on the screen, then you just need to change the variables to the ones you want.

Tell me if it worked or not pls

dropdownLoading.oml

Hi ZK,

Adding another soultion to the Marcio Carvalho by using the popup.

Step 1: Add the popupwidget to the screen and assign the local variable. Add the below Css to the popup

.loader{
    box-shadow: none !important;
    background-color: transparent;
}

Step2 : Create the OnInitialize action and assign the variable to true

Step3 : Create the OnAfterFetch Action for Aggregate or DataAction

Step 4 : Check whether the Data is fetched, If datafetched then make the variable to false

I have attached the URL and oml here.

Hope it helps!

Regards,

Ellakkiya.S

dropdownLoading.oml

Hi AJ,

Marcio's solution is correct and will get you through all types of data requirements.

But in one simple way, you can also use a popup spinner just by creating a Boolean local variable for handling the Popup open and close and you can pass the variable in between the client action so that it can open the spinner and close once the data is loaded or required action is done.


It will look like this in the browser


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.