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.
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
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
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.
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
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