Blast from the past… No I’m not talking about the movie

Article
08/12/2011

Body:

Back about four years ago while working at a customer gig, I created a client side Java Script library which uses AJAX to talk to lists.asmx for things like retrieving list items, edit, update and delete. Basically client hated the post back model with SharePoint back in older version, we couldn’t deploy custom code due to governance related constraints on deploying custom code to the environment so client side programming was the only thing we could do. Without going into too much details with few references to some script files and some initialization code in a content editor web part is all you need.

You can assemble dashboard like page which allowed site users to perform crud like operations on bunch of lists all in single page without many post backs.

Now you might be wondering why I’m bringing this up now, since everything is moving towards Office 365 and you want to improve user experience especially when users perform CRUD like operations on many lists and constraints like the one we faced back in the day around deploying custom code into Shared environment kind of applies. There is two things I want to achieve with this post

One introduce you guys to this library, basically no code has changed since I wrote it four years ago. I want to refactor this code to leverage java script client object model where ever I can as well as use Marc Anderson’s SPServices instead of my little java script wrapper for Lists.asmx web service, I also want to leverage jQuery, but I’m only going to do it if you guys think it’s useful, so I would greatly appreciate if you respond via comment and let me know
Secondly I want to show you guys the functionality working in a live environment, head over to this link https://www.spmcm.me/demo

In the demo site link provided above I configured this with “Tasks” list. Added a content query web part to the landing page and added following in the content editor web part.

    1: <script language="javascript" src="/Style Library/jsListView/common.js"></script>
    2: <script language="javascript" src="/Style Library/jsListView/datevalidation.js"></script>
    3: <script language="javascript" src="/Style Library/jsListView/dropdownloader.js"></script>
    4: <script language="javascript" src="/Style Library/jsListView/listview.js"></script>
    5: <script language="javascript" src="/Style Library/jsListView/SharePointListHelper.js"></script>
    6: <script language="javascript" src="/Style Library/jsListView/validationsummary.js"></script>
    7: <script language="javascript" src="/Style Library/jsListView/xmlhelper.js"></script>
    8:  
    9: <script language="javascript">
   10: var lv = null;
   11: function DataBindTasksGrid(){
   12:     //setup columns
   13:     var title = new Column("Title", 60, false, false) ;
   14:     var status = new Column("Status", 50, false, false);
   15:     var assignedTo = new Column("AssignedTo", 50, false, false);
   16:     var dueDate = new Column("DueDate", 20, false, false);
   17:  
   18:     lv = new ListView("tasksJsListView", "Tasks", "https://www.spmcm.me/Demo");
   19:       lv.Columns().push(title);
   20:     lv.Columns().push(status);
   21:     lv.Columns().push(assignedTo);
   22:     lv.Columns().push(dueDate);
   23:  
   24:     //setup event handlers
   25:     lv.SetRowEditingEventHandler(EditRow);
   26:     lv.SetRowInsertingEventHandler(InsertRow);
   27:     lv.SetRowCommittingEventHandler(RowUpdate);
   28:     lv.SetRowCancellingEditEventHandler(CancelRowEdit);
   29:     lv.SetRowDeletingEventHandler(DeleteRow);
   30:     lv.SetListUpdatingEventHandler(UpdateList);
   31:  
   32:     //databind
   33:     lv.DataBind();
   34:  
   35: }
   36: function EditRow(){
   37:     lv.EditRow();
   38: }
   39: function InsertRow(){
   40:     lv.InsertRow();
   41: }
   42: function RowUpdate(){
   43:     lv.RowUpdate();
   44: }
   45: function CancelRowEdit(){
   46:     lv.CancelRowEdit();
   47: }
   48: function DeleteRow(){
   49:     lv.DeleteRow();
   50: }
   51: function UpdateList()
   52: {
   53:     lv.Update();
   54: }
   55: _spBodyOnLoadFunctionNames.push("DataBindTasksGrid");
   56: </script>
   57:  
   58: <div id="tasksJsListView">
   59:  
   60: </div>

Script above is pretty straightforward and not much to explain “DataBind” function in list view object will use AJAX to get list data and render it inside the “div” element defined. Obviously there is lot of implementation details that I can’t go through in a post

Here is what it looks like when its retrieving list items

Image below shows view after retrieving list items using AJAX and rendering on the client. All changes made in the list view are saved locally in cache and only when you click on “update” it sends those changes to server

Here is how it looks when you insert a new row into the list view

And image below shows when you edit an existing row

Image below shows after a validation error occurred when committing changes

That’s it, I’m looking forward to hearing from you guys

Cheers,

</Ram>

Published: 8/12/2011 2:01 AM

Blast from the past… No I’m not talking about the movie

Additional resources