07 Aug

jQuery, jQuery UI, ASP.NET Web Services and SharePoint for Feed Syndication using Argotic Framework

Okay, so I recently completed building an end to end  Feed Viewer Web Part for SharePoint 2007.

I used jQuery for AJAX calls and DOM manipulation.

jQuery UI for creating Tabs and a ‘custom’ Accordion control

ASP.NET Web Services

Argotic Syndication Framework  to get, aggregate and generate feeds. (This free library is real cool stuff. Let me add a Web 2.0 style banner in cheers to it!) RSS Can

‘No Server Code’ User Control to load the Feed Viewer entirely using JavaScript code.

WSPBuilder to code, build and package my web part, lists and the custom Web Service into SharePoint.

While building this, I faced a lot of technical issues and built workarounds on them to finally roll it out successfully.

Let me foreach over the issues and workarounds.

1. ASP.NET Web Service does not accept an AJAX Call using a GET Request. Also, it does not honor the AJAX request if the content type is not explicitly specified as contentType: “application/json” in your AJAX call.

So you can right away throw the jQuery AJAX methods – get(), post() and getJSON() methods out of the window when your server side is an ASP.NET Web Service. Why – How can you explicitly specify the content type using these methods?

So we are left with the low level $.ajax jQuery call (its actually pretty neat to be called low level.) and here is a sample code snippet:

Read about this restriction from The Gu. So that leaves us with another crippling limitation – We cannot make a cross site/domain (XSS) jsonp call to our web service. (Coz jsonp can be used only with GET requests and not POST.) SO this means our web service will have to be hosted within SharePoint’s domain itself and not on a separate web application even on the same server so that our jQuery web part can make a call to it.

Another headbanger: If you want to simply display SharePoint data on a web page (outside SharePoint) through this web service, then you will have to enable forms authentication on your SharePoint site or do a Windows Authentication Handshake before making this web service call. Not getting into that detail as its a very rare case of implementation.

Read more in detail about making jQuery calls to ASP.NET AJAX Web Services here. Thanks Dave for such a wonderful series!

Did I mention that the plain vanilla ASP.NET 2.0 Web Service is not capable of handling scripted requests (as in from JavaScript). Yes, that’s true. You either need to install the AJAX Extensions 1.0 for ASP.NET 2.0 or upgrade your .NET Framework to 3.0 or 3.5. Then you will be able to add the following tag to your web service class to make it accessible via scripted calls:

There is of course more to making your service and web site AJAX enabled. Discover options to AJAX enable an existing web service here. Neat video.

Best workaround for these problems: Use WCF! Works with GET; ContentType not restricted to json; REST support using UriTemplates and more. I tried this too but since upgrading to .NET 3.5 on the production server was a little too much to ask for this, I stuck to Web Services. If you are giving WCF a trial, might I also suggest the OOB Syndication Framework support in WCF. (Might help if your clients are against using open source plugins such as Argotic in their production environments.) It has support for RSS and ATOM as well as a Generic Syndication format which one can extend/override and use as you wish.

Now to the UI:

jQuery UI is a neat framework which provides OOB Javascript Tab controls complete with CSS themes (choose your theme and download the CSS). It also provides a neat ICON sheet with different colour overlays for different UI states. Check it out too.

View jQuery UI Demos here.

There are tabs and accordions available OOB for me to use. This was all I needed for my feed viewer web part. The root categories would be the tabs, sub-categories would be placed into accordion panels. Alas, I was too happy too early. jQuery UI is great, no doubt. But when it comes to nesting one control in another, it fails miserably. Maybe it wasn’t built for it but it surely made my life difficult just when I was thinking things were going smooth.

So I used the tabs from the UI. Then wrote my own jQuery code to create an accordion control which would load feed data from a SharePoint list on expanding. Of course, I made use of the library’s CSS classes for the accordion – active, inactive states etc.

My final UI looks like this:

Of course, how can I forget my friendly jQuery Plug-ins: jFeed and Pager

Now over to the server.

On the Server I needed a Web Service which my Web Part would call:

1. Get a category hierarchy for my tabs and accordions to render. I chose to send an xml string with sub-categories nested under categories in the xml with important data such as CategoryId which I hid into hidden fields in the accordion.

2. Get an aggregated feed data on a per category basis once user expanded a certain sub-category panel. This would require me to send information such as CategoryId, PageNo and pageSize to the web service via an Ajax call.

My Web Service method signature was like this:

image_thumb[21]

and my AJAX call looks like this:

  TIP: To ensure that my web part is configurable, I need to allow the user/admin to configure the parameters such as List Names, Service URLs etc. Now since all my functionality is on the client, I needed to make sure that any Web Browsable Property I create gets added as a hidden input control to the Web Part controls so that my jQuery can pick it up. Remember to add a unique class name to the hidden control and not to use the ID to identify the control in jQuery, since ASP.NET adds its own additional meta characters to uniquely ID server controls but maintains class names as they are.

Next was a simple task to reference the Argotic Library in my web service and do the needful. The Argotic library is available in both .NET 2.0 assemblies as well as .NET 3.5 assemblies. It provides abstraction to fetch feeds, aggregate them and create new feeds and save them to XmlReader streams. Pretty neat stuff.

Now since I was using a jQuery plug-in that accepted either ATOM or RSS feed data and converted them to html, I only needed to aggregate multiple feeds into one Feed object on the server and then save the contents into a stream to return to my client. The plug-in would then parse the xml for available fields and generate appropriate HTML. I needed only the title and link to the item so I modified the feed a little to render only items I need.

And the majority of my functionality is done. Now remained to enhance it to make the Paging work, add a refresh button which would refresh the feed data and set an auto timer for it to refresh it automatically every 5 minutes and the likes.

I added all my JS code to a User Control. Created a WSP Builder Project and created a Web Part that would load this control and also add appropriate Web Properties. Added features to package my dependent SharePoint Lists and their instances and also a feature to deploy my custom web service to SharePoint and add my dlls to the GAC.

Read about deploying lists and list instance using features and solutions on André Vala’s blog. This is the blog series I have referred the most till date. Thanks André!

Read about hosting a Custom Web Service in SharePoint: newbie tutorial | msdn walkthrough

It was a thoroughly enlightening experience building this web part. Adios for now!

Your thoughts please..