REST CRUD Operations Using SharePoint Hosted App Office 365

Before reading this article, please look into the previous article to learn how to create a list in site and create a SharePoint hosted app in Visual Studio.

REST CRUD (Insert, Update, Delete, Get) Operations Using SharePoint Hosted App - Office 365 - Part One

In this article, we will discuss from the third point onward, as we have already discussed the first two points in Part One.

Create a List in Office 365 SharePoint Site
Creation of Project using SharePoint Hosted App
HTML code for User Interface
Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.
Deploy the Project
Test the application.

HTML Code for User Interface

In default.aspx page, we will do some changes as mentioned below.

Add the below script tags after jQuery script tag.
1. <script type="text/javascript" src="_layouts/15/sp.runtime.js"></script>
2. <script type="text/javascript" src="_layouts/15/sp.js"></script>

Write the below HTML code for User Interface under ContentPlaceHolderID.
1. <table class="centerTable">
2. <tr>
3. <td>
4. <table>
6. <tr>
7. <td><span style="color: red; font: bold;"></span>ID </td>
8. <td>
9. <input type="text" id="empID" class="csValue" size="40" />
10. </td>
11. </tr>
12. <tr>
13. <td><span style="color: red; font: bold;"></span>EmployeeName </td>
14. <td>
15. <input type="text" id="empName" class="csValue" size="40" />
16. </td>
17. </tr>
18. <tr>
19. <td><span style="color: red; font: bold;"></span>Salary </td>
20. <td>
21. <input type="text" id="empSalary" class="csValue" size="40" />
22. </td>
23. </tr>
24. <tr>
25. <td><span style="color: red; font: bold;"></span>Address </td>
26. <td>
28. <textarea name="Text1" cols="40" rows="5" id="empAddress" class="csValue"></textarea>
29. </td>
30. </tr>
33. </table>
35. </td>
37. </tr>
38. </table>
39. <table>
40. <tr>
42. <td>
43. <input type="button" value="Clear" id="btnClear" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />
44. </td>
47. <td>
48. <input type="button" value="Submit" id="btnCreate" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />
49. </td>
51. <td>
52. <input type="button" value="Update" id="btnUpdate" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />
53. </td>
54. <td>
55. <input type="button" value="GetData" id="btnGet" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />
56. </td>
58. <td>
59. <input type="button" value="Delete" id="btnDelete" style="background-color: #4CAF50; border: none; color: white; padding: 7px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 2px; cursor: pointer;" />
60. </td>
63. </tr>
67. </table>

Write Business logic for Insert, Update, Delete, Get data functionalities under App.js file.

We are writing some methods for insert, update, delete, and get data and clear data operations.

createEmployee();
UpdateEmployee();
GetEmployeeDetails();
ClearData();
GetEmployeeDetailsByID();

createEmployee() method looks like this.
1. function createEmployee() {
3. $.ajax({
4. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
5. type: "POST",
6. contentType: "application/json;odata=verbose",
7. data: JSON.stringify
8. ({
9. __metadata:
10. {
11. type: "SP.Data.EmployeeListItem"
12. },
13. Title: $("#empName").val(),
14. Salary: $("#empSalary").val(),
15. Address: $("#empAddress").val()
16. }),
17. headers: {
18. "Accept": "application/json;odata=verbose", // return data format
19. "X-RequestDigest": $("#__REQUESTDIGEST").val()
20. },
21. success: function (data, status, xhr) {
22. $("#tblEmployees").empty();
23. GetEmployeeDetails();
24. alert("Successfully Submitted");
25. },
26. error: function (xhr, status, error) {
27. alert(JSON.stringify(error));
28. }
29. });
30. }

UpdateEmployee() method looks like below.
1. function UpdateEmployee() {
3. var id = $("#empID").val();
4. $.ajax({
5. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID
6. type: "POST",
7. data: JSON.stringify
8. ({
9. __metadata:
10. {
11. type: "SP.Data.EmployeeListItem"
12. },
13. Title: $("#empName").val(),
14. Salary: $("#empSalary").val(),
15. Address: $("#empAddress").val()
17. }),
18. headers:
19. {
20. "Accept": "application/json;odata=verbose",
21. "Content-Type": "application/json;odata=verbose",
22. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
23. "IF-MATCH": "*",
24. "X-HTTP-Method": "MERGE"
25. },
26. success: function (data, status, xhr) {
27. $("#tblEmployees").empty();
28. GetEmployeeDetails();
29. alert("Date Updated Successfully");
30. },
31. error: function (xhr, status, error) {
32. alert(JSON.stringify(error));
33. }
34. });
35. }

GetEmployeeDetails() Method looks like below.
1. function GetEmployeeDetails() {
2. $.ajax({
3. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=Title,Salary,Address",
4. type: "GET",
5. headers: { "Accept": "application/json;odata=verbose" }, // return data format
6. success: function (data) {
7. //console.log(data.d.results);
9. for (var i = 0; i < data.d.results.length; i++) {
10. var item = data.d.results[i];
11. $("#tblEmployees").append(item.Title + "\t" + item.Salary + "\t" + item.Address + "<br/>");
12. }
13. },
14. error: function (error) {
15. alert(JSON.stringify(error));
16. }
17. });
21. }

GetEmployeeDetailsByID() method looks like this.
1. function GetEmployeeDetailsByID() {
2. var idValue = $("#empID").val();
5. $.ajax({
6. url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + idValue + "')",
7. type: "GET",
8. headers: { "Accept": "application/json;odata=verbose" }, // return data format
9. success: function (data) {
10. $("#empName").val(data.d.Title);
11. $("#empSalary").val(data.d.Salary);
12. $("#empAddress").val(data.d.Address);
13. $("#tblEmployees").empty();
14. GetEmployeeDetails();
15. },
16. error: function (error) {
17. alert(JSON.stringify(error));
18. }
19. });
20. }

Finally, the App.js code looks like below.

'use strict';
var hostWebUrl;
var appWebUrl;
var listName = "Employee";
ExecuteOrDelayUntilScriptLoaded(initializePage, "sp.js");
function initializePage() {
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
GetEmployeeDetails();
$("#btnCreate").on('click', function () {
createEmployee();
ClearData();
});
$("#btnUpdate").on('click', function () {
UpdateEmployee();
ClearData();
});
$("#btnClear").on('click', function () {
ClearData();
});
$("#btnGet").on('click', function () {
$('#empName').val("");
$("#empSalary").val("");
$("#tblAddress").val("");
$("#tblEmployees").empty();
GetEmployeeDetailsByID();
});
$("#btnDelete").on('click', function () {
deleteEmployee();
ClearData();
});
});
function deleteEmployee() {
var id = $("#empID").val();
$.ajax
({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')",
type: "POST",
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "DELETE"
},
success: function (data, status, xhr) {
$("#tblEmployees").empty();
GetEmployeeDetails();
alert("Successfully record deleted");
},
error: function (xhr, status, error) {
alert(JSON.stringify(error));
}
});
}
function ClearData() {
$("#empID").val("");
$('#empName').val("");
$("#empSalary").val("");
$("#empAddress").val("");
}
function GetEmployeeDetailsByID() {
var idValue = $("#empID").val();
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + idValue + "')",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" }, // return data format
success: function (data) {
$("#empName").val(data.d.Title);
$("#empSalary").val(data.d.Salary);
$("#empAddress").val(data.d.Address);
$("#tblEmployees").empty();
GetEmployeeDetails();
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
function UpdateEmployee() {
var id = $("#empID").val();
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items('" + id + "')", // list item ID
type: "POST",
data: JSON.stringify
({
__metadata:
{
type: "SP.Data.EmployeeListItem"
},
Title: $("#empName").val(),
Salary: $("#empSalary").val(),
Address: $("#empAddress").val()
}),
headers:
{
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"IF-MATCH": "*",
"X-HTTP-Method": "MERGE"
},
success: function (data, status, xhr) {
$("#tblEmployees").empty();
GetEmployeeDetails();
alert("Date Updated Successfully");
},
error: function (xhr, status, error) {
alert(JSON.stringify(error));
}
});
}
function createEmployee() {
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify
({
__metadata:
{
type: "SP.Data.EmployeeListItem"
},
Title: $("#empName").val(),
Salary: $("#empSalary").val(),
Address: $("#empAddress").val()
}),
headers: {
"Accept": "application/json;odata=verbose", // return data format
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data, status, xhr) {
$("#tblEmployees").empty();
GetEmployeeDetails();
alert("Successfully Submitted");
},
error: function (xhr, status, error) {
alert(JSON.stringify(error));
}
});
}
function GetEmployeeDetails() {
$.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items?$select=ID,Title,Salary,Address",
type: "GET",
headers: { "Accept": "application/json;odata=verbose" }, // return data format
success: function (data) {
//console.log(data.d.results);
var table = $("#tblEmployees");
var html = "<thead><tr><th>ID</<th><th>Name</th><th>Salary</th><th>Address</th></tr></thead>";
for (var i = 0; i < data.d.results.length; i++) {
var item = data.d.results[i];
//$("#tblEmployees").append(item.Title + "\t" + item.Salary + "\t" + item.Address + "<br/>");
html += "<tr><td>" + item.ID + "</td><td>" + item.Title + "</td><td>" + item.Salary + "</td><td>" + item.Address + "</td></tr>";
}
table.html(html);
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
function manageQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) {
return singleParam[1];
}
}
}
// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
$('#message').text('Hello ' + user.get_title());
}
// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
alert('Failed to get user name. Error:' + args.get_message());
}
}

Deploy the Project

Right click on the solution and select the "Deploy" option.

SharePoint

Once you deploy it, the system will ask for Ofice 365 credentials. Enter the credentials.
Trust the app like in the below screen.

You can see the User Interface page like below.

Test the application

Here, we will test for "Submit" button.

Enter Employee Name, Salary, and Address values and click on the "Submit" button. Leave the ID text box empty for it is auto-generated.

Once you click on Submit button, the data will be displayed in the below table.
To test Get Data, enter the ID value in text box. Example - I entered 15 in ID text box and clicked on "Get Data" button. The list Item data will be displayed in the respective text boxes.

To test Clear functionality, click on "Clear" button; the data will be cleared for textboxes.

To test "Delete" functionality, enter the ID value and click on Delete button. Example- I have entered ID 15 in text box and clicked on Delete button. List Item ID 15 record will be removed from the list.

Here, we have seen CRUD operations for REST API in SharePoint 2013. I am attaching the code here. Please test and let me know if you have any queries. We will see more on REST APIs in my upcoming article.