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?

80 thoughts on “Introducing the Magic Data View Builder”

  1. Nice work with the XSL tool mate, that looks great in terms of a nice fast way to customise the look and feel of a view. That would definatly make coding up a solution easier for those who are “codingly challanged” or like me just lazy.

    1. Nope – in fact, in a later release I’ll have a Magic CQWP Builder. ๐Ÿ™‚ I also plan to support Web Part Connections, and creating custom SharePoint List Forms.

    1. Should work although you’ll get a mixed security error because I load the code editor and download helper over http – I’ll update those URLs soon to avoid that.

  2. This is really slick. Any way you could do a live preview of the XSL instead of trial and error? That’d be beneficial for those of us cutting our teeth w/ XSL.

  3. Dustin,
    This is absolutely bad-ass. I was already impressed, but when you clicked the gaudy green +, I actually chuckled. Very awesome work.
    Haven’t played with it yet, but I sure look forward to.

  4. Would it be possible for you to zip up the files this solution uses so it’s easy to download? That’d be helpful for situations where the farm I’m on isn’t connected to the internet.

    Very nice work bro…

  5. Hi Dustin,

    some initial feedback from me after testing it:
    I followed your steps from the video (uploaded .xslt to a doc lib, referenced it from a web part) and immediately got “Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Microsoft SharePoint Foundation-compatible HTML editor such as Microsoft SharePoint Designer. If the problem persists, contact your Web server administrator.”
    Checking the logs, I found the following details (sorry for long comment):
    “Error while executing web part: System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index
    at System.Collections.ArrayList.get_Item(Int32 index)
    at System.Collections.Specialized.OrderedDictionary.get_Item(Int32 index)
    at Microsoft.SharePoint.WebPartPages.SPListNavigator.get_PropertyValue()
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime, XPathNavigator {urn:schemas-microsoft-com:xslt-debug}current)
    at (XmlQueryRuntime {urn:schemas-microsoft-com:xslt-debug}runtime, XPathNavigator )
    …. (rest omitted)”

    This was for a document library. For a Tasks list, it is working.

    Other comment: if there are no items in the list, then of course the bottom part isn’t shown.

  6. This is GREAT. Except this new version just isn’t working in IE9. Really hoping security will grant my request for Firefox… otherwise I’ll have to keep using the old one (which also worked, but not nearly as cool).

  7. I just read the post and watched the video, this looks very interesting! I definitely plan to try it out.
    That said, what caught my attention was the “Tested only with FireFox 10 and Safari 5”, as well as the html5 tags like “article” in the video. Does the warning only apply to the tool, or also to the output? Most SharePoint users are on IE, and not necessarily the latest version…

    1. Just the tool – It works in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites. Not earlier versions of IE, though.

  8. This is awesome… If you are looking for something to add (for those of use REALLY code challenged) how about styles?

  9. This still does not work in IE9. Since that is the only browser we are allowed I would really like to try this. Is there a way do download the older version until the kinks are worked out?

    1. It works in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites.

    1. It does work in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites.

  10. Dustin, great concept but I can not get it to save my changes. the app loads fine, edits fine but preview fails and the save button does not save. Any ideas? (Using FireFox on clean test system that currently is running pretty smooth).

    1. I’m looking into some randomness to that – Out of curiosity, does the URL to the library where you’re saving have any spaces?

  11. Man I wanted this to work so bad! Well it did work with a simple announcement list but when I tried it with a document library no dice (and I really needed this for custom document libraries too).

    I keep getting an “Unable to display Web Part…”error message.

    1. I’m working on doclibs – there is a big difference in the data that comes into the Magic Data View Builder from a document library.

  12. Really a great builder. But it appears that I have a problem saving the XSL file. Perhaps because I am working on Azure servers or any other compatibility with SPS2013. Its a great tool, and it would be even greater to see new development to this. Keep up the great work!

    1. I am also having issues with saving the XSL, I am using Firefox and the OOB Announcements list. Any ideas on why this is happening?

      1. Nevermind, I just saw that you need to have Flash installed to be able to use the “Save XSL” button. I am copying and pasting the code instead.


      2. I have the same issue.
        You can work around this by copying the xsl from the editor and paste it into a txt file on your desktop, save it as yourname.xsl and upload it to the XSL document library

Leave a Reply to Dustin Miller Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.