CRUD operations in SharePoint hosted apps using REST API

Posted on

SharePoint hosted apps can be developed using only Javascript, but still we have 2 options and they’re Javascript Object Model (JSOM) for the SharePoint and SharePoint client REST API. This post explains how to perform CRUD operations in a list using REST API.

The following code is written in ‘Revealing Module Pattern’ using the self invoking function.  A simple built it Contact List is used in this sample.

   1: var Qbe = window.Qbe || {};

   2: Qbe.RestContacts;

   3:  

   4: Qbe.RestContactsCRUD = Qbe.RestContactsCRUD || {};

   5:  

   6: Qbe.RestContactsCRUD = function () {

   7:     

   8:     createItem = function(newContact) {

   9:         $.ajax({

  10:             url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/items",

  11:             type: "POST",

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

  13:             data: JSON.stringify(

  14:                 {

  15:                     '__metadata': {

  16:                         'type': 'SP.Data.ContactListListItem'

  17:                     },

  18:                     'Title': newContact.fname,

  19:                     'FirstName': newContact.lname,

  20:                     'WorkPhone': newContact.phone.toString()

  21:                 }),

  22:             headers: {

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

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

  25:             },

  26:  

  27:             success: function () {

  28:                 readAllContacts();

  29:             },

  30:  

  31:             error: function (err) {

  32:                 alert(JSON.stringify(err));

  33:             }

  34:         });

  35:     },

  36:  

  37:     updateItem = function (updatedContact) {

  38:         $.ajax({

  39:             url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/" +

  40:                 "getItemByStringId('" + updatedContact.id.toString() + "')",

  41:             type: "POST",

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

  43:             data: JSON.stringify(

  44:                 {

  45:                     '__metadata': {

  46:                         'type': 'SP.Data.ContactListListItem'

  47:                     },

  48:                     'Title': updatedContact.fname,

  49:                     'FirstName': updatedContact.lname,

  50:                     'WorkPhone': updatedContact.phone.toString()

  51:                 }),

  52:             headers: {

  53:                 "accept": "application/json;odata=verbose",

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

  55:                 "IF-MATCH": "*",

  56:                 "X-HTTP-Method" : "PATCH"

  57:             },

  58:  

  59:             success: function (data) {

  60:                 readAllContacts();

  61:             },

  62:             error: function (err) {

  63:                 alert(JSON.stringify(err));

  64:             }

  65:  

  66:         })

  67:     },

  68:  

  69:     deleteItem = function (id) {

  70:         $.ajax({

  71:             url : _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/" +

  72:                 "getItemByStringId('" + id.toString() + "')",

  73:             type: "DELETE",

  74:             headers: {

  75:                 "accept": "application/json;odata=verbose",

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

  77:                 "IF-MATCH": "*"

  78:             },

  79:             success: function () {

  80:                 readAllContacts();

  81:             },

  82:             error: function (err) {

  83:                 alert(JSON.stringify(err));

  84:             }

  85:         })

  86:     },

  87:  

  88:     readAllContacts = function () {

  89:         $.ajax(

  90:             {

  91:                 url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/getByTitle('ContactList')/items" +

  92:                     "?$select=Id,FirstName,Title,WorkPhone" +

  93:                     "&$orderby=ID",

  94:                 type: "GET",

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

  96:                 headers: {

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

  98:                 },

  99:                 success: function (data) {

 100:                     var html = [];

 101:                     html.push("<table><thead><tr><th>ID</th><th>First Name</th>");

 102:                     html.push("<th>Last Name</th><th>Phone</th><th>ETag</th></tr></thead>");

 103:  

 104:                     var result = data.d.results;

 105:  

 106:                     for(var i = 0; i < result.length; i++)  {

 107:                         html.push("<tr><td>");

 108:                         html.push(result[i].ID);

 109:                         html.push("</td><td>");

 110:                         html.push(result[i].FirstName);

 111:                         html.push("</td><td>");

 112:                         html.push(result[i].Title);

 113:                         html.push("</td><td>");

 114:                         html.push(result[i].WorkPhone);

 115:                         html.push("</td><td>");

 116:                         html.push(result[i].__metadata.etag);

 117:                         html.push("</td><td>");

 118:                     }

 119:                     html.push("</table>");

 120:                     $('#displayDiv').html(html.join(''));

 121:                 },

 122:                 error: function (err) {

 123:                     alert(JSON.stringify(err));

 124:                 }

 125:             })

 126:     },

 127:  

 128:     success = function () {

 129:         readAllContacts();

 130:     },

 131:  

 132:     error = function (sender, args) {

 133:         alert(args.get_message());

 134:     }

 135:  

 136:     return {

 137:         createContactREST: createItem,

 138:         updateContactREST: updateItem,

 139:         deleteContactREST: deleteItem,

 140:         displayContactREST: readAllContacts

 141:     }

 142: }();

Advertisements