SharePoint Solutionswith SPServices

Marc D Anderson

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).

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?

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

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

?

Script from CDNs

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

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 Callusing 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+)

How Does an SPServices Call Work?

XML

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

• Alabama• Hawaii• Texas• North Dakota

<ul id="tasksUL"/>

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

SPSetMultiSelectSizes

DEMOS

RETRIEVING SHAREPOINT LIST DATA

SharePoint 2013 SOAP Callwith SPServicesvar 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

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 endpointshttp://msdn.microsoft.com/en-us/library/jj164022.aspxUnderstanding and Using the SharePoint 2013 REST Interfacehttp://msdn.microsoft.com/en-us/magazine/dn198245.aspx

SharePoint 2013 JSOM Callvar 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 2013http://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());}

Contact InformationeMail 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