SharePoint 2013 Rest API and Knockout JS

Hi all, Most of the times in public facing websites you want to have a nice fast interaction for users to be able to get the information and we want to display it in a nice looking way. For example a simple question with responses like this:

where user can click Yes or No and the response will show and they can go to the next question. 

To achieve this we can easily leverage SharePoint capabilities for storing the questions in the list and access them through the REST API. For rendering and interaction we will use the mighty Knockout JS making it all nice and easy.

First step is to create your SharePoint list to store your questions:


Then you can create a web part to host this little wizard. In your visual web part ascx file, the first thing we want to do is to create a viewmodel and get the data from our list. Using the REST api and with the help of knockout mapping (or wrap) we can get our observables easily. Below is the complete js on my page




Then in our markup we can use the awesome native knockout template to do our rendering logic:



And there you go! Very fast to build a simple wizard/tool/quiz this way. This is assuming no sensitive data in the back end because then it will be exposed through client side technology. If so then you have to mix it with server side technology to protect and secure your application.

Hope this helps,
Andreas

Post a Comment