Download
1 / 14

The Art and Science of the SharePoint XSLT List View Web Part - PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' The Art and Science of the SharePoint XSLT List View Web Part' - shelley-reese


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
Scenario: Part

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: Part

A CSS File

A Static HTML File

A Folder full of Images

A Comp


Procedure
Procedure Part

  • 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
Demo: Spot News Part

  • 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
What is XSLT? Part

  • 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
XSLT Processing Part

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
What is the XSLT List View Web Part? 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
Best Practices (summary) Part

  • 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
Tips and Tricks (1) Part

  • 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 [email protected] syntax, e.g.:

    <xsl:value-of select="@Title"/>


Tips and tricks 2
Tips and Tricks (2) Part

  • 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


ad