using SP.UI.Modaldialog.showDialog(options); in spfx listview extension is executing but no dialog is visible

Question

Hi I'm trying to open sharepoint dialog using spfx extension in which using typing able to get the SP.UI.ModalDialog Object in ts file of the extension.

And the code #

SP.UI.ModalDialog.showModalDialog(options);

executes completely without any error. But unfortunately no dialog is visible. below is the onexecute Method of the extension.

 public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
  case 'COMMAND_1':
    //Dialog.alert(`${this.properties.sampleTextOne}`);
    let ele = document.createElement('div');        
    alert("Asdas");
    let options = {
      title: "My Dialog Title",
      width: 400,
      height: 300,
      url: "https://*****.sharepoint.com/sites/***/home.aspx"
     };
    // SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    SP.UI.ModalDialog.showModalDialog(options);
     break;
  case 'COMMAND_2':
    Dialog.alert(`${this.properties.sampleTextTwo}`);
    break;
  default:
    throw new Error('Unknown command');
}

}

Any idea why the sharepoint dialog is not visible, i m trying this on modern site. Any help is highly appreciated.

Answer 1

The use of the JavaScript Object Model is not supported in modern pages. (Reference)

If you want to show a dialog using SPFx, @microsoft/sp-dialog is what you should be using.

Here are the guidance docs for using that: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/guidance/using-custom-dialogs-with-spfx