0

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?

0

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.

  • Are you using the Dialog from @microsoft/sp-dialog? If so, it looks like they do not have a simple Yes/No or Ok/Cancel dialog type. However they give you an implementable class called [BaseDialog](https://docs.microsoft.com/en-us/javascript/api/sp-dialog/basedialog?view=sp-typescript-latest) which you can use to create your own Dialog with the specific requirements. You can see Use custom dialog boxes with SPFx Extensions which addresses List View Command Sets. – Richard Li Mar 11 at 21:23
  • 1
    Thanks guys.. I already solved the problem by creating a custom dialog – Daniele Sto Domingo Mar 12 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.