Skip to Content
avatar image
Former Member

how to make a dialog syncronouos?

I have an app where the user clicks a button, a dialog comes up asking for confirmation. Based on their selection I update a variable and execute the rest of the code based on the variable value. The problem is that the code that follows always executes before the user presses the button. How can I fix this so everything executes in a linear manner?

Code snippet:

onUploadPress: function () {
var upload;			
var dialog = new Dialog({				
  title: 'Confirm',				
type: 'Message',				
content: new Text({ text: 'Are you sure you want to upload?' }),				
beginButton: new Button({					
text: 'Submit',					
press: function () {						
upload = true;
dialog.close();					
       }				
   }),				
endButton: new Button({					
text: 'Cancel',					
press: function () {
upload = false;						
dialog.close();					
}				
}),				
afterClose: function() {					
dialog.destroy();				
}			
}); 			
dialog.open();		

if(upload == true){//this code executes at the same time the dialog comes up 
 //do something here
}
}, 
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Aug 07, 2017 at 08:11 PM

    Hi,

    Structuring the code in a manner like this should give you the outcome you are looking for:

    onUploadPress: function () {
    var dialog = new Dialog({
      title: 'Confirm',
    type: 'Message',
    content: new Text({ text: 'Are you sure you want to upload?' }),
    beginButton: new Button({
    text: 'Submit',
    press: function () {
    //do something here
    dialog.close();
           }
       }),
    endButton: new Button({
    text: 'Cancel',
    press: function () {
    dialog.close();
    }
    }),
    afterClose: function() {
    dialog.destroy();
    }
    });
    dialog.open();
    }, 
    
    

    Regards,

    Ryan Crosby

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 08, 2017 at 11:47 AM

    You need to put the code inside the event function or have each event call another function which processes the check

    You can find some examples at

    https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.DialogConfirm/code/C.controller.js

    Regards,

    Jamie

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 08, 2017 at 11:06 AM

    Hi Peter,

    The ideal way should be to structure the function. According to your current code, I see that on the call of the onUploadPress()

    a dialog is created every time which is not required, because you can initiate the dialog once and it will exist till you destroy it. You can add the dialog as a fragment and call it like below:

    onUploadPress: function () {if(!this._Dialog3){
    		this._Dialog3 =  sap.ui.xmlfragment("path to the folder where your dialog is added in fragment",this);
    		this._Dialog3.open();
    		}
    		this._Dialog3.open();
    
    

    Now, on click of the submit button, we can different function which will handle your last part:

    onSubmit: function () {
        this.confirmUpload();
        this._Dialog3.close();
           },
    onClose:function(){
    this._Dialog3.close();
    },
    
    confirmUpload:function(){
    //Code to upload
    }

    This is not the only way to handle it, but i feel this way we can reuse the elements as you might need to have the dialog to be used else wherein the application.

    Another way which requires less modification would be to use afterClose() function of the dialog.

    Dialog Events

    Hope this will work for you!!

    Thanks,

    Ashwin

    Add comment
    10|10000 characters needed characters exceeded