Posts SPOHelper - SharePoint Online REST API CRUD Operation Utility with Example
Post
Cancel

SPOHelper - SharePoint Online REST API CRUD Operation Utility with Example

Introduction

On Daily basis, Most of developer are using fetch API or jQuery $.ajax for making Sharepoint Online REST API Request.

To use $.ajax it requires external depenedency jQuery, and fetch API Available in Modern Browsers and polyfill available as well for older browser like IE11.

However even if we are making Sharepoint REST API Request using fetch or $.ajax every time we need to setup Odata Headers like Accept, Content Type, Credentials and RequestDigest Headers for each request based on GET, POST etc operation.

To Remove this type of duplicate header configuration and repetetive boilerplate code, I have created light weight REST API Utility SPOHelper.ts for faster SPFX Development.

Usage of SPOHelper Utility

If you are developing with Typescript first you need to import requried methods as below.

1
import {SPGet, SPDelete, SPPost, SPUpdate} from "./SPOHelper";

SPGet and SPDelete method accepts single parameter url

SPPost(options), SPUpdate(options) method accepts single JSON object as parameter which have multiple json property. options.url which is url required options.payload is json object which have all required data for inserting List or ListItem without metadata.

In this SPOHelper.ts I have used Accept and Content-Type headers value "application/json; odata=nometadata" which doesn’t require metadata while CRUD Operation and response payload is also minimal. You can explore json-light-support-rest-sharepoint-api

SPPost(options) This method used for Createing List or List Item in SharePoint Online. SPUpdate(options) This method used for Updating List or List Item in SharePoint Online.

Usage of SPGet method

1
2
3
4
5
6
7
//Get List By Title
SPGet("https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')")
.then(r=>console.log(r));

//Get All ListItem
SPGet("https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')/items")
.then(r=>console.log(r));

Usage of SPDelete method

1
2
3
4
5
6
7
//Delete Sharepoint List 
SPDelete("https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')")
.then(r=>console.log(r));

//Delete Sharepoint Listitem
SPDelete("https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')/items(1)")
.then(r=>console.log(r));

Usage of SPPost method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 //Create SharePoint List without passing metadata
 SPPost({url:"https://tenant.sharepoint.com/sites/ABCSite/_api/Lists"
 ,payload:{Title :"POC Doc"
 , BaseTemplate: 101
 ,Description: 'Created From SPOHelper' }
 })
 .then(r=>console.log(r));
 
 //Create SharePoint ListItem without passing metadata
 SPPost({url:"https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')/items"
 ,payload:{Title :"POST test",
 Number:123}
 })
 .then(r=>console.log(r));
 

Usage of SPUpdate method

1
2
3
4
5
6
7
8
9
10
11
 //Update SharePoint List without passing metadata
 SPUpdate({url:"https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/GetByTitle('POC Doc')"
 ,payload:{Description: 'Updated Description From SPOHelper' }
 }).then(r=>console.log(r));
 
 //Update SharePoint ListItem without passing metadata
 SPUpdate({url:"https://tenant.sharepoint.com/sites/ABCSite/_api/Lists/getbytitle('SPO List')/items(1)"
 ,payload:{Title :"Uodate  test",
 Number:1234}
 }).then(r=>console.log(r))
 

Hope this SPOHelper Utility will be useful for faster Spfx Development with minimal code.

Further also checkout video tutorial to understand SharePoint REST API and SPOHelper