Rapid Solution Iteration with the Data View Web Part (DVWP) and jQuery

The other day I got a question about what I mean when I say that working with the Data View Web Part (DVWP) and jQuery can allow you to rapidly prototype solutions.

In my experience, both the DVWP and jQuery allow you to rapidly iterate on a potential solution for a business use outside the normal deployment cycle which is likely to be in place for a production environment. You can even do this directly in the production environment (assuming that things aren’t too locked down) on real data.

Here’s a real-world example. I’m working with someone on a site which will be used to communicate about career paths within a department. There are a number of different components to this, but one is a straightforward FAQ. The person I’m working with doesn’t really know exactly what she wants it to look like, even though FAQs are pretty standard stuff. To show her what was possible, I quickly dummied up a new list using the Announcements template. I renamed the Title to Question, and added a new multi-line text column called Answer and another new Yes/No column called “Show on Home Page?”. At that point I had the basic “container” for the data and I had her add in some representative items.

Next, I added a very simple DVWP to the default.aspx page of the site to list the Question columns for the items which had been tagged to show on the home page. (I used a DVWP here so that I could more tightly control the formatting. Announcements views are a little tricky to pare down with a standard List View Web Part [LVWP]). Then I created a new View page for the FAQ list which contained a DVWP rather than the standard LVWP. I made this DVWP look more like you would expect an FAQ to look: all the Questions listed at the top as anchor links to the full Question/Answer pairs below. We also toyed with the idea of using jQuery to expand/collapse the Question/Answer pairs on a click.

At some point, we will probably create a custom Feature and some Custom Web Parts to allow others to add FAQ functionality like this to their sites. This will be a true, deployable solution which we can offer and provide some consistency across sites. In this case, I was able to rapidly iterate without worrying about the two week deployment cycles at the client or the amount of time it would have taken a .NET developer to do the work. We looked at new stuff daily or even hourly to hone in on what she wanted.

This is a pretty simple example, but hopefully, it will gove you a little more insight into what I mean about rapid iteration using the DVWP and jQuery.