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?
Magic Data View Builder: http://t.co/qOQMKBFV
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.
RT @spdustin: Magic Data View Builder: http://t.co/WWmqnNN6 >> looks quite interesting
@modery Thanks for checking out the video
http://t.co/gzAHvz7b
Great work Dustin! Are there any issues you can forsee when using this magic on a publishing site?
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.
Nifty #SharePoint XSL “Magic” http://t.co/uwNGxOg3 by Dustin Miller
Magic Data View Builder – http://t.co/2giMWYMB – #SharePoint #LVWP #XSLT #DataView #DVWP
Admittedly I haven’t tried it out yet, just looked over the source code last night… Do you have you any plans with supporting SSL or will it *just work*?
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.
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.
That’s the very next thing I’ll add
Very cool!
The way DVWP and XSL should be. Just magical. http://t.co/SlR9EA91
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.
Parece que hoy todo gira alrededor del DVWP #SharePoint2010: Magical Data View Builder: http://t.co/tpmOnHsJ
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…
Cheers,
Matt
I’ll do that with the next update, Matt
[Free]Magic Data View Builder http://t.co/chmcFHlh is Marvelous!
RT @speheather: The way DVWP and XSL should be. Just magical. http://t.co/YRG0PGNN #sp2010 #sharepoint
Introducing the Magic Data View Builder – Dustin Miller Our SharePoint Experience http://t.co/0aKfBv6Y
Introducing the Magic Data View Builder http://t.co/hGKU87Yk “it just takes a creative approach” > agreed, client code is powerful
One thing right off, I notice pagination does not work.
Nope. Not yet.
I think I love you! I mean that professionally. You make XSL understandable.
Thanks, Tamara!
Dustin Miller Rocks w/ his Magic Data View Builder. http://t.co/5MxorDO6. He makes it easy. #SharePoint
This is going to save many people a lot of time. Well done and thanks for sharing!
Awesome! I cannot wait to see you advance this great time saving tool.
Next up for my Magic Data View Builder: Preview, Save to SP and assign as XSLLink all in the browser. Stay tuned to http://t.co/gzAHvz7b
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.
Thanks for the report! My next update (probably today) will correct this issue.
I had the exact same problem right now, looking forward to trying your builder ! I’ll check for updates, thanks!
[...] on March 22, 2012 by Dustin Miller Updated my Magic Data View Builder with cool new features. Info and video in the original post.Posted in: UncategorizedPosted by Dustin Miller.Bookmark the permalink. Post navigation ← [...]
RT @speheather: New and cool updates added to the Magic Data View Builder http://t.co/SlR9EA91
Thanks again this is a great time saver. Keep up the good work.
This looks really good. My only problem is, it isn’t working. I am using ie9. I get the 3 tabs at the top (with no formatting) and clicking on them does nothing. I can bring up the right hand side bar but cannot drag and drop anything………..anyone else have these issues?
Use Firefox. It doesn’t work in IE.
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).
This is awesome (but I knew it would be). Way to go Dustin!
Nice. I’ll give it a try.
Looks awesome!
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…
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.
This is very cool!
This is awesome… If you are looking for something to add (for those of use REALLY code challenged) how about styles?
Great idea – a sort of template library.
Magic Data View sounds great. You explanation in the video is very clear and compelling. When I try it on tomresing.com I get an error that looks like a funny capital C. http://tomresing.com/SitePages/MagicDataViewTry2.aspx Maybe it’s my custom master page.
It works in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites. Maybe that’s it?
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?
It works in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites.
Very cool! Do you have any plannings on adding support for IE9?
Thanks!
It does work in IE9 if “compatibility mode” is turned off. By default, “compatibility mode” is turned on for intranet zone sites.
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).
I’m looking into some randomness to that – Out of curiosity, does the URL to the library where you’re saving have any spaces?
[...] Introducing the Magic Data View Builder – Dustin MillerOur SharePoint Experience Want to make SharePoint output the markup YOU want when you create a List View? [...]
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.
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.
Yeah, this tool rocks!!! Kudos… Is there any sites posted yet that show all the manners of jQuery integration that have been accomplished yet using this tool? That would be a spectacular development on top of this valuable asset…
Not yet, that I know of – but I’d love to hear of your successes with the tool!
Still catching up with old post – but this is magic – so so so practical – Data view builder to work with XSLT on the fly – http://blog.sharepointexperience.com/2012/03/06/introducing-the-magic-data-view-builder
[...] Magic Data View Builder Great XSL support: Tool 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. [...]
[...] 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 … Continue Read More… [...]
[...] menuSkip to primary contentSkip to secondary contentHomeSharePoint TrainingCSS ChartMaster PagesMagic Data View Builder SP TechCon 2012 in Boston Posted on July 24, 2012 by Dustin Miller SP TechCon is in full swing [...]
[...] to create and edit the XSL is the Magic Data View Template. You can find out more info on it at: http://blog.sharepointexperience.com/2012/03/06/introducing-the-magic-data-view-builder/. (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) [...]