2007 jQuery Form Enhancements; Preserving Site Definition
During a recent discussion with @TashasEv, the topic came up of preserving site definition when rolling out jQuery form enhancements. The preservation of site definitions is something that many people ignore, but in the interest of best practices I figured it was worth a blog post to explain some of the pros and cons, and offer some solutions.
Many of us (myself included) use jQuery to enhance out of the box (OOTB) SharePoint forms. jQuery allows us to make a variety of minor or major changes to the usability and functionality of forms either through straight jQuery or with Marc Anderson’s (@sympmarc) popular jQuery Library for SharePoint Web Services (SPServices). Cascading dropdowns, content relevant fields, dynamic changes to styling, and other enhancements can greatly improve the user experience and the data entry side of a form, but can be the achilles heel of your support model if done incorrectly.
In layman’s terms, the site definition is the foundation on which all OOTB SharePoint sites, templates, forms and pages are based. Essentially, this allows you to manage assets within the site by managing the site definition. An easy to understand example would be upgrading your SharePoint environment. If a version upgrade or service pack comes along that touches the site definition, all objects using that site definition will be updated accordingly. The issue lies in the fact that when you open your OOTB SharePoint form in SharePoint Designer and edit it, you essentially disconnect that form from the site definition. Six months down the road when you upgrade your environment or push that next service pack, your form will now not be updated. Additionally, if you find yourself in a position where you need to consult Microsoft for support, Microsoft can very well point out that you’ve customized the OOTB code, and refuse your support request.
Application Wide Quick Launch Control
I ran into a unique challenge on a recent project related to the use of the Quick Launch. I had a Web Application that was broken into about 10 Site Collections to facilitate access control, but had the potential to become an absolute bear to manage. The Quick Launch needed to be the same across all of the Site Collections, which resulted in having to physically touch the configuration of each Site Collection or Subsite every time a link needed to be added or changed. There had to be a better way, right? Enter the SPServices jQuery library by Marc Anderson (@sympmarc). It should be pointed out that I’m working in WSS 3, but I don’t know of anything that would prevent this from working in MOSS (although the jQuery selectors may need to be changed).
Flash Tag Clouds in SharePoint
So I was at work last week when one of my colleagues came over and asked about the ability to make a dynamic tag cloud in SharePoint. We had collected a bunch of ideas from the workforce and they wanted an intuitive way to display them all in a dynamic fashion. My first thoughts were of the cumulus WordPress plugin that I use here on my blog, and after turning to trusty Google I discovered that I wasn’t the only one who had this idea. We based our work off of this blog post, with of course a few tweaks of our own.
This of course emphasizes my points of the usefulness of and my discovery of jQuery as it uses some simple jQuery to access the SharePoint list data. We made our integration a bit cleaner by utilizing the jQuery Library for SharePoint Web Services. We also used jQuery to fade the screen and display the tag cloud in a “floating” popup over the page content so we could keep it nice and big, positioned on top of the SharePoint page.
jQuery Introduction
Show of hands, who knows about jQuery?
I’m willing to bet that if you’re in the IT or web world, you’ve heard the name thrown around. Whether or not in the context of AJAX it doesn’t really matter–but how often do you just skip over the topic and not really give it a thought? Until a few months ago I hadn’t really paid much attention to jQuery, or the implementation of AJAX in my work. I’d used it a few times, and call me old fashioned, but the platform I was working on worked just fine, met customer expectations and performed well. This was until I started following a few key people on Twitter, who I now blame for my obsession of trying to introduce jQuery in everything I do.
So what is jQuery? Simply put it’s a web application framework written in JavaScript that enables rich manipulation of HTML. Odds are that every single one of you has in someway touched jQuery on a website; be it through dynamic styling, form validation, chromeless popups, or rich data interactivity. Everything from that slick drag-and-drop capability for ordering your Netflix queue to the vast majority of Facebook interactivity is all possible with the use of jQuery.
jQuery Integration
Now fast forward past the initial discovery of the real power of jQuery; how do you practically integrate it into your platform? It’s one thing to see the potential, and quite another to make that integration clean and functional. There’s some great jQuery plugins available, and while you may have heard of some of the big ones (prototype, draggable, etc.) there’s literally hundreds out there. jQuery offers a UI library that includes a host of useful user interface elements, and when you want to take your platform to the next level, Marc Anderson has written a jQuery library for Windows SharePoint Services that easily enables rich data features such as cascading drop-downs, manipulation of lookup fields, and dynamic use of the SharePoint web services. Admittedly (credit where credit is due), I fully blame Marc for my new found obsession with jQuery.