Saturday, September 14, 2013

SharePoint 2013 and Ember.js

Ember.js is great and I'm really enjoying writing apps using it. Well, it's possible to use any modern framework with SharePoint, including Ember.js. Let's see how to write simple Ember.js app using new SharePoint 2013 app model. I'll use SharePoint-hosted app (http://msdn.microsoft.com/en-us/library/fp179887.aspx#SPHosted) for this example - this is an app that is coded using only html and javascript, no server side code at all.

Let's display list of items and item details from some SharePoint list using Ember. First of all we need to create new SharePoint-hosted app:



Then we need to add references to Ember.js and handlebars (the default templating engine). I'll be using ember.js 1.0.0 and handlebars 1.0.0 - latest versions as of this writing. Define the root of our application (div with id "main"):



After all prepartions we can create an instance of Ember.Application - this is the very first step of creating an Ember app:

Ember uses pretty strong conventions for Routes, Controllers and Views. This allows to hide lots of code behind as Ember generates it for us. For example even if we not define controller it will still be generated which is pretty cool I think - we can focus on implementation of our the logic rather than doing some boilerplate code.

We need to define routes for news list and for news details:

This routes map tells us that we need to define NewsRoute and NewsControoler (because of Ember conventions). If those objects will not be found Ember will generate them for us. The default route also will be NewsRoute:

And the last thing we need to do is to create News model and load actual data. It's pretty straightforward on how to use SharePoint javascript object model and proxy requests from app to main site. So here is the code:


And here is the result. This simple SharePoint application loads data from Announcements list from the root site:



Sample code for Visual Studio 2012 has been uploaded here: https://github.com/vadimi/SharePoint-Ember