Web Parts and XSLT

eXtensible StyleSheet Language and Transformations

XSL is very similar to CSS in its functions. CSS is used to primarily style HTML and XSL is used to style the XML language. The difference is in the format as well as the fact that CSS is limited to calling on specific tags while in XSL, anything can be a tag. XSLT is the transformations subset of XSL for web medias. It is used to display XML as XHTML.

To link an XML file to an XSLT file for styling it, you need to add a reference to the file in the XML file. The reference link would look like this:

<?xml-stylesheet type=”text/xsl” href=”nameOfYourXslFileHere.xsl”?>

Adding this line is similar in function to declaring a CSS file in an HTML file or master page. It simply links to the file and allows the styling to be separated from the functional logic.

XSL consists of three parts: XSLT, XPath, and XSL-FO.  XSLT is for transforming XML, XPath is for navigating XML, and XSL-FO if for formatting XML for different medias.  Below is a crash-course table on some of the basic elements of XSL, XSLT, and XPath (XSL-FO isn’t used that much and will be avoided in this table). Since XSL doesn’t have many direct names for element like CSS and HTML do, this table is fairly short. Keep in mind that anything can be a text can be turned into a tag with XSL though. This table contains elements and functions mixed together. Functions are called with the “fn:” text and, as is the case with most languages, contain a parameter parenthesis set ().

XSL and XSLT are huge subjects that often require reading a book dedicated strictly to the languages. Because of this, we will not discuss XSL and its subsets in depth in this manual. If you want more information or training on XSL, XSLT, XPath, or XSL-FO, W3Schools has put together a really intuitive and user friendly guide on XSL athttp://w3schools.com/xsl/xsl_languages.asp and for XPath athttp://w3schools.com/xpath/xpath_intro.aspx .

Out-of-the-box XSL files

Below is a sample XSL file followed by some of the common elements in the code and what they do. I will iterate again that this is a high level overview and another book dedicated to XSL and XSLT should be sought out for more advanced programming using this language.

To see all of the OOTB XSL files that come with SharePoint, using Designer, navigate to the “All Files” link at the bottom of the left navigation and click on “Style Library” ⇒ “XSL Style Sheets”. Below are the OOTB files that should be present.

Modifying these files to include your own XSL elements should be avoided as a best practice. As with OOTB master pages and CSS files, it is wiser to copy the contents of one file to a new file and modify it under a different name.

XML Viewer Web Part

The XML viewer Web Part is a bare bones Web Part for displaying XML data and styling it using XSLT. It is located in the “Content Rollup” Web Part category. After it’s placed on a page, click the content area link that reads “open the tool pane”. Clicking this will open the Web Part properties dialog on the right.

Inside of this dialog are areas that you can use to link external XML and XSL files. Additionally, you can edit this Web Part’s XML or XSL directly by clicking the “XML Editor…” or “XSL Editor…” buttons in the “XML” section of the dialog.

XSLT list view Web Part

All views in SharePoint make use of the XSLT list view Web Part (XLV). This Web Part uses XSLT to display various filters, groups, and other conditional formatting parameters to sort data in the way your needs dictate. For instance, if you have a massive list with hundreds of files but only need to display select files for a specific page, you would place the XLV Web Part and then use either Designer or XSLT directly to style the list to apply the sort criteria you want. Either way you choose to edit the file, you will be editing the XSLT and not the difficult to use Collaborative Application Markup Language (CAML) that was used in previous versions of SharePoint. Since we are discussing XSLT, we will focus on customizing the views in a XLV Web Part through direct XSLT programming instead of creating views through the Designer buttons and controls.

Note: We will be using Designer to modify the XSL, but will not be using the user intuitive buttons for creating a view for demonstration purposes.

Create a new blank wiki page and place a list in the content area. The XLV is located in the “Lists and Libraries” category in the Web Part placement options. As stated previously, all views will be placed in the XLV by default, so simply select any list type in this category. For this example, we will use the “Links” list since it’s easy to understand. Below is the links list that we placed along with 3 sample links as test data.

Open the newly created page in “Advanced Mode” in Designer where you placed your “Links” list. If it doesn’t automatically open in “Advanced Mode” click the “Advanced Mode” button. The start of the XML for the list begins with the <XmlDefintion> tag. The start of the XLV Web Part should begin a few lines above the XML definition. It starts with a <WebPartPages:XsltListViewWebPart> tag.

Place your cursor in the XLV tag and click the “Customize XSLT” dropdown in the “Design” tab in the ribbon under the “List View Tools” group. This dropdown has two options: “Customize Entire View” and “Customize Item”. Choosing the “Customize Entire View” option will modify the entire list while the “Customize Item” option modifies a single item in the list. Choose “Customize Entire View”. By doing so, you have significantly increased the code on the page, although you might not see it until you scroll to the bottom. Ensure that the page is opened in split view in Designer and click one of the links in the list in the “Design” view. This should move your cursor to the XSL call that controls this column. Now that you’re here, you can type in any custom action on the given column for the list. Keep in mind that since we are editing the entire list, any changes that are made will be made to all items in a given column, not just the one you clicked. Once you’ve taken an XSL tutorial or read a book on the language, styling Web Parts becomes easier than styling with CSS in SharePoint.