SAPUI5：データをODataサービスにプッシュする際に読み込みダイアログボックスを表示するにはどうすればよいですか？

Question

私はテンプレートアプローチを追求せずに新しいSAPUI5アプリケーションを構築しています。私が構築しているのは、2つのフィールドとボタンが付いた小さなフォームです。 AHHhh ... "ボタン"。

ボタンについてはどうですか？ボタンは次のコードがあります。それに

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

を、私はボタンを押すと、 insertIntoOData関数が呼び出されることを期待しています。そして、何を推測する！それは！

素晴らしい！ ODataのモデルは、レコードの挿入を処理しながら -

は、しかし、問題は insertIntoODataで、私はそれが（チェックこのlinkフラグメントを使用して構築された）ダイアログを表示したいということです。残念ながら、私はダイアログを表示させることができませんでした。 の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

私はbusyIndi​​catorを表示することができました。 私は、次のように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(); 
       }); 

      } 
     }); 
    } 

Answer 2

insertIntoODataメソッドを入力したとき。サービスを呼び出す前に はあなたがoModel.create前に、グローバルビジーインジケータまたはコンポーネントビジーインジケータ、ショーを行うことができます

that._dialog.setBusy(false); 

Answer 3

として設定されたサービスresponceを（成功事例のか、エラーは関係ありません）取得した後

that._dialog.setBusy(true); 

を設定し、成功またはエラー関数に隠す：

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