Introducing the Magic Data View Builder

Want to make SharePoint output the markup YOU want when you create a List View?

Updated! Check out the new features below…with new video, too!

For years, I’ve advised people who have the guts and the skills to ditch Visual Studio and learn more about XSL, CSS and JavaScript (including libraries like jQuery). Maybe I’m a rebel, I don’t know, but I don’t need to write C# to create a kick-ass front end component for SharePoint. So much can be done with the product out of the box, it just takes a creative approach.

Many people know me as the original proponent of the Data View Web Part, first introduced back when WSS v2.0 was released. While SharePoint has come a long way since then, the web developer experience for creating custom views hasn’t. Last week, as I was rehearsing my demonstrations for my SP TechCon session (on, naturally, the Data View Web Part) it occurred to me: This could be easier. Easier to demonstrate. Easier to write. Easier to get excited about. Easier to get the creative juices flowing.

I thought about how I teach custom DVWP code in our SharePoint UI/UX Experience. I tell people about the XSL that SharePoint Designer has to offer – both the patent-pending (no kidding) XSLT List View Web Part, and then “classic” Data View Web Part (from which the XSLT List View Web Part inherits its base functionality). I then tear down all the stuff that SharePoint hands you, and start from a simple base template. But still, it could be easier. It could be more accessible. It could be more friendly to web developer/designer types. It … well, hell, it has to be done in a day if I want to include it in my SP TechCon session.

The approach: Create an intelligent XSL template that you can upload to your SharePoint site, and point any XSLT List View web part to it. The XSL should take care of figuring out which columns are in your view, what kind of data they present, and give you a table from which you can copy and paste the necessary XSL elements to create the design you want.

Before I risk the TL;DR crowd abandoning this post, let’s just get on to a video of how it works.

Version 1 Video

Updated: Version 2 Info and Video

Changes since previous version:

  • New editing experience
  • Pull-out tray with fields/attributes to be inserted
  • Preview of the source XML
  • Preview of the transformed view
  • Source of the transformed view
  • Save directly to SharePoint, no intermediate save to desktop necessary
  • TODO: Fixes for document libraries
  • TODO: Fixes for FireFox and “Assigned To” type fields.

Okay, you want it, right? Come and get it. Play back the video to learn how to use it.

Download the Magic Data View Builder (right click and save to your computer)

Note: Tested only with FireFox 10 and Safari 5.

Now: go play with it. And then: tell me what you think. What else would you like to see in the builder? How cool do you think it is? How much does it suck? Did it make it easier for you to create kick-ass totally customized views of your SharePoint content?