Sharepoint with REST

What is SharePoint ?

Microsoft SharePoint is a popular business platform that supports a wide variety of projects, from simple document management solutions to networking portals and Internet sites.

MS SharePoint includes several products, including SharePoint Foundation, SharePoint Online for Web functionality, SharePoint Server, SharePoint Designer and SharePoint Workspace; the additional SharePoint modules offer their own features for site or network design.

MS SharePoint has traditionally been used as a document management tool or content management system (CMS), or to set up a business intranet. Now, as more advanced technologies offer additional benefits to companies, many of these, like specific enterprise resource planning tools and customer relationship management (CRM) interfaces, are SharePoint compatible, so that they can be added to a legacy SharePoint system.

What is REST API?

A RESTful API is an application program interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data.

A RESTful API — also referred to as a RESTful web service — is based on representational state transfer (REST) technology, an architectural style and approach to communications often used in web services development.

Working of RestAPI with Sharepoint :

To use the REST capabilities that are built into SharePoint, you construct a RESTful HTTP request by using the OData standard, which corresponds to the client object model API you want to use. The client.svc web service handles the HTTP request and serves the appropriate response in JSON format. The client application must then parse that response.

The endpoints in the SharePoint REST service correspond to the types and members in the SharePoint client object models. By using HTTP requests, you can use these REST endpoints to perform typical CRUD operations against SharePoint entities, such as lists and sites.

Architecture of Sharepoint Rest Service :

HTTP commands with Sharepoint Rest Service :

To perform various CRUD operations we use the following HTTP commands :

GET : To read a resource

POST : Create or update a resource

PUT : Insert or update a resource

DELETE : Delete a resource

CRUD Operations :

To begin with, we will first create a sample list in SharePoint. In my example, I have created “RestAPI_SPListDemo” on which various operations will be performed.

In the next step we will create a document library where our html file will be stored. In my example, I have stored the html code in an file “demoCode”.

In the next step we will create a page in the sharepoint site (PracticeDetailsDemo) and insert a Content Editor Web Part (CEWP) into the page. After inserting, edit the properties of the CEWP by providing the “Content Link” as the link to the text file, having html code.

<!doctype html>
 <head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <title> Sharepoint CRUD operations with RESTful API </title>
 <style>
 table,th,td {
 border: 1px solid black;
 }
 </style>
 </head>
 <script>
 $(document).ready(function()
 {
 var listName = "RestAPI_SPListDemo";
 ReadListItem(listName);
 });
 function ReadListItem(listName)
 {
 var row = "";
 $.ajax({
 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +
"')/items?$select=Practice_x0020_ID,Title,Practice_x0020_Code,Practice_x0020_Manager",
 method: "GET",
 headers: { "Accept": "application/json;odata=verbose",
 "Content-Type": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val(),
 "IF-MATCH": "*",
 "X-HTTP-Method": null
 },
 dataType:"json",
 success: function (msg) {
 $.each(msg.d.results, function (index, obj) {
 row += "<tr><td>" + obj.Practice_x0020_ID + "</td><td>" + obj.Title + "</td><td>" +
obj.Practice_x0020_Code + "</td><td>" + obj.Practice_x0020_Manager + "</td></tr>";
 });
 $("#tableForRead").append(row);
 },
 error: function (data) {
 alert("No Item found");
 }
 });
 }

 function InsertDataIntoSPList()
 {
 var listName = "RestAPI_SPListDemo";
 var practiceID = $("#txtPracticeID").val();
 var practiceName = $("#txtPracticeName").val();
 var practiceCode = $("#txt
 $.ajax({
 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +
"')/items",
 method: "POST",
 contentType: "application/json;odata=verbose",
 data: JSON.stringify(item),
 headers: {
 "Accept": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val()
 },
 success: function (data) {
 alert("success");
 },
 error: function (xhr,status,error) {
 alert(xhr.responseText);
 }
 });
 }

 function UpdateListItem()
 {
 var myID = $("#itemID").val();
 var listName = "RestAPI_SPListDemo";
 var practiceID = $("#practiceID").val();
 var practiceName = $("#practiceName").val();
 var practiceCode = $("#practiceCode").val();
 var practiceManager = $("#practiceManager").val(); 
 var item = {
 "__metadata": { "type": "SP.Data.RestAPI_x005f_SPListDemoListItem" },
 "Title": practiceName,
 "Practice_x0020_ID": practiceID,
 "Practice_x0020_Code": practiceCode,
 "Practice_x0020_Manager": practiceManager
 };
 $.ajax({
 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +
"')/items(" + myID + ")",
 type: "POST",
 contentType: "application/json;odata=verbose",
 data: JSON.stringify(item),
 headers: {
 "Accept": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val(),
 "IF-MATCH": "*",
 "X-HTTP-Method":"MERGE",
 },
 success: function (data) {
 alert("success");
 },
 error: function (data) {
 alert("failed");
 }
 });
 }

 function RemoveListItem()
 {
 var myID = $("#itmID").val();
 var listName = "RestAPI_SPListDemo";
 $.ajax({
 url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName
+ "')/items(" + myID + ")",
 type: "POST",
 contentType: "application/json;odata=verbose",
 headers: {
 "Accept": "application/json;odata=verbose",
 "X-RequestDigest": $("#__REQUESTDIGEST").val(),
 "IF-MATCH": "*",
 "X-HTTP-Method":"DELETE",
 },
 success: function (data) {
 alert("success");
 },
 error: function (data) {
 alert("failed");
 }
 });
 }
 </script>

<body>
 <div id="restBody">
 <h2>CRUD operations on Sharepoint list using REST API</h2>

 <!-- --------------- code to read data of a sharepoint list ------------- -->

 <p> 1. READ data from SPList using REST API</p>
 <table id="tableForRead">
 <tr>
 <th>Practice ID</th>
 <th>Practice Name</th>
 <th>Practice Code</th>
 <th>Pratice Manager</th>
 </tr>
 </table>
 
 <!-- --------------- code to insert a list item ------------- -->

 <p> 2. Insert data into SPList using RESTful API</p>
 <table id="myTable">
 <tr>
 <td>Practice ID</td>
 <td><input type="text" id="txtPracticeID" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Name</td>
 <td><input type="text" id="txtPracticeName" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Code</td>
 <td><input type="text" id="txtPracticeCode" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Manager</td>
 <td><input type="text" id="txtPracticeManager" style="width: 200px"></td>
 </tr>
 </table>
 
 <button class="myButton" onclick="InsertDataIntoSPList()">INSERT</button>
 
 <!-- --------------- code to update a list item ------------- -->

 <p> 3. Update list items in SPList using RESTful API</p>
 <p>Enter Item ID to update the list item</p>
 <input placeholder="Item ID" type="text" id="itemID">
 
 <table>
 <tr>
 <td>Practice ID</td>
 <td><input type="text" id="practiceID" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Name</td>
 <td><input type="text" id="practiceName" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Code</td>
 <td><input type="text" id="practiceCode" style="width: 200px"></td>
 </tr>
 <tr>
 <td>Practice Manager</td>
 <td><input type="text" id="practiceManager" style="width: 200px"></td>
 </tr>
 </table>
 <button onclick="UpdateListItem()">UPDATE</button>

 <!-- --------------- code to delete a list item ------------- -->

 <p> 4. Delete list items using RESTful API</p>
 <p>Enter Item ID to delete the list item</p>
 <input placeholder="Item ID" type="text" id="itmID">
 <button class="myButton" onclick="RemoveListItem()">DELETE</button>
 </div>
 </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

<!doctype html>

<head>

<title> Sharepoint CRUD operations with RESTful API </title>

<style>

table,th,td {

border: 1px solid black;

}

</style>

</head>

$(document).ready(function()

{

var listName = "RestAPI_SPListDemo";

ReadListItem(listName);

});

function ReadListItem(listName)

{

var row = "";

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +

"')/items?$select=Practice_x0020_ID,Title,Practice_x0020_Code,Practice_x0020_Manager",

method: "GET",

headers: { "Accept": "application/json;odata=verbose",

"Content-Type": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val(),

"IF-MATCH": "*",

"X-HTTP-Method": null

dataType:"json",

success: function (msg) {

$.each(msg.d.results, function (index, obj) {

row += "<tr><td>" + obj.Practice_x0020_ID + "</td><td>" + obj.Title + "</td><td>" +

obj.Practice_x0020_Code + "</td><td>" + obj.Practice_x0020_Manager + "</td></tr>";

});

$("#tableForRead").append(row);

error: function (data) {

alert("No Item found");

}

});

}

function InsertDataIntoSPList()

{

var listName = "RestAPI_SPListDemo";

var practiceID = $("#txtPracticeID").val();

var practiceName = $("#txtPracticeName").val();

var practiceCode = $("#txt

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +

"')/items",

method: "POST",

contentType: "application/json;odata=verbose",

data: JSON.stringify(item),

headers: {

"Accept": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val()

success: function (data) {

alert("success");

error: function (xhr,status,error) {

alert(xhr.responseText);

}

});

}

function UpdateListItem()

{

var myID = $("#itemID").val();

var listName = "RestAPI_SPListDemo";

var practiceID = $("#practiceID").val();

var practiceName = $("#practiceName").val();

var practiceCode = $("#practiceCode").val();

var practiceManager = $("#practiceManager").val();

var item = {

"__metadata": { "type": "SP.Data.RestAPI_x005f_SPListDemoListItem" },

"Title": practiceName,

"Practice_x0020_ID": practiceID,

"Practice_x0020_Code": practiceCode,

"Practice_x0020_Manager": practiceManager

};

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName +

"')/items(" + myID + ")",

type: "POST",

contentType: "application/json;odata=verbose",

data: JSON.stringify(item),

headers: {

"Accept": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val(),

"IF-MATCH": "*",

"X-HTTP-Method":"MERGE",

success: function (data) {

alert("success");

error: function (data) {

alert("failed");

}

});

}

function RemoveListItem()

{

var myID = $("#itmID").val();

var listName = "RestAPI_SPListDemo";

$.ajax({

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName

+ "')/items(" + myID + ")",

type: "POST",

contentType: "application/json;odata=verbose",

headers: {

"Accept": "application/json;odata=verbose",

"X-RequestDigest": $("#__REQUESTDIGEST").val(),

"IF-MATCH": "*",

"X-HTTP-Method":"DELETE",

success: function (data) {

alert("success");

error: function (data) {

alert("failed");

}

});

}

</script>

<body>

<h2>CRUD operations on Sharepoint list using REST API</h2>

<p> 1. READ data from SPList using REST API</p>

<tr>

<th>Practice ID</th>

<th>Practice Name</th>

<th>Practice Code</th>

<th>Pratice Manager</th>

</tr>

</table>

<p> 2. Insert data into SPList using RESTful API</p>

<tr>

<td>Practice ID</td>

</tr>

<tr>

<td>Practice Name</td>

</tr>

<tr>

<td>Practice Code</td>

</tr>

<tr>

<td>Practice Manager</td>

</tr>

</table>

<button class="myButton" onclick="InsertDataIntoSPList()">INSERT</button>

<p> 3. Update list items in SPList using RESTful API</p>

<p>Enter Item ID to update the list item</p>

<table>

<tr>

<td>Practice ID</td>

</tr>

<tr>

<td>Practice Name</td>

</tr>

<tr>

<td>Practice Code</td>

</tr>

<tr>

<td>Practice Manager</td>

</tr>

</table>

<button onclick="UpdateListItem()">UPDATE</button>

<p> 4. Delete list items using RESTful API</p>

<p>Enter Item ID to delete the list item</p>

<button class="myButton" onclick="RemoveListItem()">DELETE</button>

</div>

</body>

</html>

The output of this html file will be rendered by the Content Editor Web Part and will be displayed on the page.

The first table shows the data that is in the SharePoint list “RestAPI_SPListDemo” and the other sections can be used to perform necessary operations such as insertion, deletion etc.

INSERT OPERATION :

UPDATE OPERATION :

DELETE OPERATION :

Sharepoint with REST

About The Author

Aditi Dutta

Leave a Reply Cancel reply

About The Author

Related Posts

Leave a Reply Cancel reply