Prevent Dialog from closing after pressing OK - SPFX Extension Listview Command
-
06-02-2021 - |
题
I created a spfx extension that shows a dialog using
Dialog.alert(`Are you sure you want to open Quarter ${selectedItem.Quarter} for Period ${selectedItem.Period}?`).then(() => {
this.updateSelectedItem(selectedItem);
});
then updates selected item if the user press Ok. Its working but, even if i dont click OK and just click outside the dialog, it will still update the selected item.
How can i add cancel button?
Also i want to display a spinner inside the dialog when the user press OK. Is it possible?
解决方案
By writing Dialog.alert(message).then(/*stuff*/)
, you are saying that you want Dialog
to alert
, then always run the /*stuff*/
after the dialog closes, regardless of the way it closes. This leads to the behavior you observe.
To your first question, I would hazard a guess that there's a similar method Dialog.confirm(message).then(/*stuff*/)
, which would prompt the user for a "OK" or "Cancel" response, then runs /*stuff*/
conditionally only if the user selected "OK". However, I'm not sure what Dialog API you're using, so I recommend you review the documentation for that component/library for details.
In the worst case, you could create an event listener on the OK button which sets a boolean (ex. userClickedOk
) to true
when the user clicks OK, so the code could look like this:
Dialog.alert(`Are you sure you want to...?`).then(() => {
if (userClickedOk) {
this.updateSelectedItem(selectedItem);
}
});
To your second question, you'll need to provide more details about the library you're using. It's certainly possible - with vanilla JavaScript, you could attach an event listener to the "OK" button, which then attaches some spinner HTML to the dialog. But there might be a better/easier way provided through the API.