jump to navigation

Client Side AJAX Applications in SharePoint 2010 – Live Blogging at SUGDC April 9, 2010

Posted by willhlaw in jQuery, SharePoint.
Tags: , , , , ,
add a comment

sugdcTitle4

I am listening to Lee Richardson at SharePoint User Group DC (SUGDC) Reston, VA.  I apologize in advance for the terse code examples and potential incoherent notes.  I am trying to capture everything on the fly and have only touched up a few concepts and added my opinion in the conclusion.  To see this subject in greater depth, visit Lee’s blog.

With client side scripting, there is no compiling, no syntax checking, no type checking.  There is no LINQ, no ADO.NET.  So why would we use it?

Two technologies will be discussed:

  1. WCF Data Services came from ADO.NET Services and previously, Astoria.  OData is a specification that a podcaster, Scott Hanselman, mentioned in connection with SharePoint 2010.
  2. ASP.NET AJAX Templates.

WCF Data Services is an API in SharePoint that allows you to use RSS / Atom and JSON.  It is not just a pure data access layer, it also adheres to the security model built in and returns proper HTTP specification error codes.  It also has validation built-in.  There is also a uniqueness constraint in SharePoint 2010 that will double-check when inserting a new item and return an error code if an item already exists with the same value that was marked for uniqueness (Something that databases have been doing for years).

Polling the crowd on who has used ASP.NET AJAX framework and would not use it on their next project.  5 people raised their hands.  5 people kept their hands up.  An UpdatePanel in SharePoint has just been too difficult over the years, it sends the entire ViewState to the server on each request, and updating the framework as it matures with SharePoint has been painful.

Templating is part of ASP.NET AJAX 4.  It is still in BETA.  Best way to describe it is by describing what it is not.  What would you use if you were to return 100 items from the server and display in a table and page.  I commented, “jPoint and the flexigrid jQuery plugin.”  A few people turned around and said, “Are you the jPoint guy?”  Lee didn’t hear the jPoint comment, but he smiled, and said, “Yes, jQuery.  You could do that.”

Enough talking and he jumps into the demo.  He first shows a response on a webpage and describes the data that we are looking at.  Opens Visual Studio and comments that, “it is not an out of the box, unfortunately”.  An Administrator needs to turn on a feature after installing the WCF Data Services.  A new project is started in Visual Studio.  In SharePoint 2010 and Visual Studio 2010, SharePoint project templates come out of the box.  That’s cool and several people in the crowd acknowledged seeing other demos, but no one admitted to having hands on experience.

Several files are referenced are pasted in from Clipboard, SharePoint basic js files, ADONET, jQuery, and jQuery-ui.  In the code, you typically see three different approaches.  Declarative, imperative, and the jQuery approach.  Everything tonight that is shown will be the imperative approach.  On the web, you always see declarative (using xmlns, it looks nice, but it is too magical).

There are two data types, DataContext knows how to talk to OData services and WCF Data Services.  A Subtype is the AdoNetContext knows how to talk to WCF Data Services.

Then, he starts to explain the code.  $create is a shortcut to create things.

dataview=$create(Sys.UI.Dataview,

{

autofetch: true,

dataProvider: dataContext,

fetchOperation: …

$get(‘userStories’)

}

<div class=”sys-template”)

<div> { {Title }} </div>  //this is a one way binding, like a read view.

</div>

Just in time compiling sometimes takes a while even though nothing changes.  Not sure why this happens.  The items were pulled and displayed in a list.  A background style was applied and some other script was pasted into the ASPX page in Visual Studio, and the userStories showed up as index cards on a corkboard background image.

Now to drag and drop the index cards onto the corkboard and create a master view so when you click on a userStory from the list, it will pop up on the corkboard.  He moved it around on the corkboard because he applied jQuery-ui draggable to the userStories div.  But after a page refresh, the index cards moved back to their original place.  So, custom columns X and Y were added to the userStories which were Tasks contents that can be synched with Outlook.  These new columns are to keep track of the screen coordinates so upon display, they will remain in place.

sys:style=”{{…can use sys to identify a template syntax in an attribute.  Inside the function call, string concatenation can be used.  First, though, the sys namespace needed to be defined xmlns:sys = “Javascript:sys”.  The sys templating allows the class style to be dynamically set from the item’s X and Y values.  Pretty neat.  Normally, you would have to compute these values in javascript and could not do it inline with your HTML.

After dragging and dropping, the new X value is assigned inside the jQuery dropped routine.

Sys.Observer.setValue(obj, “X”, newX) updates the DOM and prepares the object to be saved back to the server.

Fiddler is opened so that we can see exactly what is going on.  The .svc call is returning a $batch.  The dataview keeps track of what JSON objects are being changed and only sends those to the server.  That is pretty efficient.

<div> { {Title }} </div>  //this is a one way binding, like a read view.

<div> { binding X } </div> //this is a two way binding.

Note: if you use this binding in a <input type=”text”> HTML element, it will automatically update the JSON objects and the DOM so you do not need to type the Sys.Observer line above.

Now we are going to work on the Master Detail view and add an edit button to the Detail view.  Here live binding is used.

Sys.bind(“DetailDataView”,…)

<img sys.bind=…/>

Clicking on the edit img of a userStory Task, the object becomes “selected” so the binding knows when the edit input box is typed in and it automagically updates the DOM so you see the read only version of the userStory Task in the background change.  Pretty neat!

To conclude, you will need to learn a new syntax, but writing inline code in your HTML to generate styles from properties of fetched SharePoint items and live bind objects between the DOM and in-memory JSON objects is very powerful.  Also, the ASP.NET AJAX 4 is able to only send the data for items that have changed back to the server.  That is smart bulk loading.  Lee was adamant that he was not a javascript developer, but I thought he did a great job at putting together his demo and modifying his code on the fly during the demo.  I am not sure how difficult it will be to deploy WCF Data Services on a SharePoint server, but I would recommend users who are not strong in javascript to look into this technology.  If you are already strong in javascript, then there will be less benefit at leveraging this new, but powerful technology from Microsoft.

Thanks, Lee, for a great presentation.  Well done.

Lee Richardson’s Twitter ID: @lprichar

Lee Richardson’s blog: http://rapidapplicationdevelopment.blogspot.com/

LeeNicSmall