SharePoint framework React webpart CRUD operations

In this learning we will see how to make CRUD operations in a SharePoint framework React webpart. I have a list named “Projects” in my SharePoint Online site, we will learn how to

  • Create item
  • Read item
  • Update item
  • Delete item

Step 1: Create a basic (SPFx) SharePoint framework React webpart

Believe you have the required SPFx environment setup. Open your preferred command line tool and run the below command to create our basic webpart

I have selected “React” as my framework for this tutorial. Once the webpart is created open the webpart project by using your preferred tool mine is visual studio code

Step 2: Add render method code to display buttons in the webpart

In this step we will add some buttons in the webpart as we need them to do the CRUD actions with them. Finally, the UI should look like this

Step 2a: Create an Interface “IListItem”

We need to add some code in .tsx file but before that we need to add 2 interfaces and will be referred in .tsx file later

Go to “components” folder right click “New file” and name it as “IListItem.ts”. Add the below code in it

Step 2b: Create an Interface named “ISpfxReactCrudState”

Add another interface, create a new file named “ISpfxReactCrudState.ts” under components and add the below code in it

Step 2c: Add buttons in code in “.tsx” file

Now open the webpart “SpfxReactCrud.tsx” file and add imports below the default references

Add the below constructer code into the class file just above render method

Then add this render method which will add 4 buttons to my webpart. Its just html and css

Then for now we will add the below empty methods ready to for each CRUD operation.

Step 3: Test the webpart buttons and see how they look like.

Run “Gulp serve” in the command and insert the webpart in the local work bench page

Cool, we are ready with the controls rendering part. Now we need to explore on how to do CRUD operations

Step 4: Set the required properties

Update the props interface, by default its only with description field. We don’t need it.

Add the below code to set URL, Listname and SPHttpClient

Now we need to update the code in “SpfxReactCrudWebPart.ts” file to fit in the above set parameters

Step 5: Add code logic to “Create item”

Open the “SpfxReactCrud.tsx” file and replace the “createItem” private method. The “spHttpClient” uses REST API to connect to the SharePoint site

Step 5: Test the final webpart with Create action

  • Now it’s time for us to hit Gulp serve, which opened the local workbench in which I clicked the “Create item” button gave me this error as it needs a SharePoint site and “Project” list in it

Error while creating the item: TypeError: Failed to fetch

  • So, leave the gulp serve running as it is, move to your SharePoint site where you have the “Projects” list and launch the SharePoint site workbench as below

https://yoursitename.sharepoint.com/sites/yoursubsitename/_layouts/15/workbench.aspx

  • Insert the webpart in it that SharePoint site workbench
  • Click the “Create item” button now, fantastic I got the success message saying item created

I could see my Projects list with the new item created in it. Cool !!!…

Thanks for your time reading my learnings.

Issues faced/Observations:

Property ‘items’ does not exist on type ‘Readonly<{}>’.ts(2339)

It’s because the “items” is declared inside the interface “ISpfxReactCrudState” but we have not added in the export class only “ISpfxReactCrudProps” and “{}” empty is available.

So, I added “ISpfxReactCrudState” as below and the error is gone