In this SPServices SharePoint 2013 tutorial, I will explain What is SPServices in SharePoint 2013? How to download and use SPServices in SharePoint 2013/2016 or SharePoint Online. Also, we will see an example using SPServices in SharePoint 2013.
SPServices in SharePoint 2013
SPServices is a jQuery library that abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions that use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client-side and requires no server install.
You can use it with MOSS 2007, SharePoint 2010, and SharePoint 2013 as well as with Office 365 (SharePoint online).
Thanks a lot to the author Sympmarc for sharing this.
To use this js file, you can download the js file from the GitHub URL and save to your SiteAssets library.
Then you can write the below code in a script editor web part in SharePoint 2013/2016/Online. If the reference is correct and SPServices is getting called properly then it should display the site URL properly.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery.SPServices-2014.02.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert($().SPServices.SPGetCurrentSite());
});
</script>The above SPServices SharePoint 2013 example should alert current site URL.
Get Manager name using SPServices in SharePoint
Let us see now, how to populate or retrieve the manager’s name using SPServices in SharePoint 2013/2016 or SharePoint Online.
Retrieve Manager name using SPServices in SharePoint
Recently I got a requirement where I need to retrieve the manager name using the client object model code in SharePoint. Thanks, Sagar for giving the code sample.
Here we will discuss how we can get the Manager name using SPService.
Here we need to give reference to the SPService.js file which you can download from this GitHub URL. And also we need to give the jQuery reference.
Then you can add a script editor web part to the page and add the below code in it.
<script type="text/javascript" src="http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" src="http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery.SPServices-0.4.8.min.js"></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 will save the page, it will display first display the user name and then the manager name in the alert box.
SharePoint autocomplete using SPServices example
This SharePoint SPServices tutorial explains, how we can achieve autocomplete feature for a column in SharePoint 2013 list using jQuery and SPServices. Here I have custom list name as “MyProjectLists” which has one column name as Title and it has data looks like below:
Then I have another list which has two columns one is the default Title column and other one column name is “MyProjectName”. And I want the autocomplete feature should display the values in the MyProjectName column from the above “MyProjectLists” list (Title column).
For this I have added the below piece of code in the SharePoint list new form in a script editor web part.
<script language="javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"
type="text/javascript"></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 will start typing something then the auto complete feature will display the related values.
I hope this spservices autocomplete example helps to implement the autocomplete feature in SharePoint 2013 list column using SPServices in SharePoint 2013.
Show hide div based on user permission using SPServices in SharePoint 2013
Now, let us see how to show and hide various divs (<div> </div>) based on user permission using jQuery and SPServies in SharePoint 2013.
Show/hide div based on user permission using SPServices in SharePoint 2013/2016/Online
Below is the SPServices code which will show or hide div based on user permission using SPServices in SharePoint 2013/2016/Online.
You can write the code inside a script editor web part or inside a content editor web part on the SharePoint web part page.
<script src="http://Demosite/sites/PS/Style%20Library/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://Demosite/sites/PS/Style%20Library/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
var HireGroups = ["Group1 "Group2"];
var difference = [];
var actualgroup = [];
var loggedinUserGroup=[];
$().SPServices({
operation: "GetGroupCollectionFromUser",
userLoginName: $().SPServices.SPGetCurrentUser(),
async: false,
completefunc: function(xData, Status)
{
$(xData.responseXML).find("Group").each(function()
{
loggedinUserGroup.push($(this).attr("Name"));
});
}
});
jQuery.grep(HireGroups, function(el) {
if (jQuery.inArray(el, loggedinUserGroup) == -1) actualgroup.push(el);
});
jQuery.grep(HireGroups, function(el) {
if (jQuery.inArray(el, actualgroup) == -1) difference.push(el);
});
if(difference.length <= 0)
{
$("#divid1").hide();
$("#divid2").hide();
$("#divid3").hide();
$("#OtherTr").hide();
}
else
{
for(i=0;i<=difference.length;i++)
{
//alert(difference[i]);
if(difference[i] == "Group1")
{
$("#divid1").hide();
$("#divid2").hide();
}
if(difference[i] == "Group2")
{
$("#divid3").hide();
$("#OtherTr").hide();
}
}
}
});
</script>This is how we can show or hide div based on user permissions in SharePoint 2013 using SPServices.
SharePoint 2013 Online GetListItems using SPServices
Let us see how to retrieve list items by using SPServices GetListItems method in SharePoint Online office 365. Retrieve list items using SPServices in SharePoint 2013/2016/Online.
In this SPServices SharePoint 2013 example, I have a list that has 5 items and I am trying to displaying those 5 items on a page with a hyperlink. So if someone clicks on the item and S/He should able to see the item.
Edit the page and Put the below code in a script editor web part in SharePoint Online. Read Script Editor web parts in SharePoint 2016/2013/Online.
<script src=”http://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() {
GetAllListItem();
});
function GetAllListItem()
{
$().SPServices({
operation: “GetListItems”,
async: false,
listName: “TestList”,
CAMLViewFields: “<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’ID’ /></ViewFields>”,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode(“z:row”).each(function() {
var link=”https://onlysharepoint2013.sharepoint.com/Lists/TestList/DispForm.aspx?ID=”+$(this).attr(“ows_ID”) ;
var liHtml = “<li><a href='” + link + “‘ target=’_blank’>” + $(this).attr(“ows_Title”) + “</a></li>”;
$(“#TestListItems”).append(liHtml);
});
}
});
}
</script>
<ul id=”TestListItems”/>It will appear like below:
This is how to retrieve list items using SPServices in SharePoint 2013/2016/Online and bind as hyperlink.
Get Current user details using SPServices in SharePoint
This is how to retrieve current user details using SPServices in SharePoint Online or in SharePoint on-premise. We will retrieve username, email, first name, etc using SPServices in SharePoint 2013/2016/Online.
Get Current user details using SPServices in SharePoint
You will be able to retrieve current user details like UserName, Email, FirstName, LastName ID, etc using SPSercices in SharePoint 2013 Online. In the end, find all the properties. You can retrieve single column values as well as you can also able to retrieve multiple column values. See 2nd example of this.
Below is the full code to retrieve current user details using SPServices in SharePoint Online or SharePoint 2013/2016.
<script src="http://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() {
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 src="http://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 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 which you can retrieve:
This is how to retrieve current user details like username, email id, first name, last name, etc using SPServices in SharePoint 2013/2016 or SharePoint Online.
CRUD Operations using SPServices in SharePoint
Let us see, 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:
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:
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:
Get SharePoint List Items using SPServices
Now, let us see 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>");
}*/
}This is how to do insert, update, and delete operation in SharePoint Online using SPServices. The same code will work in SharePoint 2013/2016/2019.
Auto-populate current logged in user name in SharePoint Picker control using SPServices
Let us see how to Auto-populate current logged in username in SharePoint 2010 People Picker control. Here we will do this by using the SPServices js file provided by Codeplex. We will not use any server-side code.
Here my requirement is I have a SharePoint list that has a people picker control in it. I want to show the logged in username or email id there whenever a user tries to add an item to the list. So here we will put the code js code in the Default New Form. For this Open the List -> Customize List -> then Form Web Parts -> then click on Default New Form as shown in the fig below:
This will open the Default New Form in Edit mode. Here you click on Add a Web Part and then add a Content Editor Web Part. Once the web part added, go to format text and then Markup, and then Edit Source as shown in the fig below.
You can download the SPService from the CodePlex URL and also you can download the jQuery required version from jquery website and put it in your site assets library.
In the source editor put the below code:
Auto-populate current logged in user name in SharePoint 2010 People Picker control using SPServices
Method-1
<script language="javascript" type="text/javascript" src="http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="http://win-pfcp2dgt8di/sites/EnjoySharePoint/SiteAssets/jquery.SPServices-0.6.0.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var userName = $().SPServices.SPGetCurrentUser({
fieldName: "Name"
});
$("textarea[title='People Picker']").val(userName);
$("div[title='People Picker']").text(userName);
});
</script>Example-2
<script language="javascript" type="text/javascript" src="/teams/EnjoySharePoint/Style%20Library/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="/teams/EnjoySharePoint/Style%20Library/jquery.SPServices-2014.01.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var userName= $().SPServices.SPGetCurrentUser();
$().SPServices.SPFindPeoplePicker({
peoplePickerDisplayName: "Owner",
valueToSet: userName,
checkNames: true
});
});
</script>This is how to auto-populate current logged in user name in SharePoint Picker control using SPServices.
Get list or document library items using jQuery SPServices in SharePoint 2013
Let us see how to read list or document library items using jQuery and SPServices in SharePoint 2013/2016.
We will discuss how we can read list items and document library items using jquery.SPServices.min.js in SharePoint 2013. Here we need to give reference to the jquery.min.js and jquery.SPServices.min.js files. In my case, I put the files inside the Style Library.
Get List Items using SPServices in SharePoint 2013
Below is the code to read list items from a SharePoint 2013 list using SPServices.
<script type="text/javascript" src="https://Site Coll URL/Style Library/jquery.min.js"> </script>
<script type="text/javascript" src="https://Site Coll URL/Style Library/jquery.SPServices.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
var SOStatusreports=[] $().SPServices({
operation: "GetListItems",
async: false,
listName: "Your-List-Name",
CAMLViewFields: "<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’Attachments’ /><FieldRef Name=’Modified’ /><FieldRef Name=’Link’ /></ViewFields>",
CAMLQueryOptions: "<QueryOptions><IncludeAttachmentUrls>True</IncludeAttachmentUrls></QueryOptions>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function(index) {
SOStatusreports.push($(this).attr("ows_Attachments").replace(';#’,"))
var trimurl= SOStatusreports[index];
itmurl = trimurl.replace(';#’,")
var liHtml = "<li><a href='"+itmurl+"'>" +$(this).attr("ows_Title") + "</a></li>";
$("#MyListItems").append(liHtml);
});
}
});
});
</script>
<ul id="MyListItems"> </ul>Here it will appear in <li> format in hyperlink and once you click on an item it will open the item details page.
Get Documents using SPServices in SharePoint 2013
Below is the code to get documents from a SharePoint 2013 document library using SPServices.
<script type="text/javascript" src="https://Site Coll URL/Style Library/jquery.min.js"> </script>
<script type="text/javascript" src="https://Site Coll URL/Style Library/jquery.SPServices.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "Your-document-library-name",
CAMLViewFields: "<ViewFields><FieldRef Name=’Title’ /><FieldRef Name=’EncodedAbsUrl’/></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li><a href="+$(this).attr("ows_EncodedAbsUrl")+">" + $(this).attr("ows_Title") + "</a></li>";
$("#MyDocItems").append(liHtml);
});
}
});
});
</script>
<ul id="MyDocItems"> </ul>Here it will appear in <li> format in hyperlink and once you click on an item it will open the document.
I hope this SPServices SharePoint 2013 tutorial helps to learn how to read list or document library items using jQuery SPServices in SharePoint 2013.
Get the manager of current SharePoint user using SPServices and GetUserProfileByName
Let us see how we can get manager of current SharePoint user using SPServices and GetUserProfileByName. Learn SPServices for SharePoint 2010/2013/2016 or SharePoint Online.
Get manager of current SharePoint user using SPServices
We get the current user’s manager and put the value into a Person or Group column in a list. This one only works in SharePoint Server 2010 & SharePoint Foundation, because the UserProfileService Web Service is only available there.
The code is relatively straightforward: a call to SPServices to get the results from GetUserProfileByName and then a little more code to poke it into the appropriate Person or Group column. In this case, the Person or Group column is called ‘Manager’.
Below is the code:
<script type="text/javascript" src="../../JSLibrary/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../JSLibrary/jquery.SPServices-0.4.8.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var managerName;
var userName = $().SPServices.SPGetCurrentUser();
$().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);
}
});
var peoplepicker = $("tr:contains('Reporting Manager'):last").find("div[title='People Picker']");
peoplepicker.html(managerName);
});
</script>The available values from GetUserProfileByName in sharepoint 2010 environment are:
- UserProfile_GUID
- AccountName
- FirstName
- LastName
- PreferredName
- WorkPhone
- Office
- Department
- Title
- Manager
- AboutMe
- PersonalSpace
- PictureURL
- UserName
- QuickLinks
- WebSite
- PublicSiteRedirect
- SPS-Dotted-line
- SPS-Peers
- SPS-Responsibility
- SPS-Skills
- SPS-PastProjects
- SPS-Interests
- SPS-School
- SPS-SipAddress
- SPS-Birthday
- SPS-MySiteUpgrade
- SPS-DontSuggestList
- SPS-ProxyAddresses
- SPS-HireDate
- SPS-LastColleagueAdded
- SPS-OWAUrl
- SPS-ResourceAccountName
- SPS-MasterAccountName
- Assistant
- WorkEmail
- CellPhone
- Fax
- HomePhone
This is how to get the manager of current SharePoint user using SPServices and GetUserProfileByName in SharePoint 2010/2013.
SharePoint Cascading dropdown list using SPServices and jQuery
Let us see, how to implement a cascading dropdown list in the SharePoint list using jQuery and SPServices. In the same way, we can also implement a cascading dropdown list in SharePoint 2013 or SharePoint 2016.
SharePoint cascading drop down list
For Implementing Cascading Drop-Down List in SharePoint List using jQuery and SPServices follow the below steps:
First create a country list like below:
Then create a State list with Country as lookup column, the lookup settings will come like below:
Finally the state list should be like below:
Select Default New Form under List tab of newly created List CascadeDropDownList
Add content Editor Web part and Select Edit HTML Source under Format Text Tab
Then Copy and Paste the below Code in HTML Editor
<script language="javascript" src="/JSLibrary/jquery-1.4.2.min.js" type="text/javascript"></script><script language="javascript" src="/JSLibrary/jquery.SPServices-0.5.7.min.js" type="text/javascript"></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 type of concept in OOB forms as for example by selecting Countries respective states or cities. It’s not easier in SharePoint.
Field autocomplete using jQuery and SPServices in SharePoint 2010
Let us see how to implement an autocomplete column for a SharePoint list using SPService and jQuery. The SPAutocomplete lets you provide values for a single line of text column from values in a SharePoint list. The function is highly configurable and can enhance the user experience with forms.
To use this function you have to put it on a new item form. On one of the fields of this new item form, the SPAutoComplete can be implemented and used.
To make this work, create a new blank web part page. Open the page in SharePoint Designer and insert a data view on the page. At the Data Source Library select the list you want to create a new item form for and select Show Data. Select the desired fields to show on the new item form and select Insert Selected Fields as … New Item Form.
Example:
I have a list called Microsoft employees with a Title column with the name of the employees. In another list, I need these names also but I want to suggest the user who adds a new item which employees we already have and how these are spelled.
Follow below steps:
Edit the page in the browser and add a Content Editor Web part, modify the web part and show the Source Editor to add below code some code.
<script language=”javascript” src=”/JS/jquery-1.6.2.min.js” type=”text/javascript”></script><script language=”javascript” src=”/JS/jquery.SPServices-0.7.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$().SPServices.SPAutocomplete({
sourceList: “Microsoft employees”,
sourceColumn: “Employee”,
columnName:”Employee”,
ignoreCase: true,
numChars: 2,
slideDownSpeed: ‘fast’
});
});</script>For all available options to set please take a look at the below link, but for the important ones here.
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPAutocomplete
sourceList: the list to get the suggestions from
sourceColumn: the static column name to get the suggestions from
columnName: the displayname of the field in the new item form
The result will come like below:
This is how to autocomplete fields for SharePoint 2010 using jQuery and SPServices.
You may like the following SharePoint tutorials:
- Export SharePoint list data to excel programmatically using JavaScript and SPServices
- SharePoint CSOM (25+ client object model examples)
- JavaScript – Difference between Var, Let, and Const Keyword
- SharePoint create folder programmatically using CSOM
- Save site as template in SharePoint 2013/2016/Online
- Get sharepoint site template PowerShell + (SharePoint Object Model)
- How to create custom webpart in SharePoint 2013 step by step
- SharePoint list templates
- How to get sharepoint site URL programmatically (CSOM and JSOM)
- Enable Chart Web Part in SharePoint 2013/2016/Online
I hope this will be helpful to know SPServices in SharePoint 2013, how to use SPServices in SharePoint 2013/2016/Online. We discussed below examples in SPServices in SharePoint:
- SPServices in SharePoint 2013
- Get Manager name using SPServices in SharePoint
- SharePoint autocomplete using SPServices example
- Show hide div based on user permission using SPServices in SharePoint 2013
- SharePoint 2013 Online GetListItems using SPServices
- Get Current user details using SPServices in SharePoint
- CRUD Operations using SPServices in SharePoint
- Auto-populate current logged in user name in SharePoint Picker control using SPServices
- Get list or document library items using jQuery SPServices in SharePoint 2013
- Get the manager of current SharePoint user using SPServices and GetUserProfileByName
- SharePoint Cascading dropdown list using SPServices and jQuery
- Field autocomplete using jQuery and SPServices in SharePoint 2010
Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com