How to open SharePoint list new form with Modern experience?

Occasional Contributor

I have created one list under in the SharePoint online modern team site.

I have created custom component and implement below code for open new form using sp.ui.modaldialog js file. 




var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var demoListName = "Demo"k

function addNewItem() {
    var options = {
        url: siteUrl + '/Lists/' + demoListName + '/NewForm.aspx?IsDlg=1',
        title: 'Add New Item',
        autoSize: true,
        dialogReturnValueCallback: function (dialogResult) {
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);



When end user click on add new button below form will be open.

NewForm Classic.png


I need to open the same form with Modern experiencer using sp.ui.modaldialog.js. Please check below screenshot for better understanding,
NewForm Model.png

Can anyone suggest me for the same?


2 Replies

@bhoomesh Are you trying to add custom JavaScript code on "modern" pages?


Or code will be added on classic page & want to open modern list form on classic page?

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.


I have added code on classic page & want to open modern list form on that page..