SPServices is a widely used 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 on the client and requires no server install. Using SharePoint’s Web Services client-side, you can provide your users a more “tactile” experience. In this class, you'll learn how to use SPServices to build a more compelling user experience on top of SharePoint. We'll look at the most popular ""value-added"" SPServices functions as well as how you can use SPServices as part of your own development toolkit. We’ll also discuss how you should think about migrating from SPServices to REST calls and when it makes sense.

1. SharePoint Solutions
with SPServices
Marc D Anderson

2. Who Is Marc?
• Co-Founder and President of Sympraxis Consulting LLC,
located in the Boston suburb of Newton, MA, USA.
Sympraxis focuses on enabling collaboration throughout the
enterprise using the SharePoint application platform.
• More than 30 years of experience in technology professional services and software
development. Over a wide-ranging career in consulting as well as line manager
positions, Marc has proven himself as a problem solver and leader who can solve
difficult technology problems for organizations across a wide variety of industries
and organization sizes.
• Three-time awardee of the Microsoft MVP award for SharePoint Server
(2011, 2012, 2013).

3. What Is SPServices?
SPServices is a jQuery library which
abstracts SharePoint's Web Services and
makes them easier to use. It also includes
functions which use the various Web
Service operations to provide more useful
(and cool) capabilities. It works entirely
client side and requires no server install.
SharePoint's first [useful] client side object
modelTM?

4. Where Does SPServices Work?

5. Where Do I Get SPServices?
http://spservices.codeplex.com/

6. What Else Do I Need?
http://jquery.com

7. How Does It All Fit Together?

8. Add More Plugins

9. Script from CDNs
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
Note the protocol-less
references

10. What Can You Do with SPServices?
• SPServices Core
– Call SharePoint’s SOAP Web Services
– Parse the returned XML to provide page content or user
feedback
– Make changes to SharePoint objects
• Value-Added Functions
– Enhance forms
– Improve the user experience (UX)

11. SPServices’ Core Functions

12. Anatomy of an SPServices Call
$().SPServices({
operation: "operationname",
});
[webURL: "/sitepath",]
[option1: value1,]
[option2: value2,]
[async: false,]
completefunc: function (xData, Status) {
...do stuff...
}

13. Anatomy of an SPServices Call
using Promises
var thisPromise = $().SPServices({
operation: "operationname",
[webURL: "/sitepath",]
[option1: value1,]
[option2: value2]
});
thisPromise.done(function() {
...do stuff...
});
Promises
were added in
2013.01
(jQuery 1.5+)

14. How Does an SPServices Call Work?

15. Parsing Results: GetListItems Example
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
<ul id="tasksUL"/>

16. Value-Added Functions
• Combining multiple Web Services calls
allows us to build cool functionality
• Big focus on form enhancements to
improve the overall user experience (UX)
• The value-added functions are useful on
their own but also can be used as
prototypes for you to build your own
functionality

17. SPCascadingDropdowns
• Lets you set up cascading dropdowns on SharePoint forms (think Country /
Region/ State/ City)
• Enforces hierarchical relationships between column values using the
GetListItems operation of the Lists Web Service to refresh the allowable values
based on relationships which are maintained in reference lists
• Users manage the relational content in reference lists

18. SPDisplayRelatedInfo

19. SPSetMultiSelectSizes

20. DEMOS

21. RETRIEVING SHAREPOINT LIST DATA

22. SharePoint 2013 SOAP Call
with SPServices
var thisPromise = $().SPServices({
operation: "GetListItems",
listName: "Cities"
});
thisPromise.done(function() {
$(thisPromise.responseXML).SPFilterNode("z:row").each(function() {
alert($(this).attr("ows_Title"));
});
});
http://spservices.codeplex.com
SOAP Web Services deprecated in SharePoint
2013

23. SharePoint 2013 REST Call
$.ajax({
url: "/sites/marca/jquery/_api/web/lists/getbytitle('Cities')/items",
type: "GET",
headers: {
"ACCEPT": "application/json;odata=verbose"
},
success: function(data) {
var results = data.d.results;
for(i=0; i < data.d.results.length; i++) {
alert(i + data.d.results[i].Title);
}
}
});
How to: Complete basic operations using SharePoint 2013 REST endpoints
http://msdn.microsoft.com/en-us/library/jj164022.aspx
Understanding and Using the SharePoint 2013 REST Interface
http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

24. SharePoint 2013 JSOM Call
var siteUrl = "/sites/marca/jQuery";
var clientContext = new SP.ClientContext(siteUrl);
var oList =
clientContext.get_web().get_lists().getByTitle('Cities'
);
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml('<View><Query></Query></View>');
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this,
this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
How to: Complete basic operations using JavaScript library code in SharePoint 2013
http://msdn.microsoft.com/en-us/library/jj163201.aspx
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator =
collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
alert(oListItem.get_item('Title').toString());
}
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n'
+ args.get_stackTrace());
}

25. Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
Books http://sympmarc.com/books
The Middle Tier Manifesto http://bit.ly/middletier