Forum Discussion

null null's avatar
null null
Iron Contributor
Jun 17, 2019

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

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

 

Thanks

7 Replies

  • ryanshane's avatar
    ryanshane
    Copper Contributor
    Jan 20, 2021

    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.

  • Unnie's avatar
    Unnie
    Iron Contributor
    Jun 18, 2019

    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.

  • Anonymous's avatar
    Anonymous
    Jun 17, 2019
    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
    • null null's avatar
      null null
      Iron Contributor
      Jun 18, 2019

      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

      • Carlos_Marins's avatar
        Carlos_Marins
        Iron Contributor
        Jun 24, 2019

        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.

Resources