Knockout.js with Sharepoint 2013 App – Part III

In my previous post, we saw how to add items in a SP list using KO. This post will focus on removing items from a list. The code snippet at the end combines all the three posts. Using it; you can display, add and remove items from list. Besides that we send only updated (i.e. added or removed) data to server side. Going on the same lines, we can implement the “edit” functionality also. Right now, I am skipping it.

For reference, the other two posts are:

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

To add remove functionality, a “Remove this” link is added after every row in the table. So, the html looks like:

KO-Remove-1

$root.RemoveCountries will update the view model. Here $root is the main view model in the topmost/parent context. It will update the whole table by removing the current row.

“Id” column of sharepoint list is also included in the “CountryList” class to delete items by id. For newly created rows the id is assigned to ‘0’. After every update to the server, the “changedCountries” array is emptied.

The final result will look like,

KO-Remove-2

Now, the final collaborated code is:

 

Note: In sharepoint hosted app, we do not need SP.RequestExecutor.js to communicate with host web that means cross-domain calls to host web is allowed without this javascript file. The code is updated for this.

Summary: KO is an amazing library that makes life easier by segregating the display logic with the business logic. Using it in SP, makes the js code neat and simple to understand. The only flip side is, if there are changes at the server side, then UI is not automatically updated until a refresh is performed. Regardless of this, KO is a library we all should learn.

P.S.: This example is by no means perfect or bug free. There are few loopholes like:

  1. User can edit the existing items but this is not handled in the code.
  2. After adding a new item to SP list the view model is not updated unless user do a refresh.
  3. Only 20 items are fetched and no pagination is implemented.

But the code is for demo purpose only. You can extend it in any way you want. Hope it helps!!

Another good blogs on KO (also referenced here):

  1. Knockout.js Simplified
  2. Using Knockout.js in a sharepoint context
Advertisements

9 thoughts on “Knockout.js with Sharepoint 2013 App – Part III

    • I don’t have demo code for edit with me, but once user edits a list item, you need to update the view model and send a request to the server. Almost similar to remove code.

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