I’ve been building an interesting web part for a client recently using jQuery. The web part dynamically displays navigation breadcrumbs with functional drop downs based on related SharePoint lists. Along the way I have been compiling my list of best practices for this kind of web part development. Here are my recommendations for writing a SharePoint 2010 web part with jQuery.
I hope you can you benefit from some of the lessons I have learned!
Use NetBeans IDE: I should mention here that Visual Studio 2010 is my favorite overall development environment. But, I also strongly believe that you need to use the right tool for the job. If you are doing client side coding, VS should not be the first thing you reach for in your tool belt. I chose NetBeans for its javascript code completion, contextual help and extremely useful auto-formatting capabilities. I find it very hard to read and write jQuery code without keeping the code clean and formatted.
Use Firefox with Firebug: Chrome and IE 9 both have decent built-in developer tools, but I consider them more appropriate for casual, one off use. When you have a detailed job to do there is simply no better tool than Firebug for debugging script and analyzing style elements on a web page.
Make use of REST-based OData services offered by SharePoint 2010: Built on WCF, SharePoint 2010 offers web services out of the box that accept OData HTTP requests. Simply browse to “/_vti_bin/listdata.svc/” on your SharePoint application and you can see how your list information is made available. By submitting a query such as: “/_vti_bin_listdata.svc/Reports?$orderby=ReportName” you can retrieve a sorted list using nothing more than an HTTP GET request. There are many possibilites for these kinds of queries. You can read more about the URI conventions and see plenty of examples here: http://www.odata.org/developers/protocols/uri-conventions
Use Ajax calls with JSON: When you browse to the ListData.svc using your browser (IE, for example) you can see (using a tool such as Fiddler) that the response comes back to you in XML-based ATOM format. Nice, but a bit too heavy over the wire for my tastes. I find that you can get much better performance by making use of the JSON format which is supported by the OData protocol. You can construct your AJAX request in jQuery like this to make sure you get lightweight JavaScript Object Notation back:
var response = $.ajax({
url: "/_vti_bin/listdata.svc/Reports?$orderby=ReportName",
dataType: "json"
})
.fail(function (jqXHR, textStatus) {
alert(textStatus);
})
