[英]SAPUI5: How to show a loading dialog box while pushing data to OData Service?
我在不追求任何模板方法的情况下构建新的SAPUI5应用程序。 我正在构建的只是一个带有两个字段和一个按钮的小表格。 AHHhh ...“按钮”。
那按钮呢? 该按钮具有以下代码:
<Button text="OK" width="100%" id="__button1" press="insertIntoOData"/>
function is called. 这样,我希望当我按下按钮时,将函数。 你猜怎么着!? 它是!
太棒了!
I want it to show a dialog (which is built with a fragment - check this link ) while the OData model handles the insertion of a record. 但是问题是,在OData模型处理记录的插入时,我希望在中显示一个对话框(由片段构建-检查此链接 )。 不幸的是,我没有设法显示该对话框。 function is called synchronously, and won't show the dialog until the function is done. 看起来函数是被同步调用的,直到该函数完成后才显示对话框。
, the navigation is redirected to the master (main) page. 当OData Model完成插入操作时,将处理响应,并且仅显示一会儿对话框,因为您可能会在以下代码中 ,导航被重定向到母版(主)页面。
insertIntoOData: function(evt) {
/*
* to prevent namespace issues, reserve 'this' into 'that',
* so the ajax will know who to call inside its scope
*/
var that = this;
//declare the dialog
if (!that._dialog) {
that._dialog = sap.ui.xmlfragment("valac.view.requestloading", null);
that.getView().addDependent(that._dialog);
}
// open dialog
jQuery.sap.syncStyleClass("sapUiSizeCompact", that.getView(), that._dialog);
that._dialog.open();
// get the csrf token from the service url
var csrfToken = this.getCSRFToken("/valacDestination/sap/c4c/odata/v1/c4codata/ValacObjectCollection");
// get the values from the 'form'
var name_var = this.byId("tSubjectInput").getValue();
var description_var = this.byId("tDescriptionArea").getValue();
// create the entry that will be sent with the request
var oEntry = {};
// the description list
oEntry.requestDescription = [];
// the description item that goes inside the list
var entryOfRequestDescription = {};
entryOfRequestDescription.Text = description_var;
oEntry.requestDescription.push(entryOfRequestDescription);
// name is a complex object that needs to be built. Content and language.
oEntry.Name = {};
oEntry.Name.content = name_var;
oEntry.Name.languageCode = "EN";
// fetch the model schema
var oModel = new sap.ui.model.odata.ODataModel("/valacDestination/sap/c4c/odata/v1/c4codata/");
sap.ui.getCore().setModel(oModel);
/* create the entry into the model schema via ajax
* return to the master page if there's a success response
* put a message on the master page.
*/
oModel.create('/ValacObjectCollection', oEntry, null, function(response){
that._dialog.close();
sap.ui.core.UIComponent.getRouterFor(that).navTo("master");
sap.m.MessageToast.show("Object Persisted!", {
duration: 30000000
});
},function(){
that._dialog.close();
sap.m.MessageToast.show("ERROR!", {
duration: 30000000
});
});
}
ends or calls the function? 我的问题是: 如何在结束或调用函数之前显示对话框?
当您输入insertIntoOData方法时。 致电服务之前
that._dialog.setBusy(true);
获得服务响应后(成功或错误无关紧要)设置为
that._dialog.setBusy(false);
您可以执行全局繁忙指示器或组件繁忙指示器,在oModel.create
之前oModel.create
并隐藏到成功或错误函数中:
sap.ui.core.BusyIndicator.show(0); <- Parameter is delay time.
sap.ui.core.BusyIndicator.hide(); <- hide
链接文档: https : //sapui5.hana.ondemand.com/1.44.18/explored.html#/sample/sap.ui.core.sample.BusyIndicator/preview
仅对话框显示繁忙。
that._dialog.setBusy(true); <- Show
that._dialog.setBusy(false); <- hide
我设法显示了busyIndicator。 我重建了insertIntoOData函数,如下所示:
insertServiceRequestIntoOData: function(evt) {
var that = this;
var token = null;
var serviceUrl = "URL";
var name_var = this.byId("tSubjectInput").getValue();
var description_var = this.byId("tDescriptionArea").getValue();
var oEntry = {};
/*
* oEntry building process omitted
*/
this.oModel = new sap.ui.model.odata.ODataModel(serviceUrl);
sap.ui.getCore().setModel(this.oModel);
/*
* This is where the magic happens:
* 1) ajax async request to get the token and to show the busy indicator on the screen
* 2) when it's over, make a post to the oData service with the data.
* 3) when it's over, hide the busy indicator and go to the correct page (success or error).
*/
$.ajax({
url: serviceUrl + "/MyCollection";
type: "GET",
async: true,
beforeSend: function(xhr) {
sap.ui.core.BusyIndicator.show(0);
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
complete: function(xhr) {
token = xhr.getResponseHeader("X-CSRF-Token");
// begin of odata send
that.oModel.create("/MyCollection", oEntry, null, function(response){
sap.ui.core.BusyIndicator.hide();
sap.ui.core.UIComponent.getRouterFor(that).navTo("insertConfirmation");
that.clearInputs();
},function(){
sap.ui.core.BusyIndicator.hide();
sap.ui.core.UIComponent.getRouterFor(that).navTo("insertErrorConfirmation");
that.clearInputs();
});
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.