Create custom ItemStyle template for SharePoint

Question

I've created a custom ItemStyle_ContactDetails.xsl for a SharePoint 2010 content query web part, which points to this custom file via the ItemXslLink property. The web part will be filtered to display only one record for that department's contact info. The list it's reading has these columns:

@Title -- built-in SharePoint column
/dsQueryResponse/Rows/Row/@WorkAddress -- built-in SharePoint column
/dsQueryResponse/Rows/Row/@PrimaryNumber -- built-in SharePoint column
@EMail -- built-in SharePoint column
@Opening_x0020_Hours -- custom multi-line rich text column

The above names are what they're called in the Data View Web Part from another site. I had the following in that DVWP that worked for a local site:

<td colspan="2" class="ms-vb" style="text-align:center">
  <b><xsl:value-of select="@Title"/></b><br></br>
  <div style="margin-top:10px;"><xsl:value-of 
       select="/dsQueryResponse/Rows/Row/@WorkAddress"/> 
      (<a href="{@Map}">MAP</a>) 
  </div>
  Tel: <xsl:value-of select="/dsQueryResponse/Rows/Row/@PrimaryNumber"/><br></br>
  <a href="mailto:{@EMail}"><xsl:value-of select="@EMail"/></a>
  <p><b>Opening Hours:</b></p>
  <div style="position:relative; top:0; margin:0">
       <xsl:value-of select="@Opening_x0020_Hours" 
       disable-output-escaping="yes"/>
  </div>
</td>

How do I translate this to the custom ItemStyle_ContactDetails.xsl template? The user needs to see the info without having to click a link to get to it -- it's always going to be just one record for that department. Thanks.

Alex Alex · Accepted Answer · 2011-08-09T13:57:10

Some serious trial-and-error yielded the result, along with this great article: http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx

Maybe others trying this same thing can find this useful: You can edit the custom XSL file on the server via SPDesigner, but you can't do the same with the web part and hope to have the changes immediately reflected. You must export the content query web part, then edit the file in Notepad, etc., to make your changes to the following 3 items:

Change the ItemXslLink to point to your custom XSL file:

<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/ItemStyle_ContactDetails.xsl</property>
Change the ItemStyle item in the web part to reference your template name; the template name in the XSL file is ContactDetails:

<xsl:template name="ContactDetails" match="Row[@Style='ContactDetails']" mode="itemstyle">

So in your web part, you'd have this:

<property name="ItemStyle" type="string">ContactDetails</property>
Update the CommonViewFields to list your custom columns and their types:

<property name="CommonViewFields" type="string">WorkAddress, Text; EMail,Text; Contact_x0020_Department,Choice; Map,URL; Opening_x0020_Hours,Text; PrimaryNumber, Text</property>

Save the web part file and import (upload) it via the browser to your web part gallery. Each time you make changes to the web part, you'll want to do this; the XSL file can be edited and saved in SPDesigner and the changes reflect immediately in the browser.

Hope this helps someone who gets stuck like I was :)

Create custom ItemStyle template for SharePoint

1 Answers