XSLT List View Web Part Best Practices, part 3

This is the third post that follows the presentation I gave to the Puget Sound SharePoint Users Group on May 17, 2012.

Parts 1 and 2 of the XSLT List View Web Part Best Practices described a procedure that sets you up with a Visual Studio Solution and a known-good XSLT file derived from SharePoint.

The benefits of this setup are two-fold:

• You can edit your XSLT in Visual Studio 2010. For any large XSLT file, Visual Studio is the right place to edit your XSLT, particularly when the rest of your project is in Visual Studio.  Visual Studio gives you intellisense, syntax color-coding, and more importantly, a robust environment that respects your source code as sacred. SPD sometimes does funny things to your files.
• You can iteratively deploy and test your XSLT in-situ meaning,  in place in SharePoint where it's really going to run in production. There are scores of great XSLT development tools on the market but none of them seem to understand the SharePoint-specific quirks of XSLT developed to run inside an XSLT List View Web Part.

This post describes a PowerShell script that automates the key step of uploading the XSLT file you are editing in Visual Studio to the Style Library of your test site in one click. This script streamlines the process so you can edit-upload-test in a tight iterative cycle in order to really do your XSLT development inside SharePoint.

Recall from part 2 that we configured the XSLT List View Web Part to use the "SpotNewsStyle.XSLT" file located in the Style Library.  We did this by editing the web part properties and setting the XSL Link field to point to our custom XSLT file in the Style Library. This means we can iteratively tweak our XSLT file, upload the XSLT file to the Style Library, and test by just refreshing the browser.  This faster, less invasive and safer than editing the web part every time. The PowerShell script below reduces the already quick process of uploading the XSLT file to the Style Library to one click.

The LoadStyle.ps1 script

The LoadStyle.ps1 script below (part of the sample "Spot" solution available here) is designed to reside in and be run inside the "Deploy" folder of the "Spot" Visual Studio solution. You will certainly need to edit this file to make it work in your environment. However, the changes you need to make should be obvious and straightforward. This script has the name and relative path to the custom XSLT file (SpotNewsStyle.xslt) and Css style file (SpotStyles.css) hard-coded. It copies those two files from where they reside to the current working directory.  It then opens my test SharePoint server at the hard-coded URL http://vm01  and uploads both files to the Style Library.

Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction
    "SilentlyContinue"
Start-SPAssignment -Global
Copy-Item ..\StylesAndScriptsModule\SpotNewsStyle.xslt . -Force
Copy-Item ..\StylesAndScriptsModule\SpotStyles.css . -Force
$spWeb = Get-SPWeb -Identity http://vm01/sites/spot/
$spFolder = $spWeb.GetFolder("Style Library")
$spFileCollection = $spFolder.Files
$xsltFile = Get-ChildItem -LiteralPath $(Get-Childitem SpotNewsStyle.xslt)
$xsltFileStream = $xsltFile.OpenRead()
$spFileCollection.Add(
    "Style Library/XSL Style Sheets/SpotNewsStyle.xslt",
    $xsltFileStream, $true)
$xsltFileStream.Close()
$xsltFile.Delete()
$cssFile = Get-ChildItem -LiteralPath $(Get-Childitem SpotStyles.css)
$cssFileStream = $cssFile.OpenRead()
$spFileCollection.Add("Style Library/SpotStyles.css", $cssFileStream, $true)
$cssFileStream.Close()
$cssFile.Delete()
Stop-SPAssignment -Global
After uploading to the Style Library, it deletes copies of the files that it created in the current working directory.  It does this so you can run this script over and over and it will always get the latest new version from the Visual Studio directory.

The Development Process

With all these pieces in place, you may iteratively develop your XSLT file by:

1. In Visual Studio, edit your custome XSLT file and click "save"
2. Switch tasks to your SharePoint Management Shell (PowerShell) and run the LoadStyle.ps1 script shown above.
3. Switch task to your browser which should already have your SharePoint site open with the page that has the XSLT list view web part displayed.
4. Press F5 to refresh the browser.

The Web part re-reads the newly uploaded XSLT list view and renders to your browser. This process seems less integrated than the Visual Studio F5 debug button but it's actuall much faster (Your browser can already be running - - no need to launch IE) eliminates a whole set of issues associated with Visual Studio trying to "compile" your XSLT.

Conclusion

When you are developing XSLT for the SharePoint XSLT List View Web Part, you really only need to save your file, upload it to the Style Library, and refresh your browser in order to test it.  These blog posts described how to streamline your development process to the bare essentials freeing you to repeatedly code-and-test iteratively in the most efficient manner possible.  I hope it helps. <MC>

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.

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.

Presentation on XSLT List View Web Part at PSSPUG May 17, 2012

I will be presenting at the next meeting of the Puget Sound SharePoint Users Group next Thursday, May 17th. The meeting goes from 6:30 - 8:30PM. Food and networking begin at 6:00PM. Michael Iem will be presenting at 6:35 on Measuring and Understanding SharePoint Performance and I will be presenting at 7:30 on the XSLT List View Web Part. The user group meeting is held at the Microsoft office (CIVICA Office Commons) at 205 - 108th Ave NE, Suite 400, Bellevue, WA 98004 . See http://www.psspug.org.