Originally posted on: http://geekswithblogs.net/djacobus/archive/2013/12/19/154917.aspx
I was playing with SharePoint 2013 on my Office 365 site and asked myself what is the most important skill I need to acquire as a developer for SharePoint 2013? The same skill, as I have needed from the very beginning as a SharePoint developer: Acquire SharePoint list data and customize the look and feel to meet customer requirements! Not needing the whole CRUD stack, just read, except maybe for External lists. I looked at a few blogs and decided to jump into the fray and see how hard this would be to do for a SharePoint 2013 App. The biggest hurdle, I would need to cross is that I have been primarily a Server side developer using C# and JQuery! It appears to me that a SharePoint 2013 skills matrix is going to push this skill down the heap as client side scripting is being pushed up! I looked at a post by Sahil Malik on templates and knockout for SharePoint. Cool and easy to understand, however, it appear like templates are old school and knockout provides WPF/Silverlight data binding experience for html. So I started with his blog, but soon found that he was using an old version of knockout. so I am using his songs list as the basis for this post! My thinking is that this a a do it once and use many times over, as this would be the basis project for all my 2013 pseudo web parts. Here is my Office 365 Developer Site:
Just an OOTB team site without any custom styling! The best part of having this is that I don’t need SharePoint installed locally to develop an App for SharePoint. In addition, most of the apps I have looked at are using the List Data service of the new O Data api’s to retrieve list data. I will be using CSOM JavaScript to retrieve the list data. Here is my list of songs (Actually, Sahil’s songs)
The end result is going to look almost exactly like this! Except for the fact that it will be in an SharePoint hosted App looking into SharePoint from an application page. SharePoint walls off the App from the SharePoint site by creating another web site for the App. Thus there is some rethinking needed when building these applications. Different Url’s are being used by these Apps; Let’s look at one to see what is happening:
I added line feeds at the query string parameters for readability.
SPHostUrl = https://jacobusconsulting99.sharepoint.com
SPAppWebUrl = https://jacobusConsulting99-3e8d06205ce145.sharepoint.com/ListKO
The SPHostUrl is the actual SharePoint Site and the SPAppWebUrl is the hosted site which contains my App.
As soon as I saw this, I remembered that I had been doing this years ago (SharePoint 2007), when I had a vanilla ASP.Net site added to my SharePoint Development Sites in Visual Studio for testing web parts. I used a standard ASP.net web part page, added my web parts, and changed the using statement to open the site by Url. It made testing very quick as I didn’t need to install a WSP, In those days it was much harder and time consuming, I did this even though I was developing on the server. Okay back from reminiscing about the good old days
. Knockout, is an easy framework to understand and the site has some very easy tutorials on using it! Another aspect of Knockout is for the purist whom wants a MVVM solution. I am not an MVVM specialist so I won’t try and describe its benefits! Except to say, that I have heard good things about it for use in large projects for testing purposes!
When creating an APP with Visual Studio you get the basic Hello World app which installs and displays your context name in the browser.
If we deploy the app as is, this is what we get!
Not scintillating but actually pretty cool, cause all the piping, etc. is all there! Okay, I want to expose list data on this page using CSOM. Lets look at how the context name is displayed on the page.
It uses the Async call backs to get the data from the site. One thing to point out is the context being used is the App context which id different than the host site context. We will be using the same process to retrieve list data except we will need to get the host site context. okay knockout uses data binding to
abstract the movement of data from the source onto the page. How it does that is very simple and understandable. Here is my html markup to display the songs from my songs list:
Basically, what this few lines of markup is doing is saying: For each song in the songs collection display its title in a list! Behind the scenes in app.js is the JavaScript code to make this happen. Lets look at it:
Okay! I highlighted one line of code, I think is most important as there is very little documentation on this. We need the host web context as the list is in the host we not the app web. The main Idea I am trying to convey here is that this same code can get any list in the site. So all we need to change are the two Business Objects on lines 50 and 57. I have a single song object, on line 50 and a songs collection on 57. knockout expects a ko.observableArray([]) for its collection and the object needs to have its entities use ko.observable. My thinking here is that most of what we do will have complex objects that will have more than just a title to display. We just add more properties like: self.Title = ko.observable(title). The rest of the list code can be the same!
Okay, I deployed the app and here is what the user see’s:
What is going on here is SharePoint is asking you do you trust this app to look at a specific list. If you click the trust it button you will see the songs displayed if you choose the songs list. When devloping the App, you tell SharePoint what permissions the App needs in the App Manifest file:
Here is the out put! Not styled, just a simple rendering. But all the piping is there!
Here is the code for this post: Code
I thought I would extend this post to add something more complicated: I would use the OOTB announcements list which has ID, Title, Body, and Expires as the list columns. In addition, I wanted to use an HTML gridview to display the data. I would use the above project as a basis for Announcements App. The code just needs to be changed slightly to accommodate this:
As you can see I just added more ko.observable’s in the business object and added it into the collection. easy, just a little refactoring of the code. In addition, I had to remove the HTML form the Body Rich text field. However, this just prints out an un-styled list:
Notice the link at the bottom which is a link to the grid display below:
Which is a knockout control which can be down loaded and added to the project. What I had to do is create another view model to take advantage of the grid view:
Okay!, I think I proved my point, this can be the basis project for most of your apps in SharePoint to retrieve list information and present it to the user. Here is the source for this project: Code