Add, Update and Delete Item from SharePoint List using SPServices

This SharePoint SPServices tutorial, we will discuss how to do crud operation using SPServices. We will see how to insert, update and delete items from the SharePoint list using SPServices.js in SharePoint Online in Office 365 or SharePoint 2013/2016.

Add an item to a SharePoint list item using SPServies

Below is the code to add an item to a SharePoint list item using SPServies. You can add the below code inside a script editor web part or in a content editor web part in SharePoint Online/2013/2016 web part page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
var title="My Test Item";
AddNewListItem(title);
});
function AddNewListItem(title)
{
$().SPServices({
operation:"UpdateListItems",
async: false,
batchCmd: "New",
listName: "TestList",
valuepairs:[["Title",title]],
completefunc:function(xData, Status)
{
alert("Item inserted");
}
});
}
</script>

The SharePoint list item will appear like below:

spservices insert list item

Update SharePoint List Item using SPServices

We can update an item using the SharePoint list item id. Below is the code to update a list item based on item id using SPServices in SharePoint Online or SharePoint 2013/2016.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
var title="My Test Item – Updated";
UpdateListItem(title);
});
function UpdateListItem(title)
{
$().SPServices({
operation:"UpdateListItems",
async: false,
batchCmd: "Update",
listName: "TestList",
ID: 3,
valuepairs:[["Title",title]],
completefunc:function(xData, Status)
{
alert("Item Updated");
}
});
}
</script>

The list item title will be updated like below:

spservices update list item

Delete SharePoint List Item using SPServices

Like Edit an item, to delete an item also we need the list item id. Below is the code to delete a list item using SPServices in SharePoint Online or SharePoint 2013/2016.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
DeleteListItem();
});
function DeleteListItem()
{
$().SPServices({
operation:"UpdateListItems",
async: false,
batchCmd: "Delete",
listName: "TestList",
ID: 3,
completefunc:function(xData, Status)
{
alert("Item Deleted");
}
});
}
</script>

We have three items and after this code execute the last item got deleted from the SharePoint list like below:

spservices delete list item

Get SharePoint List Items using SPServices

This SharePoint Online tutorial explains how to retrieve list items using SPServices in SharePoint 2013 Online Office 365.

We had a requirement to have the Tools Menu display icon and respective icon for office 365 projects.

#rightmenu is the DIV which is specified in master page. Please find the below code for the same. I hope below code will be useful.

Create .js file and place the below code and provide the .js file reference in the master page or content editor webpart wherever you want to use the code.

$('#rightmenu').on('click', function(){
$('#rightmenu table').fadeToggle();

});

var method = "GetListItems";
var list = "TestList";
var fieldsToRead = "<ViewFields>" +
"<FieldRef Name='Title' />" +
"<FieldRef Name='LinkClm' />" +
"<FieldRef Name='IconClm' />" +
"<FieldRef Name='PositionClm' />" +
"<FieldRef Name='OrderClm' />" +

"</ViewFields>";
var query = "<Query>" +
"<Where>" +
"<Neq>" +
"<FieldRef Name='ID'/><Value Type='Number'>0</Value>" +
"</Neq>" +
"</Where>" +
"<OrderBy>" +
"<FieldRef Name='OrderClm' Ascending='TRUE'/>" +
"</OrderBy>" +
"</Query>";

$().SPServices({

operation: method,
async: false, //if you set this to true, you may get faster performance, but your order may not be accurate.
listName: list,
CAMLViewFields: fieldsToRead,
CAMLQuery: query,
//this basically means "do the following code when the call is complete"
completefunc: function (xData, Status) {
//this code iterates through every row of data returned from the web service call
$(xData.responseXML).SPFilterNode("z:row").each(function() {

var name = ($(this).attr("ows_Title"));
var link = ($(this).attr("ows_Link")).split(",")[0];
var iconURL = ($(this).attr("ows_Icon")).split(",")[0];
var position=($(this).attr("ows_Position"));
//alert($(this).attr("ows_Position"));

AddRowToTable(name,link,iconURL,position );

});
}
});
});
function AddRowToTable(name,link,iconURL,position)
{

var max = 2;
$(document).ready(function(){
var tr = $("#rightmenu table tr:last");
if(!tr.length || tr.find("td").length >= max)
$("#rightmenu table").append("<tr>");
$("#rightmenu table tr:last").append("<td><a href='" + link + "' target='_blank'><img src='" + iconURL+ "'></a></td>");

});
/*if(position === "Left")
{
$("#LeftDIV").append("<tr align='middle'>" +"<td><a href='" + link + "' target='_blank'><img src='" + iconURL+ "'></a></td>" +"</tr>");
}
if(position === "Right")
{
$("#RightDIV").append("<tr align='middle'>" +"<td><a href='" + link + "' target='_blank'><img src='" + iconURL+ "'></a></td>" +
"</tr>");
}*/

}

You may like following SharePoint tutorials:

Hope this SharePoint SPServices tutorial explains how to do insert, update and delete operation in SharePoint Online using SPServices. The same code will work in SharePoint 2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>