SPServices Stories #7 – Example Uses of SPServices, JavaScript and SharePoint

Introduction

I’ve been aware that John Liu (@johnnliu) is a fan of SPServices for some time now. He occasionally tweets about things he’s up to, and they always sound intriguing.

Recently, I asked him if he’d like to share any of his own SPServices Stories, and he did a post for me on his blog. In the post, John shows three great examples of how you can slide SPServices under some truly impressive functionality that greatly improves the overall SharePoint user experience.

There’s another SPServices Story coming up from Dan Stoll (@_danstoll) which goes into some of the details on John’s first example below.

Without further ado, here’s John’s first SPServices Story. I expect that John will have a few more SPServices Stories to share with us over time.

Example uses of SPServices, JavaScript and SharePoint

I wanted to write about spservices.codeplex.com from Marc D Anderson – we’ve found ourselves using this really special library time and again across different projects to talk back to SharePoint quickly.

Starting Workflows

Here’s a page from one of our Process Wiki articles.

• We have a special “Contributor-only” Web Part on the right.
• It shows the various workflow status’ on the current page, as traffic light bubbles.
• The “Certify Process Page” calls a JavaScript function that calls StartWorkflow via SPServices.
• The workflow is a Nintex workflow and triggers a significant multistage approval process.  But you can use StartWorkflow to start SharePoint workflows as well.

Getting List Data, Lots of List Data

Here’s our task list, represented as a task board.

• This one is completely done with SPServices to get the list items
• Convert the objects to JSON using SPServices.SPXmlToJson
• Then binding the objects to UI via Knockout
• There’s jQuery UI’s drag and drop in play, so we can change the Task’s status by dragging the task across a different column.
• Update task using SPServices’ UpdateListItems call.
• And some nice CSS.
• This particular page also runs via SharePoint 2010’s OData listdata.svc, but is completely viable with SPServices on SP2007 as well.

Getting User Profiles via Search

Here’s our People page.

• First, get SharePoint to index your people.
• Use SPServices to call SharePoint search to return a bunch of people, including their picture (one would say, especially their picture).
• Here I use Knockout to render the pictures.  When clicked, each one opens that user’s My Site page.
• There’s a filter box on the top right, as well as “fake” refinements on the left hand side that allows us to re-query SharePoint search for filtered people.
• One possible idea here would be to use SPServices’ User Profile Service support and talk directly to the User Profile service if you want to skip the search service.

Summary

A quick post of 3 recent JavaScript customizations that heavily used SPServices.  Hope that give you guys a lot of ideas.  Let me know what you guys think.