Is there an example where SPFX form is used inplace of List New/Edit form and it works seamlessly

Iron Contributor

Is there an example where SPFX form is used inplace of List New/Edit form and it works seamlessly.



7 Replies
I was tasked with creating custom forms for lists in a recent project using SPFX. I remember looking up a solution that used React ( maybe this one, not sure). It was pretty painful to get it to work first, lots of bugs would show up. Then I decided to just write my own custom form. It's no big deal, you can just build an HTML form and then use PnPJs to create the item. Let me know if you need help.


@Deleted  could you please provide me a working example.


I have seen the below; which seems to run on Knockout.js which i have not had any experience  on.



@null null  You need to consider that OOTB new/edit form cannot be modified/replaced using SPFx in modern experience. 


But you still can create SPFx based custom forms and expose it as SPfx commandset.

Hey @null null,


This is @Deleted speaking. That profile was associated to my former company so I had to create a new one. Anyway, the solution I used wasn't based on any example, but you can pretty much create a form of your own. The easiest way for me was to create a HTML Form where the ID of the input field is the name of the List Field. Then when the user hits submit all you do is get these values and send them to the list, using the PnPJS library. Unfortunately I don't have access to the code anymore, but let me know if you need some details on how to achieve it.



i want to make use of the different fields / list column type like features like dropdown, lookup columns like feature, where i update few things in other list in the site.


I am planning to use an SPFx extension method with a button right next to New _ button acting as a command button for adding custom form to the users.





@Carlos_Marins Well that fine to create your own HTML form and using rest calls getting, posting items but its really time consuming to create your complex field like Metadata and Poeple picker. There should be a sample that deals with such cases. 

@null null, on content types you can still point them to a custom display form or edit form URL via the DisplayFormUrl and EditFormUrl properties. You can use this to point to an entirely custom aspx page (based off the modern site master page), and then embed the SPFX webpart on it. Another option is to point to a regular modern page with your custom SPFX webpart added to it. When SharePoint opens the edit or display form, it will pass the mode (display / edit) and id (item id) parameters to it.