SPServices is a powerful jQuery library that simplifies working with SharePoint’s web services. Created by Marc D Anderson, SPServices has become very helpful for SharePoint developers looking to work with SharePoint without complex server-side code. In this tutorial, I will explain what SPServices is and how it works. I will also show you some examples of using SPServices in SharePoint.
What is SPServices in SharePoint?
SPServices is a jQuery library that uses SharePoint’s Web Services to retrieve data. It acts as a wrapper around SharePoint’s native SOAP-based web services, making it significantly easier to interact with SharePoint data using JavaScript. This library is particularly valuable for customizing SharePoint forms, retrieving list data, and creating dynamic user interfaces without server-side code.
The advantage of using SPServices is that it works entirely on the browser.
How to Use SPServices in SharePoint?
To begin using SPServices, you need to include jQuery and the SPServices library in your SharePoint page:
You can download the SPServices from GitHub, or you can also use the below CDN:
https://cdnjs.com/libraries/jquery.SPServicesSo, to work with SPServices, you should include jQuery and the SPServices library like below:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>You can also download the SPServices library and upload it to a SharePoint library; then, you can provide the path like above.
To test whether SPServices is working on the SharePoint site, you can add the code below using a script editor web part.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert($().SPServices.SPGetCurrentSite());
});
</script>This code should display the current SharePoint site URL.
SharePoint SPServices Examples
Now, let me show you some examples of using SPServices in SharePoint.
Example 1: Read SharePoint List Data
One of the most common uses of SPServices is retrieving and displaying data from SharePoint lists. Here’s a basic example of how to query a SharePoint list using SPServices
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Body' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var title = $(this).attr("ows_Title");
var body = $(this).attr("ows_Body");
$("#results").append("<h3>" + title + "</h3><p>" + body + "</p>");
});
}
});
});
</script>This example retrieves data from an Announcements list using CAML queries, then displays the title and body of each announcement on the page.
Example 2: Auto-Fill Form Fields
SPServices is excellent for enhancing SharePoint forms. One popular use case is automatically filling form fields based on user information:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPGetCurrentUser({
fieldNames: ["Title", "EMail", "Department"],
completefunc: function(data) {
$("#userNameField").val(data.Title);
$("#emailField").val(data.EMail);
$("#departmentField").val(data.Department);
}
});
});
</script>This script automatically fills fields based on the current user’s information, which can save time and reduce errors when users are completing forms.
Example 3: Get the Manager’s name using SPServices in SharePoint
You can use SPServices to get the manager’s name of the logged-in user in SharePoint.
Below is the code you can add in a script editor web part.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript">
$(document).ready(function () {
var managerName;
var userName = $().SPServices.SPGetCurrentUser();
alert(userName);
$().SPServices({
operation: "GetUserProfileByName",
async: false,
AccountName: userName,
completefunc: function (xData, Status) {
managerName = $(xData.responseXML).text();
var managerLength = managerName.length;
var indexofManager = managerName.indexOf("Manager");
managerName = managerName.substring(indexofManager + 13, managerLength);
var indexOffalse = managerName.indexOf("false");
managerName = managerName.substring(0, indexOffalse);
}
});
alert(managerName);
});
</script>Once you save the page, the alert box will display the user’s name and then the manager’s name.
Example 4: SharePoint Autocomplete using SPServices
You can also use the SPServices library to implement auto-complete in SharePoint.
Here I have a custom list named “MyProjectLists” which has one column named “Title” and it has data looks like below:
Then I have another list with two columns: the default Title column and the MyProjectName column. I want the autocomplete feature to display the values in the MyProjectName column from the above “MyProjectLists” list (Title column).
For this, I have added the code below to the SharePoint list’s new form in a script editor web part.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript">
$(document).ready(function () {
$().SPServices.SPAutocomplete({
sourceList: "MyProjectLists",
sourceColumn: "Title",
columnName: "MyProjectName",
ignoreCase: true,
numChars: 2,
slideDownSpeed: 'fast'
});
});</script>Now, if I start typing something, the auto-complete feature will display the related values.
This way, you can implement the autocomplete feature in SharePoint using SPServices.
Example 5: Get Current User Details using SPServices in SharePoint
By using SPServices in SharePoint, you can also get the current user details such as: UserName, Email, FirstName, LastName, ID, etc
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert($().SPServices.SPGetCurrentSite());
alert($().SPServices.SPGetCurrentUser());
alert($().SPServices.SPGetCurrentUser(
{
fieldName:"ID",
debug:false
}
));
alert($().SPServices.SPGetCurrentUser(
{
fieldName:"UserName",
debug:false
}
));
alert($().SPServices.SPGetCurrentUser(
{
fieldName:"FirstName",
debug:false
}
));
});
</script>Get multiple column values:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var userdetails= $().SPServices.SPGetCurrentUser(
{
fieldNames:[“ID","EMail","UserName","FirstName","LastName"],
debug:false
}
);
alert(userdetails.ID);
alert(userdetails.EMail);
alert(userdetails.UserName);
alert(userdetails.FirstName);
alert(userdetails.LastName);
});
</script>Below are the user properties that you can retrieve:
This is how to retrieve current user details like username, email ID, first name, last name, etc, using SPServices in SharePoint.
Example 6: Add an Item to a SharePoint List using SPServices
You can add an item to a SharePoint list using SPServices.
Below is the complete code.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></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 as below:
Example 7: 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 the item ID using SPServices in SharePoint.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></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:
Example 8: Delete A SharePoint List Item using SPServices
Like editing an item, deleting an item also requires the list item ID. Below is the code to delete a list item using SPServices in SharePoint Online.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></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 executing this code, the last item got deleted from the SharePoint list, as shown below:
Example 9: SharePoint Cascading Dropdown List using SPServices and jQuery
Now, I will show you how to implement a cascading dropdown list in SharePoint using SPServices.
Here, I have two lists:
- Country
- State
First, create a country list like below:
Then create a State list with Country as a lookup column, the lookup settings will come like below:
Finally the state list should be like below:
Select Default New Form under the List tab of the newly created List CascadeDropDownList
Add Content Editor Web part and select Edit HTML Source under the Format Text Tab
Then Copy and Paste the below Code in the HTML Editor
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.com/libraries/jquery.SPServices"></script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices.SPCascadeDropdowns({
relationshipList: "State",
relationshipListParentColumn: "Country",
relationshipListChildColumn: "Title",
relationshipListSortColumn: "ID",
parentColumn: "Country",
childColumn: "State",
promptText: "Choose State…",
debug: true
});
});</script>After this, it will appear like below:
In some scenarios, we need to implement a cascading concept in OOB forms, such as selecting Countries’ respective states or cities. It’s not easier in SharePoint.
I hope you now understand what SPServices is in SharePoint and how to use it in SharePoint Online and SharePoint On-Premises versions. Finally, I have also provided a few examples of using SPServices in SharePoint.
You may also like:
- Redirect SharePoint Site To New URL
- Embed PowerPoint Slides in SharePoint Site
- How to Share a SharePoint Online Site
- Customize SharePoint site page
- How to Change SharePoint Site Logo
After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.
