I am currently working on SharePoint hosted app which has custom ribbon action in list & library.

I have opened modal-dialog on ribbon action(HostWebDialog) but in SharePoint modern page it is not working. It is redirected to a page.

So, is there any alternative of modal-dialog available for SharePoint Modern Page?

  • do you mean, its not working in modern list view and library ? Oct 24, 2017 at 9:08
  • Yes @GautamSheth. Its not working in modern list view and library. Oct 24, 2017 at 10:09

1 Answer 1



Based on this, numerous customization options are not supported in the modern list/library like jslink field and view customization, custom css via alternate css url, custom masterpages, custom js embedded via User custom action etc.

The old approach where the command action would contain javascript like CommandAction="javascript:alert('My custom Action');" will also not work in modern view.

The solution to your problem is to use SharePoint framework extensions (SPFx extensions).

SPFx extensions allow you to extend and customize SharePoint experience in modern sites, pages, lists and libraries using client-side tech stack.

There are 3 types of extensions - namely, ApplicationCustomizers , FieldCustomizers and CommandSets.

For your particular case, you would be using the extension type CommandSets as it would allow you open a modal dialog on click on a ribbon button.

This is a whole new model to SharePoint development which complements the existing addin model.

For that, you would need to setup the entire dev environment and then deploy the extension.

Reference links below:

Set up your SPFx development environment

SPFx extensions overview

Build your first ListView Command Set Extension and make use of the dialog API to show content in dialog

If you follow the above links, you will end up with the below result:

enter image description here

Sample SPFx extensions links which implement the Commandsets:



That being said, if you want a single solution to work, you should control the list experience via tenant settings as below. You can keep classic to use the old way for all lists or switch to modern. Do note, the classic is neither deprecated nor is it going away:

You can go to SharePoint admin center(tenant-admin.sharepoint.com) > settings and click on Classic or modern.

enter image description here

  • 1
    Agree, We can do this with SPFx extension, but then what about classical mode ? Oct 24, 2017 at 13:24
  • 2
    Unfortunately, it wont work on classic pages :( this is indeed a platform limitation that MS is working on. However, spfx is the way to go to make it future proof. The sp-hosted way wont work in modern lists Oct 24, 2017 at 15:05
  • Great and helpful answer.
    – Gil Roitto
    Feb 14, 2018 at 7:44
  • @GautamSheth can we trigger create form in dialog box to update current selected item with specific details ??? Dec 10, 2019 at 10:40

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.