Thursday, May 17, 2012

XSLT List View Web Part Best Practices, part 1

The Art and Science of the SharePoint XSLT List View Web Part

This post follows the presentation I gave to the Puget Sound SharePoint Users Group on May 17, 2012.
Click here to get the Visual Studio Solution "Spot" that I demonstrated as well as the Power Point deck I used in that presentation.




This post walks you through the steps to get a working XSLT file that customizes the way your SharePoint list is rendered using the SharePoint 2010 XSLT List View Web Part (XLV). This procedure works with any SharePoint list, stock or custom. You can use the resulting XSLT file as the starting point to create any customized display of your SharePoint list. Most importantly, this series of posts provides guidance and best practices on how to manage your XSLT file as part of a Visual Studio 2010 SharePoint solution.

Scenario:

  • Your UI designer creates a nice visual design.
  • Your client loves it
  • A central element of the UI should be a SharePoint list, but it doesn't look anything like a SharePoint list
  • Your UI designer gives you static HTML and CSS

What do you do?

  1. Use Visual Studio to develop your SharePoint List
  2. Obtain a Known-Good SharePoint XSLT file using SharePoint Designer to “harvest” the XSLT of your List View
  3. Create a “Deploy” Project Folder outside your Visual Studio Solution. include:
    • Your XSLT file
    • Your CSS file
    • You JS file, if any
  4. Set the XSL Link Property of your XSLT List View Web Part to point to your custom XSLT file in your Style Library
  5. Create a “LoadXSLT.ps1” script that load your XSLT and CSS from your Project Folder into the Style Library of your site
I know, I know: Yikes!! 
No worry. Attached Visual Studio Solution -- Spot -- contains the resulting project from these steps.
Subsequent posts explain the above steps in step-by-step detail.
The next blog post will walk you through how to create these elements of a known best-practices appraoch to developing this "News and Announcements" feature of your site maximizing the Out-Of-The-Box capabilities of SharePoint 2010.

2 comments:

  1. Hi Martin,

    This source is very useful,but I am unable to get the source code from provided links, pls provide the source.

    Swati

    ReplyDelete
    Replies
    1. Swati,

      Thanks for bringing this to my attention. Please try again. The link should be https://www.dropbox.com/sh/oqp384jcpd1yq8f/JIkr9h3F0L
      My dropbox was over-full, and I cleaned up though I'm not sure that was the problem. I did just test this using someone else's account and it worked. Let me know if it works.
      Martin

      Delete