Busy Dialog not working while POST operation…..SAP UI5

Hi Readers!!!!

Happy New Year to all.

Problem Statement

Here I am going to write about one common problem I had faced. While data retrieving from SAP or data pushing to SAP bit time interval is required to perform the operation, for better user experience we use busy dialog or busy indicator to make understand the user that the page is loading. But sometimes, after writing a proper code also busy dialog will not appear on the screen. You might seen it’s working in debugger mode.

Generally Used code for data Posting to SAP

var sServiceUrl   = "URL";
var oModel         = new sap.ui.model.odata.ODataModel({serviceUrl: sServiceUrl});
var oBusyDialog = new sap.m.BusyDialog();
oBusyDialog.open();
oModel.create("/entitySet","POST",payload, null,
 function(oData, oResponse) { 
    oBusyDialog.close();
      //Success Call
  },
 
 function(oError) {
     oBusyDialog.close();
       //Error Call
  });

But after writing this code also you will unable to see busy dialog on your screen. In debug mode it will be visible.

Solution

To resolve this issue we have two different approaches.

1. Use V2 OData Model

By using  V2 OData model we can resolve this issue.

var sServiceUrl = "URL";
var busyIndicator = sap.ui.core.BusyIndicator;
  $(function(){
                          var oModel = new sap.ui.model.odata.v2.ODataModel({serviceUrl: sServiceUrl});
                          oModel.setSizeLimit(20);
                          oModel.attachRequestFailed(function(evt) {
                             var oJsonModel = new sap.ui.model.json.JSONModel(Device);
                             oJsonModel.setDefaultBindingMode("OneWay");
                             oJsonModel.setData([]);
                             oThat.setModel(oJsonModel,"userlistModel");
                          });
                         // BusyDialog
                            oModel.attachRequestSent(function(){
                               busyIndicator.show(0);
                            });
                           oModel.attachRequestCompleted(function(){
                             busyIndicator.hide();
                           });
                          oModel.callFunction("/entitySet","POST",payLoad, null,
                               function(oData, oResponse) {
                                     //Success Call    
                               },
                             function(oError) {
                                     //Error Call
                               });
                        });
        

2. Use Ajax Call

var sServiceUrl = "URL";
var oModel1 = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
var oBusyDialog_Global = new sap.m.BusyDialog();
oBusyDialog_Global.open();
OData.request( {
                           requestUri :  sServiceUrl,
                           method      : "GET",
                          headers      : {
                             "X-Requested-With"   : "XMLHttpRequest",
                             "Content-Type"           : "application/atom+xml",
                             "DataServiceVersion" : "2.0",
                             "X-CSRF-Token"        : "Fetch",
                         }
                     },
                     function(data, response) {
                         var header_xcsrf_token = response.headers['x-csrf-token'];
                         var oHeaders = {
                             "x-csrf-token" : header_xcsrf_token,
                             'Accept'          : 'application/json',
                         };
                         OData.request(
                                         {
                                             requestUri : sServiceUrl+"/entitySet",
                                             method : "POST",
                                             headers : oHeaders,
                                             data : payLoad
                                         },
                                         function(oData,oResponse) {
                                            oBusyDialog_Global.close();
                                            //Success Call
                                          },
                                        function(err) {
                                          //Error Call 
                    	                  oBusyDialog_Global.close();
                                          sap.m.MessageToast.show("Error in Get -- Request "+ request +"Response" + response);
                         });

Thanks & Regards,

Rahul Patra

SAP-Fiori Consultant