SharePoint4us

Hello,

In this post we are going learn how to do CRUD(Create, Read, Update and Delete) operations using SharePoint2013 REST API .


Before learning how to write the script, you should know where to write the script?

This depends on your requirement, lets suppose if you are implementing a visual web part then you can write the script on your user control( .ascx file) in script tag as shown below. You can write your script in a function and then call that function wherever you want.

In the below script I am calling the script on document ready function

<script type="text\javascript">

$(document).ready( function(){

             // Calling function 
             GetListItembyID();

});

function GetListItembyID(){

            //write your script to get the list item based on id here

}

</script>

Or else you can write the script in a Content Editor web part like as mentioned above.


Reading list item based on item id

Here is the following scenario, I just want to fetch some data based on item id from a list.

In this case we need to use GET http method to fetch/read items. Following are the sample snippets which I used to fetch some of the columns(Title, Name, Email ) information of the item having ID as 1 from the list titled EMPMaster.


$.ajax({
              url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EMPMaster')/getitembyid('1')/?$select=Title, Name, Email",
              type: "GET",
              headers: {
                               "accept":  "application/json; odata=verbose"
                            },
              success: function(data){
                                alert(data.d.Title); //You will get title here
                                alert(data.d.Name); //You will get name here
                                alert(data.d.Email); //You will get email here
                            },
              error: function(err){
                                alert("Error while fetching list item: " + JSON.stringify(err));
                            }

          });


Reading multiple list items

In the below snippet I used to fetch columns(Title, Name, Email ) information of all items from the list titled EMPMaster.

$.ajax({
              url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EMPMaster')/items?$select=Title, Name, Email",
              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.Email); //You will get email here
                                 });
                            },
              error: function(err){
                                alert("Error while fetching list items: " + JSON.stringify(err));
                            }

          });



Inserting list item

In the below snippet I have added list item having columns(Title, Name, Email ) values as "ABC", "XYZ", xyz@abc.com in to the list titled EMPMaster.

$.ajax({
              url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EMPMaster')/items",
              type: "POST",
              success: function(data){
                              alert("Item added successfully!");
                            },
              error: function(err){
                                alert("Error while adding item: " + JSON.stringify(err));
                            }

          });



Updating list item based on item id

In the below snippet I have updated list item column "Name" value to "XYZ1" having id as 1  in the list titled EMPMaster.

$.ajax({
              url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EMPMaster')/items(1)",
              type: "POST",
              success: function(data){
                              alert("Item updated successfully!");
                            },
              error: function(err){
                                alert("Error while updating item: " + JSON.stringify(err));
                            }

          });



Deleting list item based on item id

In the below snippet I have deleted list item having id as 1 in the list titled EMPMaster.

$.ajax({
              url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('EMPMaster')/items(1)",
              type: "POST",
              success: function(data){
                              alert("Item deleted successfully!");
                            },
              error: function(err){
                                alert("Error while deleting item: " + JSON.stringify(err));
                            }

          });


So thats it for now. Hope you learn some basic operations using REST apis in SharePoint 2013.

Happy coding. Cheers!!! :)

Hi Friends,

Thanks for visiting to my blog .

Today am going to explain about ECMAScript Client Object Model (JSOM) in SharePoint 2013,2010

ECMAScript :

ECMAScript is a java script based client side scripting language which is now supported in SharePoint 2010 and can be used to access Client Object Model.

Background

• SharePoint Client Managed Object Model is a SharePoint API that runs on the client side. 
• It converts the API calls made by the application, into XML request and sends it to the SharePoint server. On the server, the XML request is handled by a service called Client.svc where it translates the XML request in to appropriate Object Model calls (SharePoint Server Object Model) and gets the results. 
• After getting the results, Client.svc translates them into JavaScript Object Notation (JSON) and sends back to the Client Managed Object Model. On the client side the JSON response is translated into ECMAScript objects for ECMAScript.

This is just a breif description of our ECMA Script . In  our next articles we will see the examples of ECMAScript.