SSPUG retrospective: Creating Knockout user experiences in SharePoint with JavaScript

I had an absolute blast presenting Knockout, AJAX, jQuery, SP2010 REST services, and spservices tonight at the February 2012 Sydney SharePoint user group.

The turn out was awesome, and I want to thank you guys for the great questions and the awesome attention for listening me talk about this stuff, with great excitement, for 1.5 hours.

This is what we built, not bad, in 90 minutes ;-)

Great questions:

Why do you need to call ko.utils.unwrapObservable for the key function? 

This is actually pretty important, and I didn't explain it very well until I thought about it afterwards.

The reason is that I believe Knockout is actually building a dependency graph when you use knockout expressions and compute functions.  If you use data.Id() - you will actually set up a dependency chain between the knockout viewmodel and the key function.  I can't imagine it would be disastrously bad - since you don't bind the key function to the UI, but it is an unnecessary performance hit.

What do you do with the formatting?

The easiest way, I think, is to build a compute function and then return the value you want in the right format you wanted it.  Knockout itself doesn't contain formatting functions, and I think it will probably be implemented as an separate plugin.

ASP.NET's built in JavaScript, which is available in SharePoint, contains a lot of formatting functions for rendering both currency and dates. 

A separate, slightly prettier technique, is to add additional binding handlers (aka, the text:, html:, value: expressions), and create a new binding expression that also does formatting.  In my projects, I've used

• money: MyCurrency
• date: MyDate

These are one-way binding, because I'm lazy, but you can make them two-way as well if you want to handle the parsing.

Downloads

• http://johnliu.net/storage/Creating%20Knockout%20User%20Experiences%20in%20SharePoint%20with%20JavaScript_sspug201202.pptx
• http://johnliu.net/storage/knockout-rest-sspug-201202.zip

Next Presentations

No idea, but I plan to be presenting this for the rest of the year in the various SharePoint Saturdays, so bring your colleagues for a exciting session on a very cool, new technique.

Comments

[Anthony]

Fantastic session John. This is pretty cutting edge stuff and opens up a lot of possibilities. Of course many considerations like what if the list has 1000's of list items and how it will affect performance. Great intro's into other technologies that some of us many not be too acquainted with like REST and the codeplex project SPServices. Thanks again.

[JohnLiu.NET]

This is a topic that I plan to work on throughout the year and improve as I go.
By the time SharePoint Saturday comes around to Sydney, I'd hope to do this again with more helper libraries and tricks, and a more polished demo :-)
And hopefully, you guys would have done some of your own experiments and we can have some fun discussions!

Thank you all for the awesome questions though, and you guys were top audiences! Makes speaking fun.

[Tommy]

Hi John,

I downloaded the .zip file, however it seems to be lacking structure. By that I mean that I see board.txt refers to sources files at "/documents". So that said; I'm having trouble getting your source files working although I believe that I have everything linked up properly.

Steps I performed:
Added javascript files to masterpage via ASP Scriptmanager (http://labs.steveottenad.com/adding-javascript-to-sharepoint-2010-master-page/)
--knockout-2.0.0
--knockout.mapping-latest
--jquery-ui-1.8.17.droppable.min
--jquery-1.7.1.min
--jquery.SPServices-0.7.1a.min
copied board.txt to /subsite/ilbary/board.txt
Attached board.txt to a CEWP on .aspx page in same library
removed references to above .js files from board.txt. Fixed relative link for board.js and board.css

So at this point, the page comes up as shown in your screenshot - but it displays none of the tasks in the task list (in /subsite/tasks). Also, creating new tasks from the board seems to do nothing.

Any thoughts? Is any of the code sensitive to being located in a sub-site? I didn't see anything but I thought it would be best to ask.

I have verified that there are no script errors in the developer toolbar when the page loads.

Thanks!

[JohnLiu.NET]

The files are for a demo I do on stage over 1.5 hours, I don't think there is anything particularly tricky in your setup, but most likely I suspect there's a file reference wrong.

Because you mention subsite, if you are hosting the pages on the root site, you'll need to make sure your REST endpoint is pointed to the correct subsite.

Check your IE developer toolbar's Network view. Watch the REST request and see whether it is returning data.

[Tommy]

Ah, that was it! turns out there was no slash between the subsite and _vit_bin in the request, so a quick modification to the .js file and all is well.
This will be fun to play with. I want to adapt this to a custom list.

Thanks!

[JohnLiu.NET]

On my BIG todo list is to package this better so people can play with it. But I've been busy (and may be lazy).

Check out my Codeplex project on SharePoint As Single Page Application - more javascript goodness and examples.

http://spaspa.codeplex.com

[Dave]

Hi John,

Thanks a lot for this great article. I've learned a lot by getting this to work on our own sharepoint farm.
I am however stuck at one small thing. All data is showing and can be edited, but the drag and drop function doens't work.
I always get these errors:
SCRIPT438: Object doesn't support property or method 'droppable'
SCRIPT438: Object doesn't support property or method 'draggable'

I've included all js and they all seem to load correctly.

Thanks in advance,

Dave

[JohnLiu.NET]

check whether your jQuery UI contains the droppable and draggable components. Those plugins should be in your jQuery UI javascript file.

Try redownload the jQuery UI file, and get everything.