Skip to Content
0

how to make a dialog syncronouos?

Aug 07, 2017 at 07:53 PM

46

avatar image
Former Member

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
}
}, 
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Ryan Crosby Aug 07, 2017 at 08:11 PM
1

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

Share
10 |10000 characters needed characters left characters exceeded
Jamie Cawley
Aug 08, 2017 at 11:47 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded
Ashwin Narayan Aug 08, 2017 at 11:06 AM
0

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


dialog.jpg (54.2 kB)
Share
10 |10000 characters needed characters left characters exceeded