Efficient loading screen while sending data with oData WebServices

[Former Member]

Hi,

I have a few forms in my ui5 application and then I have a few buttons which do actions with my forms.

I would like to know an efficient way to display a loading or buffering screen or something of that sort so that when

the user presses a button which sends the form data using webservices and it takes a few seconds then I want to avoid a

situation where the user can press the buttons again and create chaos.

I'm thinking about a loading screen which is displayed while the data is being sent and the application it self is either greyed out or "unclickable".

Hopefully someone can give suggestions on how to make it happen without disabling all the 100 different fields across 10 forms

Thanks in advance to all contributors!

[Former Member]

Can anyone post a working code where the busyDialog or busyIndicator workes with oDataModel.create() method?

[santhu_gowdaz]

Refer- Busy Indicator is not working with OData Model | SCN

[Former Member]

If you are referring to the last post where a file busyUtil.js is created then I am not really sure where about that exactelly. Is the busyUtil.js a controller or a view? and the code of _busyIndicator seems to be badly structured or some part is missing and I can't understand whether _busyIndicator is a constructor or a function. If i just use the code provided in the post then I get an error and cant use it in my application.

[Former Member]

I've added a busy indicator in my application by using the following:

var sLocale = sap.ui.getCore().getConfiguration().getLanguage();

  var oBundle = jQuery.sap.resources({url : "i18n/messageBundle.properties", locale: sLocale});

  var busyDialog = new sap.m.BusyDialog('busy',{text: oBundle.getText("BusyText"), title: oBundle.getText("BusyTitle")});

  oModel.attachRequestSent(function(){busyDialog.open();});

  oModel.attachRequestCompleted(function(){jQuery.sap.delayedCall(1000, this, function () {

      busyDialog.close();

    });});

oModel is my oDatamodel.

I hope this helps you.

[Former Member]

Thanks, but unfortunately it seems i never enter the requestsent and requestcompleted methods.

Tried doing this before the create method:

oModel.attachRequestSent(function() {
     console.log("RequestSent");
  });
  oModel.attachRequestCompleted(function() {
       jQuery.sap.delayedCall(1000, this, function() {
          console.log("RequestCompleted");
       });
  });

And nothing happened.

[antonette_oberholster]

Maybe you should try something simple for now, with out the attachRequests:

saveFormData: function(formAction) { 

var oMainDetails = this.getMainDetails(); 

var oDataSet = this.getFormData(); 

var sServiceUrl = "" + sap.ui.getCore().byId("idMenu").getController().serviceGetter("006"); 

var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true); 

var success = true; 

oModel.create("MainDetailsCollection", oMainDetails, null, 

     function() { 

       console.log("creating"); 

     }, 

     function() { 

       success = false; 

     } 

  );

busyDialog.close(); // because the .create will finish first before this fires

Regards

Antonette

[Former Member]

Hi German,

I forgot to add the following to my original response.

I have set the EnableBusyIndicator to true in my table like so:

oTable.setEnableBusyIndicator(true);

For me this makes it so that when data is being loaded into the table.

I hope this is of use to you.

[antonette_oberholster]

Hallo German

Take a look at the following posts:

busyIndicator, busyDialog - How to Use in simple OData calls?

Question about Busy Indicator for oData request

Hope they help

Regards

Antonette

[antonette_oberholster]

In addition, for the "grey out of the application" bit:

There is a property called "Modal" (used with popups, messages and dialogs) which is either true or false, default is false. This disables everything while the popup is open, and enables everything else again after it closes.

setModal(bModal, sModalCSSClass?): sap.ui.core.Popup

Used to specify whether the Popup should be modal. A modal popup will put some fading "block layer" over the background and prevent attempts to put the focus outside/below the popup. Setting this while the popup is open will change "block layer" immediately.

Parameters:

{boolean}	bModal	whether the Popup is of modal type
{string}	sModalCSSClass?	a CSS class (or space-separated list of classes) that should be added to the block layer

Returns:

{sap.ui.core.Popup}

this to allow method chaining

Regards

Antonette

[Former Member]

Hi, I tried doing what was suggested in

Unfortunatelly either nothing happened, or the busyindicator just made the screen darker but the golden indicator was just frozen and not moving from left to right.

Also when I tried using:

1. oModel.attachRequestSent(function(){busyDialog.open();}); 
2. oModel.attachRequestCompleted(function(){busyDialog.close();}); 

Then again, nothing happened, the events never fired.

Using it with oModel.create method just for clarification

[antonette_oberholster]

please share your code

[antonette_oberholster]

Why don't you, just for starters, show a message while the service is running, just to make sure your events fire correnctly? You can use the modal property to disable the app during that time

regards

Antonette

[Former Member]

The busy dialog or indicator should start after i press a button, here is the code:

var oSave = new sap.m.Button("save", {
  text: "Save",
  press: oController.save
});

In the controller.save method:

save: function() {
  busyDialog = new sap.m.BusyDialog("busyDialog", {
  text: "test",
  title: "Loading"
  });
  console.log("opening");
  busyDialog.open();
  thisController.saveFormData("salvestatud");
},

The saveFormData method:

saveFormData: function(formAction) {
  var oMainDetails = this.getMainDetails();
  var oDataSet = this.getFormData();
  var sServiceUrl = "" + sap.ui.getCore().byId("idMenu").getController().serviceGetter("006");
  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
  var success = true;


  oModel.attachRequestSent(function() {
  console.log("request sent!");
  // busyDialog.open();
  });
  oModel.attachRequestCompleted(function() {
  console.log("request completed");
  // busyDialog.close();
  });
  oModel.create("MainDetailsCollection", oMainDetails, null,
  function() {
  console.log("closing");
  busyDialog.close();
  },
  function() {
  success = false;
  }
  );


},

Neither the console statements in attachRequestSent/attachRequestCompleted or the busyDialog.open() work. The whole screen just freezes for that period.

[antonette_oberholster]

Hallo German

Take a look at the API doc for create:

create(sPath, oData, mParameters?): object

Trigger a POST request to the odata service that was specified in the model constructor. Please note that deep creates are not supported and may not work.

Parameters:

{string}	sPath	A string containing the path to the collection where an entry should be created. The path is concatenated to the sServiceUrl which was specified in the model constructor.
{object}	oData	data of the entry that should be created.
{map}	mParameters?	Optional parameter map containing any of the following properties:
{object}	mParameters.context?	If specified the sPath has to be relative to the path given with the context.
{function}	mParameters.success?	a callback function which is called when the data has been successfully retrieved. The handler can have the following parameters: oData and response.
{function}	mParameters.error?	a callback function which is called when the request failed. The handler can have the parameter oError which contains additional error information.
{boolean}	mParameters.async?, Default: false	Whether the request should be done asynchronously. Default: false Please be advised that this feature is officially unsupported as using asynchronous requests can lead to data inconsistencies if the application does not make sure that the request was completed before continuing to work with the data.
{map}	mParameters.urlParameters?	A map containing the parameters that will be passed as query strings

Returns:

{object}

an object which has an abort function to abort the current request.

You need to pass the async parameter (set to false) in your oModel.create. This will make your app wait untill the service has finished before your console.log("closing") fires. Have you noticed that closing is instant?

Just give it a try and let me know

Regards

Antonette

Message was edited by: Antonette Oberholster

[antonette_oberholster]

mmm, I see it is default false you you don't have to set it . . . .

[Former Member]

i added a busyDialog.open() statement before create method and busyDialog.close() after the create method. This way only the close method gets fired and if I remove the close() statement then the open() statement works fine only after the create() method has finished running...halp:D

[santhu_gowdaz]

you need to declare busydialog inside the SaveFormData method.

saveFormData: function(formAction) { 

1.   var oMainDetails = this.getMainDetails(); 
2.   var oDataSet = this.getFormData(); 
3.   var sServiceUrl = "" + sap.ui.getCore().byId("idMenu").getController().serviceGetter("006"); 
4.   var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true); 
5.   var success = true; 
6.   oModel.attachRequestSent(function() { 
7.   console.log("request sent!"); 
9.   busyDialog = new sap.m.BusyDialog("busyDialog", { 
10.   text: "test", 
11.   title: "Loading" 
12.   }); 
13.   console.log("opening"); 
14.   busyDialog.open(); 
16.   }); 
17.   oModel.attachRequestCompleted(function() { 
18.   console.log("request completed"); 
19.   // busyDialog.close(); 
20.   }); 
21.   oModel.create("MainDetailsCollection", oMainDetails, null, 
22.   function() { 
23.   console.log("closing"); 
24.   busyDialog.close(); 
25.   }, 
26.   function() { 
27.   success = false; 
28.   } 
29.   ); 
30. }, 

[Former Member]

Did it the same way you proposed and nothing changed unfortunately.