Using Knockout.js in a SharePoint Context
The excellent Knockout.js library is an MVVM (Model, View, ViewModel) library.
Using it you can completely abstract the logic from the presentation in your web applications, allowing dynamic and responsive UIs to be created without having to manage all of the fiddly UI updates directly.
The Knockout site has a great set of tutorials on how to use it, but I thought I would bring them into a SharePoint context.
Specifically, I am going to cover their 5th tutorial, Loading and Saving Data. In this tutorial they give the example of a simple task list that a user can update and delete dynamically. If you do not know Knockout at all, I recommend you go through this tutorial before continuing. Go ahead, I can wait.
Back with us? Excellent. Hopefully by now you have some idea of the power of Knockout, so lets try and reproduce this using a SharePoint list as the data source.
The first thing to do is to create our list. For this I am using a simple custom list named ‘My Tasks’ with an additional Completed Yes/No field, and I have pre-populated it with some entries.
I put the view, along with the script references to Knockout, the ever useful jQuery and my View Model into a single file and save it into the document library. I have also put some style information in too. Here is the view model as I created it:
Note the addition of some message boxes, the original tutorial does not include them but I felt they were nicer than simple alert boxes.
Also note that, unlike the original, I have not used a form element for the new task area. This is because form elements can cause havoc in SharePoint pages, as the entire page is wrapped in a form for post-backs.
Other than that, our view is mostly unchanged.
The main differences here lie in the way that we send and receive data from SharePoint. In their examples they use jQuery to query and post data to REST APIs, and while SharePoint 2010 and 2013 do come with their own suite of REST / oData APIs, there are some issues in using them.
- Update and Delete calls can only update or delete one item per call, to do the bulk updating this system indicates we would have to make a request per item. Not ideal!
- Due to the way SharePoint handles concurrency, you have to pass around an eTag so that SharePoint can determine if an item has been updated since requested. While this is great for high concurrency systems with multiple people editing the same data, for a personal tasks list this is not a nice feature.
Luckily REST is not our only option. SharePoint has the wonderful Client Side Object Model (CSOM), which can do all of our loading and saving for us!
Here is my View Model, updated to use the CSOM.
So there you go, once you put it all together you should end up with something looking like this:
Cool, huh? It is by no means perfect. The two biggest issues with the implementation as it stands are:
- Currently I am limiting the entire system to only showing 50 records, which is not ideal. This would be best handled by adding some pagination.
- When you hit save it updates every item in the view model, regardless of whether it needs updating or not. This would be resolvable by subscribing to the Task Knockout object and keeping track of which need updating and which do not.
Additionally you could use some jQuery animation and the animated transitions example on the Knockout site to hide the save and error boxes once they are shown. Currently once they are visible they remain visible indefinitely.
Have fun with it, it’s a neat tool and can give quite powerful results.
via Chris on SharePoint http://spchris.com/2013/04/using-knockout-js-in-a-sharepoint-context/
SharePoint and Project Server Consultant