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

%3CLINGO-SUB%20id%3D%22lingo-sub-696694%22%20slang%3D%22en-US%22%3EIs%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessly%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-696694%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessly.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-697140%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-697140%22%20slang%3D%22en-US%22%3EI%20was%20tasked%20with%20creating%20custom%20forms%20for%20lists%20in%20a%20recent%20project%20using%20SPFX.%20I%20remember%20looking%20up%20a%20solution%20that%20used%20React%20(%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FDanyWyss%2Fspfx-react-form-webpart%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FDanyWyss%2Fspfx-react-form-webpart%3C%2FA%3E%20maybe%20this%20one%2C%20not%20sure).%20It%20was%20pretty%20painful%20to%20get%20it%20to%20work%20first%2C%20lots%20of%20bugs%20would%20show%20up.%20Then%20I%20decided%20to%20just%20write%20my%20own%20custom%20form.%20It's%20no%20big%20deal%2C%20you%20can%20just%20build%20an%20HTML%20form%20and%20then%20use%20PnPJs%20to%20create%20the%20item.%20Let%20me%20know%20if%20you%20need%20help.%3CBR%20%2F%3E%3CBR%20%2F%3ERegards%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-699219%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-699219%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F249484%22%20target%3D%22_blank%22%3E%40Carlis_Marins_Jr%3C%2FA%3E%26nbsp%3B%20could%20you%20please%20provide%20me%20a%20working%20example.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20seen%20the%20below%3B%20which%20seems%20to%20run%20on%20Knockout.js%20which%20i%20have%20not%20had%20any%20experience%26nbsp%3B%20on.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fuse-sp-pnp-js-with-spfx-web-parts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fuse-sp-pnp-js-with-spfx-web-parts%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-699476%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-699476%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F52384%22%20target%3D%22_blank%22%3E%40null%20null%3C%2FA%3E%26nbsp%3B%20You%20need%20to%20consider%20that%20OOTB%20new%2Fedit%20form%20cannot%20be%20modified%2Freplaced%20using%20SPFx%20in%20modern%20experience.%26nbsp%3B%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F2996%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-docs%2Fissues%2F2996%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBut%20you%20still%20can%20create%20SPFx%20based%20custom%20forms%20and%20expose%20it%20as%20SPfx%20commandset.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-717670%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-717670%22%20slang%3D%22en-US%22%3E%3CP%3EHey%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F52384%22%20target%3D%22_blank%22%3E%40null%20null%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F249484%22%20target%3D%22_blank%22%3E%40Carlis_Marins_Jr%3C%2FA%3E%26nbsp%3Bspeaking.%20That%20profile%20was%20associated%20to%20my%20former%20company%20so%20I%20had%20to%20create%20a%20new%20one.%20Anyway%2C%20the%20solution%20I%20used%20wasn't%20based%20on%20any%20example%2C%20but%20you%20can%20pretty%20much%20create%20a%20form%20of%20your%20own.%20The%20easiest%20way%20for%20me%20was%20to%20create%20a%20HTML%20Form%20where%20the%20ID%20of%20the%20input%20field%20is%20the%20name%20of%20the%20List%20Field.%20Then%20when%20the%20user%20hits%20submit%20all%20you%20do%20is%20get%20these%20values%20and%20send%20them%20to%20the%20list%2C%20using%20the%20PnPJS%20library.%20Unfortunately%20I%20don't%20have%20access%20to%20the%20code%20anymore%2C%20but%20let%20me%20know%20if%20you%20need%20some%20details%20on%20how%20to%20achieve%20it.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-771079%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20an%20example%20where%20SPFX%20form%20is%20used%20inplace%20of%20List%20New%2FEdit%20form%20and%20it%20works%20seamlessl%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-771079%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F365643%22%20target%3D%22_blank%22%3E%40Carlos_Marins%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ei%20want%20to%20make%20use%20of%20the%20different%20fields%20%2F%20list%20column%20type%20like%20features%20like%20dropdown%2C%20lookup%20columns%20like%20feature%2C%20where%20i%20update%20few%20things%20in%20other%20list%20in%20the%20site.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20planning%20to%20use%20an%20SPFx%20extension%20method%20with%20a%20button%20right%20next%20to%20New%20_%20button%20acting%20as%20a%20command%20button%20for%20adding%20custom%20form%20to%20the%20users.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Regular Contributor

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

 

Thanks

5 Replies
Highlighted
I was tasked with creating custom forms for lists in a recent project using SPFX. I remember looking up a solution that used React (https://github.com/DanyWyss/spfx-react-form-webpart 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.

Regards
Highlighted

@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.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/use-sp-pnp-js-with-spfx-web-parts

 

Thanks

Highlighted

@null null  You need to consider that OOTB new/edit form cannot be modified/replaced using SPFx in modern experience.  https://github.com/SharePoint/sp-dev-docs/issues/2996 

 

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

Highlighted

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.

Highlighted

Hi@Carlos_Marins 

 

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.

 

Thanks