Question

我正在构建一个新的SAPUI5应用程序而不采用任何模板方法。我正在构建的只是一个带有两个字段和一个按钮的小形式。 AHHhh ......“按钮”。

按钮怎么样？该按钮具有以下代码：

<Button text="OK" width="100%" id="__button1" press="insertIntoOData"/>

有了这个，我希望当我按下按钮时，会调用 insertIntoOData 函数。你猜怎么着！？它是！

优秀！

但问题是在 insertIntoOData 中我希望它显示一个对话框（使用片段构建 - 检查此link），而OData模型处理插入记录。不幸的是，我还没有设法让对话框显示出来。看起来像 insertIntoOData 函数是同步调用的，并且在函数完成之前不会显示对话框。

当OData模型完成处理插入时，处理响应并且对话框仅显示片刻，因为您可能会注意到以下 insertIntoOData 代码中的导航被重定向到主（主）页面。

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
        });
    });
}

我的问题是：如何在 insertIntoOData 结束或调用 oModel.create 函数之前显示对话框？

Answer 1

当您输入insertIntoOData方法时。在调用服务集之前

  that._dialog.setBusy(true);

获得服务响应（成功或错误无关紧要）后设置为

that._dialog.setBusy(false);

Answer 2

您可以执行全局忙碌指示符或组件忙指示符，在HttpClient Connection = new HttpClient(); //Connection.BaseAddress = new Uri("http://api.tradeskillmaster.com/v1/item/EU/" + Realm.Text.ToString() + "?format=json" + "&&" + "apiKey=" + apiKey.Text.ToString()); Connection.BaseAddress = new Uri("http://api.tradeskillmaster.com/v1/item/EU/ragnaros/82800? format=json&apiKey=v-dtTQX6uBDOsWDUs6SWgYUBOXvyqxRd"); HttpResponseMessage response = Connection.GetAsync("api/emp").Result; //var emp = response.Content.ReadAsAsync<IEnumerable<Results>>().Result; var emp = response.Content.ReadAsStringAsync().Result; debugLabel.Text = emp; dataGridView1.Show(); dataGridView1.DataSource = emp;之前显示并隐藏到成功或错误功能中：

oModel.create

链接文档：https://sapui5.hana.ondemand.com/1.44.18/explored.html#/sample/sap.ui.core.sample.BusyIndicator/preview

只有对话显示忙。

sap.ui.core.BusyIndicator.show(0); <- Parameter is delay time.

sap.ui.core.BusyIndicator.hide();  <- hide

Answer 3

我设法显示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();
                });

            }
        });
    }

SAPUI5：如何在将数据推送到OData服务时显示加载对话框？

3 个答案: