Archive for January, 2017

Introduction

The goal of this article is to provide how to perform basic create, read, update, and delete (CRUD) operations on lists and list items with the JSOM. I have explored the CRUD operation using Web Service in my previous article.

Now, I will demo all the operations on list items, including retrieve, create, update and delete on list items.

SharePoint

Retrieve the list items

Retrieve the list items

Here is the main code in detail:

  1. function retriveListItem()
  2. {
  3.     //Get the current context 
  4.     var context = new SP.ClientContext();
  5.     var list = context.get_web().get_lists().getByTitle(‘companyInfo’);
  6.     var caml = new SP.CamlQuery();
  7.     caml.set_viewXml(“<View><Query><OrderBy><FieldRef Name=’Company’ Ascending=’TRUE’ /></OrderBy></Query></View>”);
  8.     returnedItems = list.getItems(caml);
  9.     context.load(returnedItems);
  10.     context.executeQueryAsync(onSucceededCallback, onFailedCallback);
  11. }
  12. function onSucceededCallback(sender, args)
  13. {
  14.     var enumerator = returnedItems.getEnumerator();
  15.     //Formulate HTML from the list items 
  16.     var MainResult = ‘Items in the Divisions list: <br><br>’;
  17.     //Loop through all the items 
  18.     while (enumerator.moveNext())
  19.     {
  20.         var listItem = enumerator.get_current();
  21.         var companyName = listItem.get_item(“Company “);
  22.                 var Industry = listItem.get_item(“Industry “);
  23.                         MainResult += MainResult + companyName + “-“ + Industry + “\n”;
  24.                     }
  25.                     //Display the formulated HTML in the displayDiv element 
  26.                 displayDiv.innerHTML = MainResult;
  27.             }
  28.             //This function fires when the query fails 
  29.         function onFailedCallback(sender, args)
  30.         {
  31.             //Formulate HTML to display details of the error 
  32.             var markup = ‘<p>The request failed: <br>’;
  33.             markup += ‘Message: ‘ + args.get_message() + ‘<br>’;
  34.             //Display the details 
  35.             displayDiv.innerHTML = markup;
  36.         }
  37.    }
  38. }

Create list item

Create list item

Here is the main code in detail:

  1. function AddListItem()
  2. {
  3.     var listTitle = “companyInfo”;
  4.     //Get the current client context
  5.     context = SP.ClientContext.get_current();
  6.     var airportList = context.get_web().get_lists().getByTitle(listTitle);
  7.     //Create a new record
  8.     var listItemCreationInformation = new SP.ListItemCreationInformation();
  9.     var listItem = airportList.addItem(listItemCreationInformation);
  10.     //Set the values
  11.     Var industryVal = $(“#Industry”).val();
  12.     var Company = $(“#Company”).val();
  13.     listItem.set_item(‘Industry’, +industryVal);
  14.     listItem.set_item(‘Company’, +new item);
  15.     listItem.update();
  16.     context.load(listItem);
  17.     context.executeQueryAsync(AddListItemSucceeded, AddListItemFailed);
  18. }
  19. function AddListItemSucceeded()
  20. {
  21.     retriveListItem();
  22. }
  23. function AddListItemFailed(sender, args)
  24. {
  25.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  26. }

Update list item

Update list item

Here is the main code in detail:

  1. function updateListItem()
  2. {
  3.     var ListName = “companyInfo”;
  4.     var context = new SP.ClientContext.get_current(); // the current context is taken by default here
  5.     //you can also create a particular site context as follows
  6.     var lstObject = context.get_web().get_lists().getByTitle(ListName);
  7.     this.lstObjectItem = lstObject.getItemById(1);
  8.     Var industryVal = $(“#Industry”).val();
  9.     var Company = $(“#Company”).val();
  10.     lstObjectItem.set_item(‘Industry’, “+industryVal + ”);
  11.     lstObjectItem.set_item(‘Company’, ”+Company + ”);
  12.     lstObjectItem.update();
  13.         context.executeQueryAsync(Function.createDelegate(thisthis.onSuccess), Function.createDelegate(thisthis.onFailure));
  14. }
  15. function onSuccess()
  16. {
  17.     retriveListItem();
  18. }
  19. function onFailure(sender, args)
  20. {
  21.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  22. }

Delete list item

Delete list item

Here is the main code in detail:

  1. function deleteListItem()
  2. {
  3.     var listTitle = “companyInfo”;
  4.     //get the current client context
  5.     context = SP.ClientContext.get_current();
  6.     var airportList = context.get_web().get_lists().getByTitle(listTitle);
  7.     //get the list item to delete
  8.     var listItem = airportList.getItemById(1);
  9.     //delete the list item
  10.     listItem.deleteObject();
  11.     context.executeQueryAsync(DeleteItemSucceeded, DeleteItemFailed);
  12. }
  13. function DeleteItemSucceeded()
  14. {
  15.     retriveListItem();
  16. }
  17. function DeleteItemFailed(sender, args)
  18. {
  19.     alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
  20. }

Summary

In this article we explored SharePoint JSOM for CRUD operations on list items level. Hope it will be helpful.

Advertisements

Introduction

In this article we will explore SharePoint functionality via Web Services. The goal of this article is to provide how to perform basic create, read, update, and delete (CRUD) operations on lists and list items with the SharePoint Web services.

Now, I will demo all the operations on list items including retrieve, create, update and delete on list items.

list items

Retrieve the list items

Retrieve the list items

Here is the main code in detail:
function retriveListItem()
{
var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \
<soapenv:Body> \
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \
<listName>companyInfo</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name=’Company’ /> \
<FieldRef Name=’Industry’ /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>”;
$.ajax(
{
url: _spPageContextInfo.webAbsoluteUrl + “/apps/_vti_bin/Lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=\”utf-8\””
});
}

function processResult(xData, status)
{
var MainResult = “”;
$(xData.responseXML).find(“z\\:row”).each(function()
{
var companyName = $(this).attr(“ows_Company”);
var Industry = $(this).attr(“ows_Industry”);
MainResult += MainResult + companyName + “-” + Industry + “\n”;
});
$(‘#ResultDiv’).text(MainResult);
}
Create list item

Create list item

Here is the main code in detail:
function createListItem() {
var batch =
“<Batch OnError=\”Continue\”> \
<Method ID=\”1\” Cmd=\”New\”> \
<Field Name=\”Company\”>” + $(“#Company”).val() + “</Field> \
<Field Name=\”Industry\”>” + $(“#Industry”).val() + “</Field> \
</Method> \
ch>”;

var soapEnv =
“<?xml version=\”1.0\” encoding=\”utf-8\”?> \
<soap:Envelope xmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” \
xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” \
xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”> \
<soap:Body> \
<UpdateListItems xmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”> \
<listName>companyInfo</listName> \
<updates> \
” + batch + “</updates> \
</UpdateListItems> \
</soap:Body> \
</soap:Envelope>”;

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl+ “/apps/_vti_bin/Lists.asmx”,
beforeSend: function(xhr) {
xhr.setRequestHeader(“SOAPAction”,
http://schemas.microsoft.com/sharepoint/soap/UpdateListItems&#8221;);
},
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=utf-8”
});
}

function processResult(xData, status) {
retriveListItem();
}
Update list item

Update list item

Here is the main code in detail:
function updateListItem() {

var UpdateNewItemXml =
“<Batch OnError=\”Continue\”> \
<Method ID=\”1\” Cmd=\”Update\”> \
<Field Name=\”ID\”>7</Field>\
<Field Name=\”Industry\”>” + $(“#Industry”).val() + “</Field> \
</Method> \</Batch>”;
var soapEnv =
“<?xml version=\”1.0\” encoding=\”utf-8\”?> \
<soap:Envelope xmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” \
xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” \
xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”> \
<soap:Body> \
<UpdateListItems xmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”> \
<listName>companyInfo</listName> \
<updates> \
” + UpdateNewItemXml + “</updates> \
</UpdateListItems> \
</soap:Body> \
</soap:Envelope>”;

$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + “/apps/_vti_bin/Lists.asmx”,
beforeSend: function (xhr) {
xhr.setRequestHeader(“SOAPAction”,
http://schemas.microsoft.com/sharepoint/soap/UpdateListItems&#8221;);
},
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=utf-8”
});
}
function processResult(xData, status) {
retriveListItem();
}
Delete list item

Delete list item

Here is the main code in detail:
function deleteListItem()
{
var DeleteItemXml = “<Batch OnError=\”Continue\”> \
<Method ID=\”1\” Cmd=\”Delete\”> \
<Field Name=\”ID\”>7</Field>\
<Field Name=\”Company\”>” + $(“#Company”).val() + “</Field> \
</Method> \</Batch>”;
var soapEnv = “<?xml version=\”1.0\” encoding=\”utf-8\”?> \
<soap:Envelope xmlns:xsi=\”http://www.w3.org/2001/XMLSchema-instance\” \
xmlns:xsd=\”http://www.w3.org/2001/XMLSchema\” \
xmlns:soap=\”http://schemas.xmlsoap.org/soap/envelope/\”> \
<soap:Body> \
<UpdateListItems xmlns=\”http://schemas.microsoft.com/sharepoint/soap/\”> \
<listName>companyInfo</listName> \
<updates> \
” + DeleteItemXml + “</updates> \
</UpdateListItems> \
</soap:Body> \
</soap:Envelope>”;
$.ajax(
{
url: _spPageContextInfo.webAbsoluteUrl + “/apps/_vti_bin/Lists.asmx”,
beforeSend: function(xhr)
{
xhr.setRequestHeader(“SOAPAction”, “http://schemas.microsoft.com/sharepoint/soap/UpdateListItems&#8221;);
},
type: “POST”,
dataType: “xml”,
data: soapEnv,
complete: processResult,
contentType: “text/xml; charset=utf-8”
});
}

function processResult(xData, status)
{
retriveListItem();
}
Summary

In this article we exploreed SharePoint Web service for (CRUD) operations on list items level. Hope it will be helpful.