SAPUI5: Dialog Confirmation on Delete

[former_member592761]

Hello Friends,

Still learning SAPUI5 and struggling with the dialog control. Using the sample app here: https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.DialogConfirm/preview, I'm trying to perform a delete if the user confirms.

My approach was to set a variable "ConfirmDelete" to false and if the user clicks the confirm button set it to true. But due to the callback timing, the variable is never set to true.

Here's the main code sections:

The view has the delete button which calls the event 'onDelete':

<Button text="{i18n>delete}" type="Accept" press="onDelete"/>

The onDelete() function sets the delete flag to false, and then calls the onDeleteDialog() function:

onDelete: function()

{

this.ConfirmDelete = false; // <-- SET FLAG TO FALSE
this.onDeleteDialog(); // <-- CALL FUNCTION TO CONFIRM DELETE
if (!this.ConfirmDelete){ return; } // <-- CHECK FLAG BEFORE DELETING

. . .

oModel.remove(key, { method: "DELETE", success: function(data) { . . . },
error: function(e) { . . . });
}
});
this.onNavBack();
}, ...

I wanted the onDeleteDialog to set the delete flag to true if user clicks "Delete":

onDeleteDialog: function() {
var dialog = new Dialog({
title: 'Confirm',
type: 'Message',
content: new Text({ text: 'Are you sure you want to delete this record?' }),
beginButton: new Button({
text: 'Delete',
press: function() {
this.ConfirmDelete = true; // <----- SET FLAG TO TRUE
dialog.close(); }
}),
endButton: new Button({
text: 'Cancel',
press: function() { dialog.close();
} }),
afterClose: function() {
dialog.destroy();
} });
dialog.open();
},

So the dialog appears, but after confirming, the flag is still false.

The sample code puts the action (a toast message) inside the callback. I've tried this approach, but the results are the same.

Any suggestions?

Thanks,
Matt

[junwu · Accepted solution]

if (!this.ConfirmDelete){ return; } // <-- CHECK FLAG BEFORE DELETING

. . .

oModel.remove(key, { method: "DELETE", success: function(data) { . . . },
error: function(e) { . . . });
}
});
this.onNavBack();

put those code in

press: function() {

[former_member592761]

Hi Jun Wu,

Thank you for the suggestion. That was exactly what I did already, but I tried it again and now it works. 🙂