Tags

, , ,

Microsoft is pushing SharePoint development as much as possible on client side by introducing JSLink. But still, I cannot consider old XSLT is dead. So in SharePoint 2013, server rendering is still an available option.

Server Render

To enable server render you just need to tick the Server Render checkbox and provide the path to an XSLT file in XSL link property. Once is enabled, customization will be done on external XSLT file.
There are some articles about how to customize the webpart, but most part of them are a little bit complicated. So I will resume my article on simple customization tasks very likely to be requested in real development.

Change content of a cell

Let’s assume we have field (single line of text), called location, and customer is requiring to display “My location + @Location” instead of location only. This is done pretty straight forward, as you can also note by looking on the code below.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
<xsl:include href="/_layouts/xsl/main.xsl"/> 
<xsl:include href="/_layouts/xsl/internal.xsl"/> 


<xsl:template name="ShowLocation" ddwrt:dvt_mode="body" match ="FieldRef[@Name='Location']" mode="Text_body" ddwrt:ghost="show">
<xsl:param name="thisNode" select="." />
<xsl:param name="location" select="$thisNode/@Location" />
<xsl:if test="$location != ''">
	<xsl:value-of select="concat('My location is ',$location)" disable-output-escaping="yes" />
</xsl:if>
</xsl:template>
</xsl:stylesheet>

The XSLT is overriding the default content of table cell. Please note it cannot affect TD itself tag or what is outside the TD tag. To change the TD itself, please see the next point.

Change the cell in the view

Sometimes, customer might request to change completely the table cell and its content. A possible reason is to apply a different CSS class on TD tag. Here is how you can do this.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
<xsl:include href="/_layouts/xsl/main.xsl"/> 
<xsl:include href="/_layouts/xsl/internal.xsl"/> 
<xsl:template name="ShowLocationWithTd" match="FieldRef[@Name='Location']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body" ddwrt:ghost="show" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:param name="thisNode" select="." />
<xsl:param name="location" select="$thisNode/@Location" />
<!-- I can change here even the parent tag, if required -->
<td class="mycustomcssclass">
	<xsl:value-of select="$location" disable-output-escaping="yes" />
</td>
</xsl:template>
</xsl:stylesheet>

Change the table row

Let’s go now to a level up, which mean table row. For example, customer required to change the table row into a different tag and display a custom content in it.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
<xsl:include href="/_layouts/xsl/main.xsl"/> 
<xsl:include href="/_layouts/xsl/internal.xsl"/> 

<xsl:template mode="Item" match="Row" ddwrt:ghost="show">
<xsl:param name="thisNode" select="." />
<xsl:param name="location" select="$thisNode/@Location" />
<!-- TD was changed with DIV -->
<div>
	<xsl:value-of select="$location" disable-output-escaping="yes" />
</div>
</xsl:template>
</xsl:stylesheet>

Change entire view

This is actually my favourite technique because I can easily change the view to look 100% different than default one (quick example in the picture below) and I can write my own and clear XSLT code.

XSLTFull Customization

The code to achieve this is simple and I dare to say is much clear than auto-generated one. The development becomes a simple xsl:for-each iteration, which can be done even by non-experienced developers.

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all"> 
<xsl:include href="/_layouts/xsl/main.xsl"/> 
<xsl:include href="/_layouts/xsl/internal.xsl"/> 
<xsl:variable name="Fields" select="$XmlDefinition/ViewFields/FieldRef[not(@Explicit='TRUE')]"/>

<xsl:template match="/" ddwrt:ghost="hide">
<div style="display:block; width:100%;">

	<!-- Show the toolbar-->
	<xsl:call-template name="ListViewToolbar"/>
	
	<!-- Displaying the records -->
	<xsl:for-each select="/dsQueryResponse/Rows/Row">
	<xsl:variable name="thisNode" select="." />
	<div style="width:100%; display:block;">
		<xsl:for-each select="$Fields"> 
			<xsl:variable name="FieldName" select="current()/@Name" /> 
			<xsl:variable name="FieldDisplayName" select="current()/@DisplayName" />       
			<div style="display:block; width:100%">
				<strong><xsl:value-of select="$FieldDisplayName" disable-output-escaping="yes" /></strong>: <xsl:value-of select="$thisNode/@*[name() = $FieldName]" disable-output-escaping="yes" />
			</div>
		</xsl:for-each>
	</div>
	<b /><br />
	</xsl:for-each>


</div>
</xsl:template>

</xsl:stylesheet>

I have presented here some concrete and simple examples about how to use XSLT for view customization. I will periodically update this article with new example and additional information, but if you have question, please don’t hesitate to contact me.

Advertisements