Using XSL to render SharePoint webparts

Certain SharePoint web parts such as the Content by Query web part, Table of Contents web part, and the Summary Links web part have a property that allows you to select the XSL stylesheet that controls the HTML output of the webpart.

This allows us to override the default Microsoft html layout for each of the webparts. Which is fantastic as much of the default html output of web parts is rubbish html code, horrible for accessibility, and also full of sizable and unnecessary html.

For example a html list, such as the Summary Links web part, you would expect to be rendered in a <ul> <li> list tags, but by Microsoft default is rendered as nested tables. Not good…

By default, you can select the type of Item Style you want from the web part properties in the ‘Modify Web Part’ menu option, giving you a list of styles to choose from. The list of these styles corresponds to the xsl templates in the XSL stylesheet.contentqueryxsl1.jpg

So… how to change this or add your own style? Well the default XSL stylesheets used to control html output for the webparts are located in the Style Library à XSL Style Sheets folder of the site.Here you’ll find several xsl files, each controls different parts of the output of the web part. The most useful of these stylesheets is the ItemStyle.xsl , where you can add a new style by copying and pasting one of the existing style code (<xsl:template>) and renaming. Change the HTML inside the xsl template item slightly so that you can tell if it is using the new style (eg. I put ‘My custom style renderring’ to appear after each item). After you save you should then see your custom style appear in the list of Item Styles in your web part properties.contentqueryxsl2.jpgcontentqueryxsl3.jpg

Select the new style from the ‘Item Style’ web part properties dropdown, and save the web part properties. (You may need to check in ItemStyle.xsl and force refresh the browser for it to appear – sometimes the XSL is cached)contentqueryxsl4.jpg

So this shows how to change the rendering of a list. If you change the main or header xsl  files, you can control the surroundings of the list items, such as changing <table> to <ul> etc.

WARNING! I would recommend (and I’m sure Microsoft would too!) you leave these default stylesheets alone, as these styles impact many different webparts throughout the site and all child sites. Instead make a copy of the stylesheets and customise those to your heart’s content.

In order for your webpart to use these new stylesheets, you can set values of hidden properties of the webpart to select the MainXslLink, HeaderXslLink, and ItemXslLink properties, to point to your new customised xsl files. To find these properties, either export the web part from the web part menu (this saves a *.webpart file that you can modify and re-import as a customised webpart), or modify the webpart properties through SharePoint Designer itself.

contentqueryxsl5.jpgcontentqueryxsl6.jpg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: