"One of the most impressive web pages I have ever seen in SharePoint"

Several people have asked me what I showed Dan Antion last week which caused him to say “Marc began by showing us one of the most impressive web pages I have ever seen in SharePoint.” I’m not sure that it was actually all *that* impressive (I have better!) but it does do some pretty cool things.

I was showing Dan and his team some of the things you can do by developing in SharePoint’s Middle Tier. The reason I pulled this demo out of the vault was that it’s a pretty good example of the type of dashboard that you can build using garden variety SharePoint tools and a little ingenuity. No fancy BI add ons or KPIs here; we built what we needed with plain old Data View Web Parts (DVWPs).

The page I showed Dan and his team was one which I worked on with Marcel Meth (@marcelmeth) and Christina Wheeler (@cwheeler76) well over a year ago. Marcel was working with an organization here in Newton, MA, that wanted to build a Web site which would help households manage their carbon footprints. We put together a prototype using a hosted instance of WSS. Yes, WSS 3.0. People often dismiss WSS as being too underpowered to solve any sophisticated business problems, but that’s just not the case.

We built the prototype on spec and unfortunately it never saw the light of day, but we did have a lot of fun working on it.

Here’s the page I showed Dan:

What this amounts to is a dashboard for the household. Christina came up with a really nice, clean design for the site but keep in mind, while it looks pretty good, we dropped it midstream because we knew it wasn’t going to be used. It was going to be even better!

There are four Data View Web Parts (DVWPs) on the page. We decided to use DVWPs for all four Web Parts because we wanted to have very flexible control over the data displayed as well as the formatting of that data.

Household Demographics

Each household could be part of a team so that teams could compete to reduce their carbon footprint more than other teams which had similar characteristics. This DVWP showed the household’s info and a little bit about their team.

Household Size Details

We planned to use this Web Part to show what changes, if any, there had been to the overall household size, whether in square feet or number of people, which might impact the carbon consumption. We were going to allow the household to enter data either on a monthly or annual basis.

Household’s Annual Data

Here we displayed the most important pieces of data per household (we were going to collect more data points than we would show here).

Comparative Household Information

This is the really cool DVWP. Here we show the household’s performance against other households on several different measures. Since there can be a lot of variation in household size and number of residents, we wanted to allow each household to see the comparisons along each dimension. Over time our plan was to begin showing the comparisons for each household which made sense based on that household’s characteristics as well as the characteristics of its near peers.

The dropdown for year in the upper left of the DVWP changed the data to the year requested. We highlighted that year’s data based upon how the household compared to other households, both from the median and against the top 25% of households.

We did the calculations and formatted each cell based on calls to generalized XSL templates. For example, we built a template called GetPercentileValue which we could use to generate both the Best 25% and Median simply by passing in a different value for the Percentile:

xsl:call-template>

This template has been available in my SPXSLT Codeplex Project since the first release. By building generalized templates like this which we could call repeatedly, the XSL for this fairly complex DVWP ended up much simpler than it would have been otherwise. All told, the XSL for this one DVWP is about 600 lines, but it’s highly malleable because of the modular approach we took.

Of course, coming up with a good underlying information architecture was key to making all of this work well. That’s another place where we still had some work to do, but by creating five key interrelated lists, we believed that we could allow for easy data addition as well as a pretty sophisticated set of display mechanisms.

So you be the judge: impressive page or not?