Embed Size (px)
DESCRIPTION
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.
Citation preview
SharePoint Solutions with SPServices
SPTechCon SFO 2014
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.• Over 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.
• Awarded Microsoft MVP for SharePoint Server 2011-2014
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?
Where Does SPServices Work?
What Else Do I Need?
http://jquery.com
"jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript."
How Does It All Fit Together?
Add More Plugins
?
Referencing Script Files
• Adding jQuery, SPServices, and jQueryUI
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisitedhttp://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
Note the “protocol-less” references
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)
SPServices’ Core Functions
SPServices Site Demo
Anatomy of an SPServices Call
$().SPServices({ operation: "operationname",
});
[webURL: "/sitepath",] [option1: value1,] [option2: value2,] [async: false,]
completefunc: function (xData, Status) { ...do stuff...}
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 v2013.01
How Does an SPServices Call Work?
XML
Parsing Results: GetListItems Examplecompletefunc: function(xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { var out = "<li>" + $(this).attr("ows_Title") + "</li>"; $("#statesUL").append(out); });}
•Alabama•Hawaii•Texas•North Dakota
<ul id=“statesUL"/>
Parsing Results: GetListItems Example with PromisesthisPromise.done(function() { $(thisPromise.responseXML).SPFilterNode("z:row").each(function() { var out = "<li>" + $(this).attr("ows_Title") + "</li>"; $("#statesUL").append(out); });});
•Alabama•Hawaii•Texas•North Dakota
<ul id=“statesUL"/>
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
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
SPDisplayRelatedInfo• Show related
information based on a selection in a dropdown• Images, table
data, links – the function figures it out for you• Great for visual
cues, improving data quality – reduce GIGO• Users manage
the relational content in reference lists
SPSetMultiSelectSizes
• Use the available screen real estate to improve the UX• Options widened
based on widest value, regardless of branding
Demos
Contact InformationEmail marc.anderson@sympraxisconsulting.
comTwitter @sympmarc
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
