Technical Articles
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
HI Rahul Patra,
did you try to call async request?
Hi Kateryna,
I had tried with async == true, but still it was not working…
Thanks
Hi Rahul,
Is there any other way instead of GET call to fetch xcsrf token for POST?
Regards,
Amrit