Contact Search using SPServices


Recently I have been working with a client to develop a webpart to search all the contacts list in a site. Here are the limitations with this requirement

  • This should be implemented in #Office365 environment and also compatible with any SharePoint 2010.
  • Client may have many contact lists but all inheriting from contact list template

Since the webpart is implemented on Office365, Sandboxed webparts or Content Editor Webpart is the only option. I am not a big fan of Sandboxed webparts. This blog explains to how implement this using CEWP and #SPServices.

Why #SPServices: SPServices is a SOAP based open source Jquery library from Marc Anderson  which abstracts SharePoint web services and makes the life easy for the developers.

This is how the webpart is going to look finally.

Capture

Here is the code:

HTML for Search Box:

<table><tbody><tr><td align="right">First Name:</td>
<td align="left"><input id="firstname" type="text"/></td></tr>
<tr><td align="right">Mobile:</td>
<td align="left"><input id="mobile" type="text"/></td></tr>
<tr><td align="right">Address:</td>
<td align="left"><input id="address" type="text"/></td></tr></tbody></table>
<p><input id="sb" type="button" value="Search"/> </p>
<ul id="searchResults"></ul>

Generate SPQuery and pass to the function: 

Before executing this make sure references are added to Jquery and SPServices

$(document).ready(function () {
$("#sb").click(function(){
$("#searchResults").empty();
var query = "";
var key = "";

//Build Query from input
if($("#firstname").val()){
key = $("#firstname").val();
query = "<Query><Where><Or><Contains><FieldRef Name='FirstName'/><Value Type='Text'>"+ key +"</Value></Contains><Contains><FieldRef Name='Title'/><Value Type='Text'>"+ key +"</Value></Contains></Or></Where></Query>";
}
else if ($("#mobile").val()){
key = $("#mobile").val();
query = "<Query><Where><Contains><FieldRef Name='WorkPhone' /><Value Type='Text'>"+ key +"</Value></Contains></Where></Query>";
}
else if ($("#address").val()){
key = $("#address").val();
query = "<Query><Where><Contains><FieldRef Name='WorkAddress' /><Value Type='Text'>"+ key +"</Value></Contains></Where></Query>";
}

// Pass query to Function
if(query)
sendQuery(query);
else
$("#searchResults").append("Please enter atleast one value");

//If no results found
if (!$("#searchResults").html())
{
$("#searchResults").append("No Results Found");
}

});
});

Search results using SPServices:

function sendQuery(spQuery)
{
var thisSite = $().SPServices.SPGetCurrentSite();
//function to get all the lists
$().SPServices({
operation: "GetListCollection",
webURL: $(this).attr("WebFullUrl"),
async:false,
ompletefunc: function(xData, Status) {
$(xData.responseXML).find("List").each(function(){
var listTitle = $(this).attr("Title");
$().SPServices({
operation: "GetListContentTypes",
async: false,
listName: $(this).attr("Title"),
completefunc: function (xData, Status) {
//alert(xData.responseXML.xml);
$(xData.responseXML).find("ContentType").each(function() {

//Find all the lists with "Contact" type content

if($(this).attr("Name") == "Contact"){

$().SPServices({
operation: "GetListItems",
async: false,
listName: listTitle,
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='FirstName' /><FieldRef Name='LastName' /><FieldRef Name='WorkPhone' /><FieldRef Name='WorkAddress' /><FieldRef Name='EncodedAbsUrl' /></ViewFields>",
CAMLRowLimit: 5,
CAMLQuery: spQuery,
completefunc: function (xData, Status){
if(!xData.responseXML)
$("#searchResults").append("No Results found");
$(xData.responseXML).find("z\\:row").each(function(){
var resultURL = "";

//URL of the contact list item display form

resultURL = scope + "/DispForm.aspx?ID=" + $(this).attr("ows_ID");
var url = $(this).attr("ows_EncodedAbsUrl") + "";
var liHtml = "<li><a href='" + resultURL + "'>" + $(this).attr("ows_FirstName")+" " + $(this).attr("ows_Title") + "</a></li>";
$("#searchResults").append(liHtml);

});

}

});

}

});
}
});
})
}
});
}

Same piece of code block can be used in #Office365 or #SP2010 sites

Advertisements

3 thoughts on “Contact Search using SPServices

  1. Hi Karthik, can I do the same spservices search operations in sharepoint 2013 or this search with spservices is deprecated in sharepoint 2013. could you please elaborated why this search spservices is deprecated in sharepoint 2013. Thanks in Advance harsha vardhan.

    • SPServices 2013.01 (Stable) for SharePoint 2013 is released recently (http://spservices.codeplex.com/) and its working fine. Though Microsoft moved to REST based web services in SharePoint 2013, still SharePoint designer 2013 works on SOAP. Hence we can safely use SPServices for few more years. Please use the latest version for SharePoint 2013.

  2. Hi, This almost work for me..but seems like I cants search the list. What exactly does if($(this).attr(“Title”) == “Contact” mean? Is that a column in the list? can you show a screenshot of the list and circle the items the code need to reference. I keep getting “No Results Found”);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s