XSLT List View Web Part Best Practices, part 2

The Art and Science of the SharePoint XSLT List View Web Part (part 2)

This is the second post that 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 (part 2) blog goes in detail through the best practices I mentioned in the "procedure" summary in yesterday's post.  For reference these best practices are listed below and described more step-by-step in the rest of this post:

Best Practices (Summary)

1. Lay the Groundwork
2. Obtain the Known-Good SharePoint XSLT file. This becomes your Custom XSLT File.
3. Create a "Deploy" Project Folder in Visual Studio but outside your SharePoint Solution
4. 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.
5. Create a LoadXSLT.ps1 script that loads your custom XSLT file to your Style libraray with one click

1. Lay the Groundwork

Before we get to the XSLT, we need to lay the groundwork. The goundwork consists of:

1. Create a SharePoint site where you will do your development work, e.g. /sites/spot
2. Create the Visual Studio Solution
3. Add Site Columns
4. Add a Content Type
5. Add List Definition from Content Type
6. Modify the List Schema to make the default view contain all the important columns

The above steps are pretty much cut-and-dired SharePoint development so I won't go into detail. The finished "News and Announcements" list is available as the "Spot" sample solution at the drop box location above. The list provides the data but not the visual presentation we need.

2. Obtain a Known-Good SharePoint XSLT file using SharePoint Designer 2010

Obtain a Known-Good SharePoint XSLT file using SharePoint Designer to “harvest” the XSLT of your List View. This is an extremely valueable trick:

Use SharePoint Designer 2010 to Add the XSLT List View Web Part to the site home page.

1. Open the Site in SharePoint Designer
2. Under Customization, click Edit site home page asd;lfk
3. SharePoint designer displays the Home.aspx page in Design mode. Click in the center or wherever you want to put the News and Announcements web part.
4. Select the "Insert" tab on the SharePoint Designer Ribbon.
5. Select the "Data View" button on the "Insert" ribbon. This will display the lists and Document Libraries available:

1. Select the News and Announcements  list we previously created.SharePoint designer adds the WebPartPages:XsltListViewWebPart  to the page
2. Choose split view to see the markup <WebPartPages:XsltListViewWebPart>

Now "Harvest" the XSL created by SharePoint from this new web part

Still in SharePoint Designer 2010, click the "Design" tab in the ribbon
In the "Actions" section of the ribbon (towards the right) click "Customize XSLT"
SharePoint Designer displays the markup for the web part including the <xsl> element that defines the full XSLT markup used by the web part.

1. The "Customize XSLT" ribbon button displays a couple of choices. Select "Customize Entire View".    SharePoint Designer expands the entire XSLT into the Code pane.
2. Select code in SharePoint Designer to view the complete markup of the web part.
3. You want to copy the XSLT part of the and save it on disk so that you can add just that file to the "Spot" solution.
4. Find the <xsl> element that marks the start of the stylesheet. This will be some 10 lines down. The start will look like this:
<xsl>
  <xsl:stylesheet xmlns:x=http://www.w3.org/2001/XMLSchema

5. Copy everything between the <xsl> starting tag and the </xsl> closing tag, not inclusive.  There will be a lot. Copy to your clipboard.

3. Create a "Deploy" Project Folder in Visual Studio

Paste the XSLT you have in your clipboard into a new file in your Visual Studio Solution as follows:

1. Open your Visual Studio solution
2. Add a new Project Folder called "Deploy" that is OUTSIDE the SharePoint project
3. In the "Deploy" folder, create a new file of type "XSLT" called, e.g. SpotNewsStyle.xslt
4. Paste the XSLT from your clipboard into this XSLT file.

Your SpotNewsStyle.xslt file should start with <xsl:stylesheet> and end with </xsl:stylesheet>

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

Manually upload your XSLT file to the Style Library in your site
While developing your XSLT, you may short-cut the SharePoint <deploy> or F5 step and simply edit the XSLT file in Visual Studio, then upload the file to the Style Library of the site and refresh the browser:
1. Open your Site in IE
2. Site Actions --> View All Site Content
3. Select Style Library from the list of Document Libraries
4. To conform with convention, create a new folder named "XSL Style Sheets" in the Style Library if your library does not already have one. Do this in the Style Library by clicking "Documents" in the ribbon.  Click "New Folder" in the Ribbon. Name the new folder "XSL Style Sheets".
5. Open the XSL Style Sheets Folder.
6. Click Add Document.
7. In the "Upload Document" dialog, click Browse… and navigate to the project folder (\StylesAndScriptsModule) where you saved your SpotNewsStyle.xslt file.
8. Select your SpotNewsStyle.xslt file and click Open.
9. After your XSLT file is uploaded to your Styles Library, right-mouse-click on the new file and copy shortcut so you have the full and correct path on your clipboard for the next step.


Set the XSL Link Property of the XSLT List View Web Part to point to your custom XSLT
1. Open the home page of your Site in IE
2. Edit the page
3. From the Web Part Properties menu select Edit Web Part
4. SharePoint displays the properties of the XSLT List View Web Part on the right
5. In the Properties pane, scroll down and expand the "Miscellaneous" section
6. In the field marked XSL Link , PASTE or enter the path to the SpotNewsStyle.xslt file you stored in the Style Library:

7. Click OK

8. Save your edits to the page.

The benefit of this arrangement is that you will not have to re-edit this home page while editing the XSLT file. All  you have to do is upload your edited XSLT file to the Style Library then refresh the home page and it will render the XSLT if it can.

The next post will describe a PowerShell script that automates this step of uploading the XSLT file to the Style Library in one click.  This streamlines the process so you can edit-upload-test in a tight iterative cycle in order to really do your XSLT development inside SharePoint.