SAPUI5 : 데이터를 OData Service로 푸시하는 동안로드 대화 상자를 표시하는 방법은 무엇입니까?

Question

나는 템플릿 접근법을 추구하지 않고 새로운 SAPUI5 애플리케이션을 구축 중입니다. 제가 만들고있는 것은 두 개의 필드와 버튼이있는 작은 폼입니다. 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

나는 busyIndicator를 표시 할 수있었습니다.

이

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 메서드를 입력 할 때. 호출하기 전에 서비스

that._dialog.setBusy(false); 

Answer 3

당신은 oModel.create 전에 글로벌 통화 표시 또는 구성 요소 바쁜 표시, 쇼를 할 수

과 같이 설정 서비스 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