CRUD Operations using Rest API in SharePoint 2013

By -

CRUD Operations using Rest API in SharePoint 2013


Here you can find the some basic operation(Create,Update,Read,Delete) list items in SharePoint 2013 using Rest API. We can use the Content Editor web part to call the script files.


Include Script files in Content Editor:

Go to content editor -> Edit Source -> enter the code like below (code for including the script files)

For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="/sites/<site>/<subsite>/SiteAssets/jquery-1.11.1.min.js"></script> 
<script src="/sites/<site>/<subsite>/SiteAssets/Test.js" type="text/javascript"></script> 
<button onclick="LoadControls()" type="submit">submit</button> 


If you want to include any CSS files then include the below line
<link rel="stylesheet" type="text/css" href="/sites/<site>/<subsite>/SiteAssets/any.css"/>

 Create & Upload your javascript file(s) ("Test.js") in SiteAssets/Any Library. User the below code in Test.js file.


//(Test.js)Read List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls); //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
                var deferred = $.Deferred();
                var serverURL = _spPageContextInfo.webAbsoluteUrl; 
                var ListName = "Sharepoint ListName"; var filterValue = "YourFilterValue";
                var listURL = String.format("{0}/_api/web/lists/getbytitle('"+ListName+"')/items?$select=ColumnName1,ColumnName2,ColumnName3&$filter=Title eq '"+filterValue +"'",serverURL);
                $.ajax({
                                url: listURL,
                                type: "GET",
                                headers: {"Accept": "application/json;odata=verbose"},
                                cache: false,
                                success: function(data){     
                               var Name = data.d.results[0].ColumnName1;  
                                 //var anyColumn= data.d.ColumnName; //this code when filter list with item id
var Age = parseFloat(data.d.results[0].ColumnName2) + 1; //increasing age
alert("Name & Age:" + Name + '&' + Age );
deferred.resolve();
                                },
                                error: function(err){
                                                alert("Request failed :"+JSON.stringify(err));
                                }
                });
                return deferred.promise();
}

//Read all List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
                var deferred = $.Deferred();
                var serverURL = _spPageContextInfo.webAbsoluteUrl; 
                var listURL = String.format("{0}/_api/web/lists/getbytitle('VLATestList')/items?$select=Title, Name, Age",serverURL);
                $.ajax({
             url: listURL,
             type: "GET",
             headers: {
                              "accept":  "application/json; odata=verbose"
                          },
             success: function(data){
                              // Looping multiple items
                              $.each(data.d.results, function(index, item){
                                    alert("Item: " + index);
                                    alert(item.Title); //You will get title here 
                                    alert(item.Name); //You will get name here 
                                    alert(item.Age); //You will get email here 
                                });
                           },
             error: function(err){
                               alert("Error while fetching list items: " + JSON.stringify(err));
                           }

         });              
         return deferred.promise();
}

//Create List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var serverURL = _spPageContextInfo.webAbsoluteUrl;
   var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items",serverURL);
   $.ajax({
         url: listUrl,
         type: "POST",
         data: JSON.stringify({
                                  '__metadata': {'type': 'SP.Data.ListNameListItem' },  //(Ex. if our list name is testList then it should be like 'testListListItem')
                                  'Title': 'ABC',
                                  'Name': 'XYZ',
                                  'Age': 10
                               }),
         headers: {
                      "Accept": "application/json;odata=verbose",
                      "content-type": "application/json; odata=verbose",
                      "X-RequestDigest": $("#__REQUESTDIGEST").val()
                   },
         success: function(data){
                         alert("Item added successfully!");
                       },
         error: function(err){
                           alert("Error while adding item: " + JSON.stringify(err));
                       }

     });                
} 


//Update List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js)  in the Content editor)
function LoadControls()
{
var itemID = 1;

  var serverURL = _spPageContextInfo.webAbsoluteUrl;
                var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/getItemByStringId("+itemID+")",serverURL);
                $.ajax({
                                url: listUrl,
                                type: "POST",
                                data: JSON.stringify(
                                {              
                                                '__metadata': {
                                                                'type': 'SP.Data.ListNameListItem'    //(Ex. if our list name is testList then it should be like 'testListListItem')
                                                },
                                                'ColumnName1': "Our New Value",
                                                'ColumnName2':"Our New Value",
                                }),
                                headers: {
                                                "Content-Type": "application/json;odata=verbose",
                                                "Accept": "application/json;odata=verbose",
                                                "X-RequestDigest": $("#__REQUESTDIGEST").val(),         
                                                "X-Http-Method": "PATCH",
                                                "IF-MATCH": "*"
                                },
                                success: function () {
                                               // window.location = "<New URL to be redirected>";
                                                alert('item updated & Updated ID:' +itemID);
                                },
error: function(err){
                               alert("Error while deleting item: " + JSON.stringify(err));
                           }
                });
                
}


//Delete List item using REST:

//SP.SOD.executeFunc('sp.js', 'SP.ClientContext', LoadControls);  //we can also use this function to load sp.js(which we mentioned(sp.js) in the Content editor)
function LoadControls()
{
var itemID = 7;

  var serverURL = _spPageContextInfo.webAbsoluteUrl;
                var listUrl = String.format("{0}/_api/web/lists/GetByTitle('ListName')/items("+itemID+")",serverURL);
                $.ajax({
             url: listUrl,
             type: "POST",
             headers: {
                              "Accept": "application/json;odata=verbose",
                              "content-type": "application/json; odata=verbose",
                              "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                              "X-HTTP-Method": "DELETE",
                              "If-Match": "*"
                           },
             success: function(data){
                             alert("Item deleted successfully!");
                           },
             error: function(err){
                               alert("Error while deleting item: " + JSON.stringify(err));
                           }

         });                
} 



Here is some other useful links for your reference link1 Link2 Link 3
CRUD operations using JSOM : Click HereClick Here
From this link you can find the difference between CSOM vs JSOM vs SSOM vs REST

Comments

Post a Comment

Popular posts from this blog

Upload Single/Multiple file by using the REST API and jQuery SharePoint 2013

By -
Image
Upload  Single/Multiple  file by using the REST API and jQuery SharePoint 2013 Here you can find how to upload single/multiple file in SharePoint 2013 Library using Rest API. We can use the Content Editor web part to call the script files. Include Script files in Content Editor: Go to content editor -> Edit Source -> enter the code like below (code for including the script files) For 'jquery.min.js' we can either use direct link from online or we can download to our SharePoint library & We can use that. <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> OR use the below code <script src="/ sites/<SiteName>/<Subsite>/SiteAssets/jquery-1.11.1.min.j s"></script> <script src="/ sites/ <SiteName>/<Subsite> /SiteAssets/taskpage.js " type="text/javascript"></script> <script src=" /sites/ <SiteName>/<Subs...
Read more

Add content type to SharePoint List/Library using REST API

By -
Add content type to SharePoint List/Library using REST API Use this below code to add content type to SharePoint Library using REST API. For this you need to use the content type ID. Below function will get the content type ID from content type name & we will pass the content type id to next function which will update content type to list/library. var   varContentTypeName = " Your Content Type name "; var   Listname = " Your List name where you want to add content type "; //This will get the content type ID from content type Name function  getContentTypeID() { var deferred = $.Deferred();     var  isCurrentUserIsApprover = false ; var  serverURL = _spPageContextInfo.webAbsoluteUrl; var  listURL = String.format(" {0}/_api/web/AvailableContentTypes?$select=Name,Id,StringId&$filter=Name eq '"+varContentTypeName+"' ",serverURL); $.ajax({ url: listURL, type: " GET ", async: false, headers:...
Read more

A type named 'SP.Data. could not be resolved by the model error

By -
Image
When we are trying to update task list we will get this error " A type named 'SP.Data. could not be resolved by the model error. When a model is available, each type name must resolve to a valid name must resolve to a a valid type" This happens because there is a space in the list name. To resolve this issue we need to get the exact list name to be used in "SP.Data" 1.Use the below URL in chrome browser <SiteUrl>/_api/web/lists/GetByTitle('List Name')/ For Example:  https://SiteURL/_api/web/lists/GetByTitle('Workflow Tasks')/ Some times in Chrome browser you may get Authentication error. For that first open the list from your Chrome browser & then use the above URL. 2.Find "SP.Data" -> now you will get the list name that you can be used in SP.Data.ListNameListitem
Read more