140 likes | 283 Views
The Art and Science of the SharePoint XSLT List View Web Part. Martin Cox Architectural Consultant Neudesic LLC. Scenario:. Your UI designer creates a nice visual design Your client loves it
E N D
The Art and Science of the SharePoint XSLT List View Web Part Martin Cox Architectural Consultant Neudesic LLC
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?
If you are lucky, your Designer provided you with: A CSS File A Static HTML File A Folder full of Images A Comp
Procedure • Use Visual Studio to develop your SharePoint List • Obtain a Known-Good SharePoint XSLT file using SharePoint Designer to “harvest” the XSLT of your List View • Create a “Deploy” Project Folder outside your Visual Studio Solution. include: • Your XSLT file • Your CSS file • You JS file, if any • Set the XSL Link Property of your XSLT List View Web Part to point to your custom XSLT file in your Style Library • Create a “LoadXSLT.ps1” script that load your XSLT and CSS from your Project Folder into the Style Library of your site.
Demo: Spot News • Create the Site • Create the Visual Studio Solution • Add Site Columns • Add News Content Type • Add List Definition from Content Type • Modify the List Schema to make the default view contain the important columns
What is XSLT? • Extensible Stylesheet Language Transformations • A W3C (World Wide Web Consortium) Recommendation • A Declarative XML-based language • Used for the transformation of XML documents • Output document may be XML (or HTML, or XHTML…) <xsl:stylesheet version="1.0“ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict"> <xsl:template match="/"> <html> <head> <title>Expense Report Summary</title> </head> <body> <p>Total Amount: <xsl:value-of select="expense-report/total"/></p> </body> </html> </xsl:template> </xsl:stylesheet>
XSLT Processing One or more XML sourcedocuments One or more XSLT stylesheetmodules The XSLT template processing engine (the processor) One or more resultdocuments http://en.wikipedia.org/wiki/XSLT
What is the XSLT List View Web Part? • Microsoft introduced the XSLT List View Web Part (XLV) In SharePoint 2010. (Greg Chan 2009 http://blogs.msdn.com/b/sharepointdesigner/archive) • When you Add a View to a Page, the XLV is what you get • When a SharePoint Web Part reads a List, the OM gives the Web Part all the data in the form of an XML Document • The XLV transforms the XML from the OM to the XHTML you see in your browser
Best Practices (summary) • Obtain the Known-Good SharePoint XSLT file Via SharePoint Designer and the "Customize XSLT" ribbon button • Create a "Deploy" Project Folder in Visual Studio but outside your SharePoint Solution Collect the following artifacts in this Deploy folder: • XSLT file • CSS file • JS file • LoadXSLT.ps1 script • Any other PS scripts • Upload your Custom XSLT file to your Style Library and set the XSLT Link Property of your XSLT List View Web Part to Point To It • Always keep your custom XSLT file in your Style Library… CSS, too. • Create a LoadXSLT.ps1 Script that loads your customer XSLT file to your Style Library • Script should load your CSS file, too.
Tips and Tricks (1) • The XML coming in to your web part matches the XSL select path /dsQueryResponse/Rows • Every input XML always has a root node, and the forward slash “/” is the template match: <xsl:template match="/" ddwrt:ghost="hide"> • Columns (Fields) are reference with the “@” syntax, e.g.: <xsl:value-of select="@Title"/>
Tips and Tricks (2) • SharePoint’s main.xsl file implements a ton of global values you cannot live without when developing your custom XSLT files • E.g.ServerRelativeUrl is necessary to format paths without hard-coding your server name • Use the curly bracket syntax to evaluate in markup e.g.: href="{$ServerRelativeUrl}/Style%20Library/SpotStyles.css” • Full list documented on MSDN under XSLT Global Parameters