Tuesday, June 19, 2012

XSL Link for SharePoint 2010 Web Parts

When using a lot of Links list in SharePoint 2010 the view can be quite 'boring'. To add some spice I have created an XSL style sheet and applied to List webpart through web part properties. Easy and fast:
  1. Get the XSL style sheet.
  2. Modify (if required)
  3. Upload to Style Library > XSL Style Sheets
  4. Edit web part and under Miscellaneous > XSL Link paste the path.
  5. Set Appearance > Chrome Type to 'Border Only'. Apply and save.
 Style classes are embedded in the XSL file which you may move on to your CSS files.
This would work on any list which is created on 'Link' list. I have added some logic to get list name (title) using XSL functions as it is pretty hard to do so. Let me know if someone knows an easier way, I can get the title in SharePoint Designer but on actual page it disappears. I think the View node is not available when XSL renders on page.
   
Again, this XSL is targeted towards Links list in SharePoint 2010 but can be extended/reused for other libraries as well. Just change [@Columns] as per your CAML.

<xsl:stylesheet version="1.0"
  xmlns:xsl=http://www.w3.org/1999/XSL/Transform
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl"
  xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method='html' indent='yes'/>

<xsl:template match='dsQueryResponse' xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">

<style>
  .QLinksHeader{
            PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px;
            DISPLAY: block; MARGIN-BOTTOM: 2px; BACKGROUND: #0d5995; COLOR: white;
            FONT-SIZE: 14px; PADDING-TOP: 2px }
  #QLinks {
            PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px;
            PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; }
  #QLinks LI {
            BACKGROUND-IMAGE: url(/_layouts/images/icongo.gif); PADDING-LEFT: 2em;
            BACKGROUND-REPEAT: no-repeat; MARGIN-LEFT: 8px; FONT-SIZE: 12px;
            PADDING-BOTTOM: 5px }
  #QLinks LI a:hover{ text-decoration:underline; }
</style>

  <div cellpadding="10" cellspacing="0" border="1" >
    <SPAN class="QLinksHeader">
      <xsl:value-of select=" substring-before(substring-after(/dsQueryResponse/Rows/Row/@FileRef,'Lists/'),'/')" >
      </xsl:value-of>
    </SPAN>
    <ul id="QLinks">
      <xsl:apply-templates select='Rows/Row'/>
    </ul>
  </div>
</xsl:template> <xsl:template match='Row'>
  <li>
    <a href="{@URL}">
      <xsl:value-of select="@URL.desc" ></xsl:value-of>
    </a>
  </li>
</xsl:template>
</xsl:stylesheet>

1 comment: