SPFx: Open SharePoint List Form from Custom Page

Question

Here's a rephrased version of your message:

I have created a custom SharePoint page using SPFx that displays data from a SharePoint list. I want users to be able to click on any item to open the list out of box edit form and have my page refresh when an item is updated or added. I also want to add a button to create a new item, which opens the out of box new form with the same functionality.

In classic SharePoint, I achieved this using:

javascript:

    function openFormDialog(ID, listName) {
      var baseUrl = _spPageContextInfo.siteAbsoluteUrl;
      var myurl =`${baseUrl}/Lists/${listName}/EditForm.aspx?ID=${ID}`;
      var options = {
        url: myurl,
        title: "Edit Item",
        dialogReturnValueCallback: (result) => CloseCallback(result, myurl)
      };
      SP.SOD.execute('sp.ui.dialog.js','SP.UI.ModalDialog.showModalDialog',
    options);
      //return false;
    }
    //Thats how I used callback function.
    async function CloseCallback(result, target) {
            if (result === SP.UI.DialogResult.OK) {
            }
    }

//This is how we open any edit form by passing listname and thier item id.
openEditDialog(101,"Cars")

By using above code I can easily open any list any form in modal and based on user function I can easily call callback function .

How can I achieve similar functionality in SPFx?

Answer 1

You could for example use the PnP React Control DynamicForm and put it in an Fluent UI Panel. This control tries to build a similar formular for your list and you are able to change the item before saving or get notified when the item was saved.

Or just use the SPO default NewForm: ".../sites/sitename/Lists/yourlistname/NewForm.aspx" with the embedded parameter "?env=WebView". But with this method you can not react to the "save" event.

Another way would be to build an SPFx Form Customizer for your list or customize a form with Power Apps. But with this method you have to build the form yourself.

For more infos refer to this question for example.