1 / 14

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

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

shelley-reese
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Art and Science of the SharePoint XSLT List View Web Part Martin Cox Architectural Consultant Neudesic LLC

  2. 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?

  3. If you are lucky, your Designer provided you with: A CSS File A Static HTML File A Folder full of Images A Comp

  4. 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.

  5. 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

  6. Design a List, an XSLT and a CSS

  7. 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>

  8. 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

  9. 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

  10. 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.

  11. 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"/>

  12. 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

More Related