Knockout.js with Sharepoint 2013 App – Part II

In my previous post, we saw how to display items from a sharepoint list using KO. In this post, we will see how to add items in the list. This demo is in continuation with the previous one.

For your reference, the posts in this series are:

  1. Part I – Displaying Data from SP list. 
  2. Part II – Adding Data to SP list. (this one)
  3. Part III – Removing Data from SP list.

First, lets go through the changes made in the previous code for incorporating this functionality.

HTML Changes:

  1. A button “Add State” is added. This button updates the view model and add a new country-state in the existing table. It does not update the SP list.
  2. Another button “Submit to Sharepoint” is added. This button actually updates the data in the sharepoint list.
  3. Now the country and states are displayed in text box so that user can add new ones. Edit functionality is not included in this post.
  4. Two divs are added for displaying success and failure messages.

CSS Changes:

  1. styling is added for success and failure messages. Not much changes are done here.

Javascript Changes:

  1. Another property “IsUpdated” is added in  the “CountryList” class. This property is used to keep tab of newly created items in the view model. Using this, we will send only changed items to the server and not the complete list of data.
  2. In the view model, “UpdateSPList” function is added. This function will be called on click of “Submit to SP” button.
  3. “changedCountries” array holds all the newly added items. “emptyValues” is a boolean variable which maintains if any of the country name or state name is blank. If yes, then that entry is not sent to SP and a message is displayed to the user.
  4. “SubmitDataToSP” is a function which actually uses sharepoint CSOM and adds new items in the list.
  5. On click of “Add State” button a function “AddCountries” of view model is called. The parameters passed are $data (which is the current item inside a foreach loop), country name, state name and true as the value of “IsUpdated” property. For more details on ‘click’ event, check this link.
  6. Similarly on click of “Submit to SP” we call, “UpdateSPList” method of the view model.

So, now the complete code is as follows:

The result page will look like:

result

Note:

Please note that this might not be the completely optimized way to achieve this functionality. The goal here is to demo use of KO with sharepoint. In the next post, we will modify this code further to achieve delete functionality.

Hope this helps!!

Advertisements

6 thoughts on “Knockout.js with Sharepoint 2013 App – Part II

  1. Hi Garima,
    Thanks for information.
    I need to save data in SharePoint list (2010) and UI is a SharePoint page. I try your code but could not save or receive data. could you please help me.

    Kind Regards
    Ali

  2. Amazing article indeed. As i learnt Knockout i was bit concerned about using it with Sharepoint.This article helped me developing office 365 Apps using Jquery and knockout. Now i feel confident to move into higher implementations. Thank you..

  3. Sharepoint 2013 or Sharepoint online we need to do this to before we invoke calls

    $(function () {
    SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, function () {
    // Get the App Web Url
    appWebUrl = decodeURIComponent(getQueryStringParameter(‘SPAppWebUrl’));
    LoadViewModel();
    });
    })

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s