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 #


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':
    let ele = document.createElement('div');        
    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);
  case 'COMMAND_2':
    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.

1 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

  • i need to re-use the aspx of custom ribbon action using the spfx extension. With least development activity all i can see is using either an iframe for the page inside the Dialog(@not recommended) or using SP.UI.ModalDialog action to show the dialog with perticular page as option. Also this page needs some parameters for its functionalities
    – user27178
    Commented Apr 9, 2020 at 13:41
  • SP.UI.ModalDialog is part of the JSOM so that is not supported as mentioned. It is no problem to pass parameters to the dialog, the question is where are these parameters coming from? Commented Apr 9, 2020 at 14:08
  • i tried with getting the site Title using JSOM code within same code snippet as mentioned above by importing external SP.js modules, at it works. So i m wondering SP.UI. is aslo under the JSOM activity for what reason code executed and no dialog is visible
    – user27178
    Commented Apr 10, 2020 at 11:26
  • I have already answered that. Not supported. The reason it works for the title is that the underlying mechanisms are still in place, but they are not for other things like the dialog. The title is the same you could be getting through this.context.pageContext in your extension. If you look at my last link, the tutorial shows how to create a custom dialog for an extension. That is the only viable option you have in a modern list. Commented Apr 10, 2020 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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