In this post we will explore how to work with SharePoint data in a browser based application using the popular Backbone.js library.
SharePoint and Backbone.js
SharePoint 2010 offers 3 APIs which can be used in JavaScript apps:
- SP Web Services
- SP Client Side Object Model (CSOM)
- SP ListData service (ListData.svc)
While Web Services and CSOM provide an wider range of capabilities, ListData is a lightweight RESTful interface offering CRUD access to SharePoint lists and items. It is based on the OData specification.
Backbone.js provides models and collections to work with data on server. Out of the box, models and collections can connect with a RESTful JSON API following common REST conventions. However, to work with the SharePoint ListData interface, some customization is required.
Enter…
Backbone.SharePoint
Backbone.SharePoint is a Backbone.js plugin providing special Models and Collections which you can use to work with SharePoint Items and Lists. You can find Backbone.SharePoint on GitHub.
Backbone.SharePoint allows you to:
- create, read, update and delete SharePoint items as Backbone models
- fetch multiple SharePoint items from a list as a Backbone collection
- support for OData query string options ($orderby, $filter, $select, etc.)
- custom sync() to communicate with the ListData service
- partial updates: only changed attributes are sent to the server during an update.
Getting started
Because of the Same Origin Policy, your html file must served from the same domain as the SharePoint site you want to access. You can place your html file containing your app on the server file system or in an asset library.
<!doctype html> <html> .... <script src="jquery.js"></script> <!-- you can also use zepto.js --> <script src="underscore.js"></script> <script src="backbone.js"></script> <script src="backbone-sharepoint.js"></script> ... </html>
Examples
Now let’s look at some examples how you can use Backbone.SharePoint. Let’s assume you have a subsite ‘/teamsite’ in which you have created a Contacts list based on the standard contacts list.
// You define a Contact Model for items by extending Backbone.SP.Item
// Required parameters are the SharePoint site and the name of the list
var Contact = Backbone.SP.Item.extend({
site: '/teamsite',
list: 'Contacts'
})
// Create a new contact, the attributes refer to item column names.
// Please note capitals. We follow SharePoint columnnames
var contact = new Contact({ LastName: "Davis" });
// At this point we have a new contact model, but is not saved to the server,
// so let's save it to the server.
contact.save();
....
// Update the attributes of the Item:
contact.set({FirstName: "John"});
contact.save();
...
// Finally, to remove an item:
contact.destroy();
Working with SharePoint lists is similar to collections.
// you can define a SP List by refering to the model
var Contacts = Backbone.SP.List.extend({
model: Contact
})
// create a list
var contacts = new Contacts;
// get contacts list from the server
contacts.fetch()
// the fetch options allow you to use query options
// for example, the request below will fetch
// only the LastName and FirstName columns
// for item 11..15 when ordered descending by LastName
contacts.fetch({
select: 'LastName, FirstName',
orderby: 'LastName desc',
top: 5,
skip:10
})
....
// This is how you can create a new contact,
// save it to the server and add it to the list (collection)
contacts.create({
LastName: "Peel",
FirstName: "Emma"
})
Hopefully this is sufficient to get you going!
... And All That JS 
Great explanation!
Is it possible to download the code samples? Thanks
Hi Mike,
You can download the Backbone.SharePoint plugin from github. You can copy the code sample to the clipboard by using the copy button on the top right of the code sample blocks.