CRUD Operation In SharePoint Using REST API

Introduction

 

You can perform basic Create, Read, Update and Delete (CRUD) operations by using the Representational State Transfer (REST) interface provided by SharePoint.

 

REST interface exposes all SharePoint entities and the operations, which are available in the other SharePoint client APIs.

 

One advantage of using REST is that you don't have to add references to any SharePoint libraries or the client assemblies. Instead, you make HTTP requests to the appropriate endpoints to retrieve or update SharePoint entities, such as Webs, lists and list items.  

 

SharePoint REST Service architecture

 

 

Complete basic operation 

Basically, we are doing three operations in SharePoint: line Insert, Update and Delete items in a list. We can access the data by using any technology, which supports REST Web request and Open Data Protocol (OData) syntax. This means that you can do everything just making HTTP requests to the dedicated endpoints. Available HTTP methods are GET, POST, PUT, MERGE and PATCH. The supported data format is ATOM (XML based) or JSON.

• READ- HTTP GET method is used for any kind of read operation.
• CREATE- Any kind of create operation like list, list item, site and so on maps to the HTTP POST method.
• UPDATE- To update existing SharePoint 2013 objects, there are three HTTP methods like PUT, PATCH and MERGE available.
• DELETE- HTTP DELETE method is used to delete any objects in SharePoint 2013. 

Commnands Used to basic Operation

 

URL	Description	HTTP Method
/_api/Web/Lists	Retrieving all the lists in a site and adding new lists	GET, POST
/_api/Web/Lists/GetByTitle('listname')	Getting list details by its title and updating it as well. If anyone changes your list title, your code will break.	GET, POST
/_api/Web/Lists(guid'guid id of your list')	Same as above but changing list title will not affect the code.	GET, POST
/_api/Web/Lists/GetByTitle(' listname ')/Fields	Retrieving all fields associated with a list and add new fields	GET, POST
/_api/Web/Lists/GetByTitle('listname')/ Fields/GetByTitle('fieldname')	Getting details of a field, modifying and deleting it.	GET, PUT, PATCH, MERGE, DELETE
/_api/web/lists/GetByTitle('listname') /GetItemById(itemId)	This endpoint can be used to get, update and delete a single item.	GET, PUT, PATCH, MERGE, DELETE
/_api/Web/Lists/GetByTitle('listname') /Items	Retrieving all the items in a list and adding the new items	GET, POST

 

Example

 

<style>
table, td, th {
    border: 1px solid green;


}

th {
    background-color: green;
    color: white;
}
.textbox {
    padding: 7px;
    width: 50%;
    margin-bottom: 20px;
    margin-top: 10px;
  }
</style>



<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>

    var getLastItemId;
    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http,$window) {

   $scope.showForm = false;

   $scope.createNewUser = function(){
    $scope.showForm = true;

  $scope.buttonText = "Save";
    $scope.companies[0]["Id"] = $scope.companies[0]["ID"];
    $scope.manufactrers[0]["Id"] = $scope.manufactrers[0]["ID"];
    $scope.editCustomerObj = {"CompanyName0":$scope.companies[0],"ManufacturerName0":$scope.manufactrers[0]};
   };

   $scope.editUser = function(custObj){
        $scope.showForm = true;
        $scope.buttonText = "Update";
        $scope.editCustomerObj = {"ID":custObj.ID,"ProductName":custObj.ProductName,"CompanyName0":custObj.CompanyName0,
                                 "ManufacturerName0":custObj.ManufacturerName0,"SalesOrderNumber":custObj.SalesOrderNumber,"PONo":custObj.PONo};


   };

   $scope.CloseDiv = function(){
    $scope.showForm = false;
   };
   getData();
   getCompany();
  getManufacturer();

  function getData()
{
  var _spPageContextInfo={"webAbsoluteUrl":"https://xyz.sharepoint.com/sites/TESTSITE" }
/* GET code*/
        $http({
            method: 'GET',

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('LicensingInformation')/items?$select=ID,CompanyName0/Id,CompanyName0/Company_x0020_Name,ManufacturerName0/Manufacturer_x0020_Name,ManufacturerName0/Id,Attachments,AttachmentFiles,ProductName,PONo,Created,Author/Title,Modified,SalesOrderNumber&$expand=ManufacturerName0/Manufacturer_x0020_Name, CompanyName0/Company_x0020_Name,Author/Id,AttachmentFiles",


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

        }).success(function (data, status, headers, config) {



            $scope.customers = data.d.results;


        }).error(function (data, status, headers, config) {

        });

/* End of GET code*/
}

function getCompany()
{
  var _spPageContextInfo={"webAbsoluteUrl":"https://xyz.sharepoint.com/sites/TESTSITE" }
/* GET code*/
        $http({
            method: 'GET',

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('CompanyDetails')/items?$select=Company_x0020_Name,ID",


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

        }).success(function (data, status, headers, config) {



            $scope.companies = data.d.results;
            $scope.companies.unshift({"ID":"0","Company_x0020_Name":"--Select Company--"});


        }).error(function (data, status, headers, config) {

             alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while loading! " + data;

        });

/* End of GET code*/
}

function getManufacturer()
{
  var _spPageContextInfo={"webAbsoluteUrl":"https://xyz.sharepoint.com/sites/TESTSITE" }
/* GET code*/
        $http({
            method: 'GET',

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Manufacturer Details')/items?$select=Manufacturer_x0020_Name,ID",


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

        }).success(function (data, status, headers, config) {



            $scope.manufactrers = data.d.results;
           $scope.manufactrers.unshift({"ID":"0","Manufacturer_x0020_Name":"--Select Manufacture Name--"});


        }).error(function (data, status, headers, config) {

             alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while loading! " + data;

        });

/* End of GET code*/
}

$scope.Delete=function(custObj)
{
deleteUser = $window.confirm('Are you sure you want to delete this item ?');
if(deleteUser){
var urlvalueDelete= _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('LicensingInformation')/items("+custObj.ID+")";
 var digest = document.getElementById('__REQUESTDIGEST').value;
        $http({
            method: 'POST',
            url: urlvalueDelete,
            headers: {'X-RequestDigest': digest, 'Content-Type': 'application/json;odata=verbose',
            'Accept': 'application/json;odata=verbose',"X-HTTP-Method": "DELETE","If-Match": "*"}
        }).success(function (data, status, headers, config) {


            $scope.customers = data.d.results;
            getData();
        }).error(function (data, status, headers, config) {
            alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while Deleting! " + data;
              getData();
        });
              getData();
    }
     getData();
}

 function getLastItemID()
{
  var _spPageContextInfo={"webAbsoluteUrl":"https://xyz.sharepoint.com/sites/TESTSITE" }
/* GET code*/
        $http({
            method: 'GET',

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('LicensingInformation')/items?$top=1&$orderby=Id%20desc",


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

        }).success(function (data, status, headers, config) {

            var lnt = data.d.results.length;

             for(var i=0; i<lnt; i++ ){


             getLastItemId = data.d.results[i].ID;


            documentUpload(getLastItemId);
}

        }).error(function (data, status, headers, config) {

             alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while loading! " + data;

        });

/* End of GET code*/
}

function documentUpload(lastItemId) {


  var copyID=lastItemId;

        var _spPageContextInfo={"webAbsoluteUrl":"https://xyz.sharepoint.com/sites/TESTSITE" }




                    //Reading the Uploadef file values
                    var parts = document.getElementById("fileToUpload").value.split("\\");
                    var filename = parts[parts.length - 1];
                    var file = document.getElementById("fileToUpload").files[0];
                    //TestList - is our Listname
                    //1 - is our List Item ID
                    //filename - File Name of the attachment
                    //file - file data


                    uploadFileSP("LicensingInformation",copyID, filename, file);




        }
        function getFileBuffer(file) {
            var deferred = $.Deferred();
            var reader = new FileReader();
            reader.onload = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }
            reader.readAsArrayBuffer(file);
            return deferred.promise();
        }
        function uploadFileSP(listName, id, fileName, file) {
            var deferred = $.Deferred();
            getFileBuffer(file).then(
              function (buffer) {
                  var bytes = new Uint8Array(buffer);
                  var content = new SP.Base64EncodedByteArray();
                  var queryUrl = _spPageContextInfo.webAbsoluteUrl  + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles";
                  $.ajax({
                      url: queryUrl,
                      type: "POST",
                      processData: false,
                      contentType: "application/json;odata=verbose",
                      data: buffer,
                      headers: {
                          "accept": "application/json;odata=verbose",
                          "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                          "content-length": buffer.byteLength
                      }, success: onQuerySucess,
                      error: onQueryFailure
                  });
              },
                function (err) {
                    deferred.reject(err);
                });
            return deferred.promise();
        }

        function onQuerySucess() {
            alert('Item Added Successfully');
            getData() ;

        }

        function onQueryFailure(error) {
            alert("Failure:" + error.status + "," + error.statusText);
        }

function updateFileSP(listName, id, fileName, file) {
            var deferred = $.Deferred();
            getFileBuffer(file).then(
              function (buffer) {
                  var bytes = new Uint8Array(buffer);
                  var content = new SP.Base64EncodedByteArray();
                  var queryUrl = _spPageContextInfo.webAbsoluteUrl  + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')";
                  $.ajax({
                      url: queryUrl,
                      type: "POST",
                      processData: false,
                      contentType: "application/json;odata=verbose",
                      data: buffer,
                      headers: {
                          "accept": "application/json;odata=verbose",
                          "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                          "content-length": buffer.byteLength
                      }, success: onQuerySucess,
                      error: onQueryFailure
                  });
              },
                function (err) {
                    deferred.reject(err);
                });
            return deferred.promise();
        }

        function onQuerySucess() {
            alert('Item Update Successfully');
            getData() ;

        }

        function onQueryFailure(error) {
            alert("Failure:" + error.status + "," + error.statusText);
        }



$scope.Save = function(custObj){

    var urlValue = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('LicensingInformation')/items";
    var digest = document.getElementById('__REQUESTDIGEST').value;

    var newCustObj = {'PONo':custObj.PONo,'SalesOrderNumber':custObj.SalesOrderNumber,'ProductName':custObj.ProductName};
     if(custObj.CompanyName0)
      newCustObj.CompanyName0Id=custObj.CompanyName0.Id;

  if(custObj.ManufacturerName0)
      newCustObj.ManufacturerName0Id = custObj.ManufacturerName0.Id;


    newCustObj.__metadata = { "type": 'SP.Data.InfoPathListListItem' };
    if($scope.buttonText == 'Save'){
      alert('url : ' + urlValue);
        $http({
            method: 'POST',
            url: urlValue,
            data: newCustObj,
            headers: {'X-RequestDigest': digest, 'Content-Type': 'application/json;odata=verbose',
            'Accept': 'application/json;odata=verbose'}
        }).success(function (data, status, headers, config) {

            $scope.customers = data.d.results;
            getData() ;
            getLastItemID();
           ;
        }).error(function (data, status, headers, config) {
            alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while adding! " + data;
        });
    }
    else{

        var urlvalueUpdate= _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('LicensingInformation')/items("+custObj.ID+")";
        $http({
            method: 'POST',
            url: urlvalueUpdate,
            data: newCustObj,
            headers: {'X-RequestDigest': digest, 'Content-Type': 'application/json;odata=verbose',
            'Accept': 'application/json;odata=verbose',"X-HTTP-Method": "MERGE","If-Match": "*"}
        }).success(function (data, status, headers, config) {
            if(true){
              documentUpload(custObj.ID);
            }

            $scope.customers = data.d.results;
            alert('Item Update Successfully');
            getData() ;
        }).error(function (data, status, headers, config) {
            alert('error :\n' + JSON.stringify(data));
             $scope.error = "An error has occured while Updating! " + data;
        });

    }
};
$scope.uploadAttachment = function(fileElement, customerID){
  var parts = fileElement.value.split("\\");
  var filename = parts[parts.length - 1];
  var file = fileElement.files[0];
  updateFileSP("LicensingInformation",customerID, filename, file);
}
    });

</script>


<h1><b> Licensing Information!!</b></h1>

<div ng-app="SharePointAngApp" class="row">
    <div ng-controller="spCustomerController" class="span10">


   <input type="text" class="textbox" ng-model="q" placeholder="Search Items">


        <table class="table table-condensed table-hover">
<thead>
            <tr>
                <th>Company Name</th>
                <th>Manufacturer Name</th>
                <th>Product Name</th>
                <th>Sales Order Number</th>
                <th>PO No</th>

                <th>Created</th>
                <th>Created By</th>
                <th>Modified</th>
                <th>Blob Items</th>
                <th style="width:20px;"> </th>
                <th style="width:40px;"> </th>


               </tr>   </thead>

           <tbody> <tr ng-repeat="customer in customers | filter:q">
                 <td>{{customer.CompanyName0.Company_x0020_Name}}</td>
                <td>{{customer.ManufacturerName0.Manufacturer_x0020_Name}}</td>
                <td>{{customer.ProductName}}</td>

                <td>{{customer.SalesOrderNumber}}</td>
                <td>{{customer.PONo}}</td>

                <td>{{customer.Created}}</td>

                <td>{{customer.Author.Title}}</td>

                <td>{{customer.Modified}}</td>

                <td><a href="{{customer.AttachmentFiles.results[0].ServerRelativeUrl}}">{{customer.AttachmentFiles.results[0].FileName}}</a><input type="file" name="fileToUpload" id="fileToUpload{{$index}}" onchange="angular.element(this).scope().uploadAttachment(this, {{customer.ID}})" > </td>


                <td><b><a ng-click="editUser(customer)" >Edit</a></b></td>
                <td><b><a ng-click="Delete(customer)" >Delete</a><b></td></tbody>






                </tr>



        </table>
       <b><a ng-click="createNewUser()" class="btn btn-small">Create New</a> </b>



<div ng-show="showForm"  align="left">
        <p class="divHead"></p>
        <table>
            <tr>
                <td><b>Company Name</b>

              </td>
                <td>
                     <select ng-model="editCustomerObj.CompanyName0.Id" ng-options="company.ID as company.Company_x0020_Name for company in companies">
             </select>

                </td>
            </tr>
            <tr>
                <td><b>Manufacturer Name</b></td>
                <td>
            <select ng-model="editCustomerObj.ManufacturerName0.Id" ng-options="manufacturer.ID as manufacturer.Manufacturer_x0020_Name for manufacturer in manufactrers">

             </select>
                </td>
            </tr>
            <tr>
                <td><b>Product Name</b></td>
                <td>
                    <input type="text" ng-model="editCustomerObj.ProductName" />
                </td>
            </tr>
            <tr  >
                <td><b>Sales Order Number</b></td>
                <td>
                    <input type="text" ng-model="editCustomerObj.SalesOrderNumber" />
                </td>
            </tr>
              <tr>
                <td><b>PO No</b></td>
                <td>
                    <input type="text" ng-model="editCustomerObj.PONo" />
                </td>
            </tr>
             <tr>
                <td><b>Blob Items</b></td>
                <td>
                    <input type="file" name="fileToUpload" id="fileToUpload">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="btnAdd" value="{{buttonText}}" ng-click="Save(editCustomerObj)"  />
                   <input type="button" class="btnCancel" value="Close" ng-click="CloseDiv()" />
                </td>

            </tr>
        </table>
    </div>
</div>
</div>

Here, I have included AngularJS to insert and update the item in the list, using JSON. When you are clicking Add New button, the second image will be shown in the screen and you are able to add the document inside the document library through JSON and AngularJS.