Sunday 3 October 2010

My SP2010, AJAX and jQuery code samples and slide deck

Had fun speaking at the first UK SharePoint Saturday event yesterday - around 400 attendees, great speakers/topics and great organisation. It felt like quite a lot had gone into my talk, so it was great that I had a full room with people standing round the edges and got great feedback (including on Twitter) afterwards. I’d written a lot of code samples on jQuery, the SharePoint Client OM (JavaScript version) and AJAX requests for the talk – over the next few articles I’ll publish these in some detail, but if you’re keen they can be downloaded along with my deck now from http://db.tt/rUq5lm9

I wanted to tackle this topic as I think it’s important that I (and probably you, if you’re a SharePoint developer) transition my skills to be able to build AJAX apps. Obviously different people are at different stages with this, but in my experience it’s certainly not the default approach yet. If you want some evidence on why it’s important, an interesting exercise is to compare the user experience when you re-order items on these two out-of-the-box SharePoint pages:

  • Manage User Properties (within the User Profile Service Application) - [CentralAdminHost]/_admin/ServiceApplications.aspx (terrible UI, I spent 4 hours reordering some properties on this page once!)
  • Manage Navigation (on a publishing site) – [PublishingSiteUrl]/_layouts/AreaNavigationSettings.aspx (much better UI, no postbacks)

A core theme of my talk was that whilst building AJAX-style apps on SharePoint 2010 seems complex, it can be distilled down to 3 core techniques. The full agenda of my talk was:

  • 3 core techniques for building AJAX-style apps on SharePoint 2010
    • Using jQuery to manipulate the page – although jQuery is a large topic, my view is that there are only about 7 key methods/events which give you most of what you need
    • Using the JavaScript Client OM to query lists/add list items – again, whilst the Client OM can do many things, once you understand the pattern for working with lists everything else is similar
    • Using jQuery’s 3 AJAX methods with a HTTP handler – for me this approach is simpler than WCF, and is a key technique which unlocks the door to AJAX apps since you can write whatever server-side code you require and call it asynchronously
  • Tips and tricks
    • How to get Intellisense with jQuery and the Client OM
    • How to debug JavaScript
    • Using FireFinder to hone your jQuery selectors
    • How to easily return JSON-formatted data from a handler and work with it on the client
  • Migrating an existing SharePoint app from postbacks to jQuery/AJAX
    • Here I demo’d the steps I used to migrate the application page in my SP2010 Feature Upgrade Kit to jQuery/AJAX (courtesy of code snippets)

Since you never fully grok new learnings from a 1 hour presentation, a couple of attendees asked if I’d expand on the contents in my blog, and that’s exactly what I want to do. So my next blog series will cover this ground in close detail. As I mentioned in my talk, I don’t consider myself a guru in this area so comments/suggestions especially welcome!

That link again to my code samples/deck is http://db.tt/rUq5lm9

10 comments:

Anonymous said...

Chris, this is the best one and would help a lot on SP 2010. Although I have one request is there anyway you can RECORD A VIDEO for this as unfortunately we are not in UK and have missed a great opportunity listening to your presentation. Would be great if you can plz post a VIDEO of the same slides.

Chris O'Brien said...

Hi,

Unfortunately the venue didn't have recording facilities, and right now I don't either. The demos require audio and I don't have a microphone etc.

However I understand it makes sense to publish videos and I may look at this in the future.

Sorry I can't help with this right now :(

Chris.

Anonymous said...

Looking forward to your future posts!

About jQuery: "only about 7 key methods/events which give you most of what you need" - I could agree with that. Should we take this one step further and say that actually what we need is not jQuery, but just a 20 kb library for SharePoint?

Chris O'Brien said...

@Christophe,

It's an interesting viewpoint. However, how would we gain here? Once the jQuery library has been loaded once it will always be retrieved from the local browser cache (until cleared, but this doesn't happen often). Also, for highly-optimized public facing sites there is the option to reference from Google/Microsoft's CDNs, so even the first time hit may not be an issue.

I guess my point was that in terms of learning jQuery, you can learn 10% of it and be 70% productive (so not quite the 80/20 rule!). I can definitely believe that a core 20Kb library would make sense in some scenarios, but I'm basically happy with the jQuery deal.

Appreciate the comment.

Chris.

Steven Summone said...

Hi Chris, it was great meeting you and getting to chat to you at Sharepint at Sharepoint Saturday (my first ever SharePoint event). I was in powershell talk so I am looking forward to your Ajax and jquery blog. Your a very modest person and you give alot to the community. I'll take your advise a try out twittering the sharepoint community more.

westerdaled said...

Chris,

Good talk on Saturday. I am definitely going to use jQuery more.

Just loaded the 2 projects in the sample via the .FeatureUpgradeUpgradeKit solution. I see from the error in vs2010 that DummyFeatures project is missing. Do we need this? Perhaps a quick readme might be useful covering the deployment for testing..

Chris O'Brien said...

@westerdaled,

No, you don't specifically need the DummyFeatures project - it contains an empty Feature (no elements) of each scope. I used it when developing the FeatureUpgradeKit so I always had some Features around which needed upgrade (these were the rows showing up in the table in my final demo). If you'd like to work with the FeatureUpgradeKit from the last demo, then by all means I can update the package - otherwise it would take 5 mins to create a similar project.

I didn't include because I thought most folks would be interested in the jQuery/Client OM/AJAX samples, and to perhaps look at SPFeatureUpgradeKit. Let me know if you think it would be useful - apologies for uploading s .sln file which referenced a missing project.

Thanks!

Chris.

westerdaled said...

chris

Thanks for your reply. Assuming, I don't need the DummyFeatures project.I have attempted to deploy the solution package...

Unfortunately, I get 2 of the following errors ( each relevant to the packages in both the demo and upgradekit projs). I think this is related to TFS which I.m not using.


"Error 3 The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters. C:\Users\Daniel\Documents\Visual Studio 2010\Projects\ChrisOBrien_SPS_jQuery_AJAX\ChrisOBrien_SPS_Presentation\SampleCode\COB.SharePoint.Utilities.FeatureUpgradeKit\Package\Package.package COB.SharePoint.Utilities.FeatureUpgradeKit"

Perhaps a quick readme to cover deployment to SP2010 Foundation/Server.

cheers

Daniel

Chris O'Brien said...

Hi Daniel,

This message isn't connected to TFS in any way, it really means what it says - there are too many letters in the path. Suggest reducing the length of the path by copying the project to something shorter than C:\Users\Daniel\Documents\Visual Studio 2010\Projects\ChrisOBrien_SPS_jQuery_AJAX\ChrisOBrien_SPS_Presentation\SampleCode\, e.g. C:\Dev.

HTH,

Chris.

westerdaled said...

Doh ... I hadn't realised I had nested the dir structure... Now deployed!

Thanks

Daniel