Forum Discussion

nnn2612's avatar
nnn2612
Copper Contributor
Nov 19, 2021

Create and Edit Sharepoint List in Spfx and React (Sharepoint Online)

Hi Microsoft Community,

I have a requirement, where we have to perform create and edit operations on SharePoint List Items using SPFX form and react framework. So, the issue is I have to show the List Item Data in SPFx form which I ‘am showing by passing ID through Query String but, all controls are in read-only mode (as values are populated of existing Item) and not able to edit . So, because of this issue even new form is also read-only as I ‘am using same SPFx form for both.  I saw many examples regarding CRUD operations in Internet but, they are all doing CRUD operations from browser but, I have to do the same in SPFx form. So, request you to let me know if anybody had resolved similar kind of issue.

 

  • DanWatford's avatar
    DanWatford
    Copper Contributor
    Nov 22, 2021

    Hi nnn2612 

     

    It sounds like you have already built your form using React. If so, perhaps you could post its source code, or at least a cut down version showing one or two fields.

     

    I assume you have created an SPFx webpart to render your form and that you are reading the URL query string during the webpart's initialisation in order to find the ID of the list item you need to display.

     

    You could use the presence of the ID query parameter as your condition for whether to display an existing list item in read-only more, or to display an empty editable form to be used to create a new list item. You could pass a property called readOnly into your React form component. When the React form component renders all the fields, it will use the readOnly property to determine whether to make the field editable or read-only (I assume the React controls have a read-only property).

     

    The React List Form SPFx sample might be helpfule - sp-dev-fx-webparts/samples/react-list-form at main · pnp/sp-dev-fx-webparts (github.com).

Resources