Busy Dialog in Worklist App pattern

[former_member214868]

Hello,

I am working on a Worklist pattern based application based on the template from the SAP Web IDE.

We are on SAP UI5 1.28 and i am not using the json file based metadata definition and all and just using the Component.js to define Routes, Models etc.,

I have a requirement where i need to display the busy dialog upon calling a OData Service's create method.

I have Instantiated the model and set the busy dialog to show and close based on the requestSent and requestCompleted methods as shown below.

	var oModel = new ODataModel(sServiceUrl, {
				json: true,
				loadMetadataAsync: true
			});

			// Added for Busy Dialog
			var busyDialog = new sap.m.BusyDialog();
			oModel.attachRequestSent(function(){busyDialog.open();});
			oModel.attachRequestCompleted(function(){busyDialog.close();});

this.setModel(oModel);

Worklist.controller.js code

I have a oModel,create method to call the deep entity and it is not showing the busy dialog when the Model is trying to call the back end and waiting for response.

if (payload) {

  this.getOwnerComponent().getModel().create("/ABCSet", payload, null, function onSuccess(oData, response) {

}, function onError(oData, response) {

});

How i can show the busy dialog during the OData call and before the response is returned.

Appreciate your support.

Thanks,

[former_member227918]

Hi Urmila,

it is not working for only one function where you are triggering create operation or it is not working at all ? share more info on it

bcz your code is right and it should work.

Another way:

well, i think you can change approach to implement busy dialog, because this might cause a bad use experience,

lets say in one page you are using 4-5 entity to populate data, then in this case busy dialog will be in flip/flop behavior like open/close-open/close-open/close.......till number of request on a page, rather user should see one busy dialog only till whole page get loaded.

you can implement also as below:

1) Create two functions in component file i.e showBusyDialog and closeBusyDialog

2) In showBusyDialog  function :

     if (!this._oBusyDialog) {

       this._oBusyDialog = new sap.m.BusyDialog();

       this._oBusyDialog.open();

     }

3) In closeBusyDialog function:

     if (this._oBusyDialog) {

       this._oBusyDialog.close();

       this._oBusyDialog = null;

     }

4) call showBusyDialog  and closeBusyDialog function while triggering service, as below

on init :

this._oComponent = this.getOwnerComponent();

// trigger service

this._oComponent.showBusyDialog()

this.getOwnerComponent().getModel().create("/ABCSet", payload, null, jQuery.proxy(this.onSuccess, this),jQuery.proxy(this.onError, this));

onSuccess:function(oData, response) {

//do stuff

this._oComponent.closeBusyDialog();

},

onError:function(oData, response) {

//do stuff

this._oComponent.closeBusyDialog();

}

Regards,

Akhilesh

[former_member214868]

Hello Akhilesh,

I have tried the code using the same way you have mentioned and still i am unable to see the busy dialog opened in the UI.

For your initial question, the busy dialog .open and close statements were executed as required, but unable to show the busy dialog user interface in any of the methods and the response is received from odata in 2-3 seconds.

I have used the code as you given and it is executing the open dialog and close dialog statements, but unable to start showing. (May be due to the fact that the response returns in 2-3 seconds).

I have used the views local model as shown below and it looks to show the busy indicator with hyperlink hand icon based on the true/false properties set as shown below.

that.getModel("worklistView").setProperty("/busy", false);

I have implemented the code as you mentioned and is there a way to show the busy dialog for 3 seconds by setting time out etc., .

this._oComponent.showBusyDialog();

this.getOwnerComponent().getModel().create("/ABCSet", payload, null, jQuery.proxy(this.onSuccess, this),jQuery.proxy(this.onError, this));

onSuccess:function(oData, response) {

this._oComponent.closeBusyDialog();

},

onError:function(oData, response) {

this._oComponent.closeBusyDialog();

}

If i comment out the above  this._oComponent.closeBusyDialog();  then , the Busy Dialog is keep on getting dislayed as there is no close other wise i am unable to see the dialog's open and close actions in the UI eventhough the statements are getting executed.

Appreciate your suggestion.

Thanks,

[former_member227918]

Hi Urmila,

yes, due to quick response only.

and we dont have control over time, there is another way also to implement busy dialog with settimeout function but that is not recommended and that is workaround only not a proper solution and you should not implement that.

I think everything is fine and should be acceptable, but you can give a try as to create a separate function as below:

onSave:function(){

this._oComponent.showBusyDialog();

this.triggeService();

}

triggeService: function(){

// trigger create service.....

}

I am not sure this will help or not, just a trial:)

-Akhilesh

[former_member227918]

if you want you can try this also,

instead of

this._oComponent.closeBusyDialog();

use

setTimeout(this._oComponent.closeBusyDialog();, 3000); //it will delay 3 second to close dialog

-Akhilesh

[former_member214868]

Hi Akhilesh,

This was very much helpful. I will try out with a time out workaround for this issue.

Thanks,