Having fun with XSLT in SharePoint, 2007-style

12 December 2009 - Filed under Tech Notes

I have been wanting to write about SharePoint 2010 for a while, but decided to hold off until I have had some real first-hand experience with the new beast. The first hurdle: getting hold of hardware that is beefy enough to run it. I remember when Windows 95 debuted; all the PC magazines were going “4MB of RAM won’t cut it… you really need 8MB of RAM to be able to run this thing.” Times have changed, units have changed, but the numbers remain the same. 4GB of RAM won’t cut it. You really need 8GB of RAM to be able to jump on the 2010 (Office 14) bandwagon.

Nonetheless, SharePoint Server 2007 isn’t going anywhere anytime soon. It will still be around for a long time. SharePoint Server 2007 configuration and development will remain a big market, as would 2007-to-2010 upgrade projects over the coming years. There is still much to be explored and documented in the realm of SharePoint Server 2007.

Simple problems, no cowboy solutions

From my perspective, one of the notable improvements in SharePoint 2010 over 2007 is the extensive use of the XSLT list view (XLV) Web Part. It sounds like the XLV Web Part has struck a balance between the Content Query Web Part (CQWP) and the Data View Web Part (DVWP) while removing many of the unnecessary quirks along the way. It comes down to being able to do seemingly mundane things in SharePoint lists such as:

• Showing the file type icons (Word, PDF, etc) and file sizes along with the titles of documents fetched by a site collection-wide query
• Filtering out all announcements that have expired, and not letting any cowboy change that behaviour
• Hyperlinks linking directly to the resource when clicked, and not the content item that in turn references the link only to require an additional mouse click

The question is, how do you do these things in SharePoint Server 2007? Using the Content Query Web Part (CQWP) is only a partial answer because the out-of-the-box CQWP doesn’t support the requirements given above. And these are all real-life problems that I have had to solve. This is where a little bit of XSLT knowledge helps. Now that SharePoint 2010 uses XSLT even more extensively so much so that XSLT is now the default way of showing information in lists, it will definitely help to make friends with XSLT.

Preparation

There are some common preparatory steps before playing with XSLT in 2007 CQWP’s:

1. Create a Content Editor Web Part with the correct initial parameters.
2. Identify the missing information and find out the internal name(s) of the column(s).
3. Export the CQWP, open it in a text editor, and add the identified columns to the CommonViewFields node.
4. Upload the modified CQWP into the Web Parts gallery, delete the original CQWP, and replace it with an instance of the modified CQWP.

To get you through this part, there is a step-by-step guide on the Microsoft ECM blog. Usually, the tricky part is finding the internal name of the field (column) to add. Once you’re past this stage, it’s time to open SharePoint Designer and do some XSLT’ing. Navigate to /Style Library/XSL Style Sheets and open ItemStyle.xsl. First, add this namespace to the root node (xsl:stylesheet):

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

You only need to do this once. Then, duplicate the Default template node (xsl:template) and give it an easily identifiable name without spaces. Also change the match attribute so that it contains the new name, in this pattern:

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

Now you’re all set for action.

Solution 1: Display file type icons and file size information

The CommonViewFields node of the Web Part should contain the following:

File_x0020_Type,Text;
HTML_x0020_File_x0020_Type,Text;
FileSizeDisplay,Computed;
File_x0020_Size,Lookup;

Open ItemStyle.xsl and create a new xsl:template node. In it, add a new xsl:variable node as follows:

<xsl:variable name="FileTypeIcon">
  <xsl:value-of select="@File_x005F_x0020_Type" />
</xsl:variable>

To present the icon, insert the following code immediately below <div id=”linkitem” class=”item”>:

<xsl:choose>
  <xsl:when test="string-length($FileTypeIcon)!=0">
    <div class="image-area-left">
      <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
        <img class="image" src="/_layouts/images/{ddwrt:MapToIcon(
        string(@HTML_x005F_x0020_File_x005F_x0020_Type),
        string(@File_x005F_x0020_Type))}"
        alt="Type: {@File_x005F_x0020_Type}" />
      </a>
    </div>
  </xsl:when>
  <xsl:otherwise>
    <div class="image-area-left">
      <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
        <img class="image" src="/_layouts/images/icgen.gif" />
      </a>
    </div>
  </xsl:otherwise>
</xsl:choose>

What this does is look up the file extension and load the corresponding icon image in the 12-hive. If no extension is given, then it resorts to the generic icon (icgen.gif). The icon is placed to the left of the document title.

Next, do the file size. Place the following code immediately below <xsl:value-of select=”substring-before($DisplayTitle,’.aspx’)”/>:

<xsl:if test="string-length(@FileSizeDisplay) &gt ; 0">
  <xsl:if test="number(@FileSizeDisplay) &gt ; 0">
    (<xsl:value-of select="ceiling(number(@FileSizeDisplay)
    div 1024)" /> KB)
  </xsl:if>
</xsl:if>

This places the file size in KB to the right of the document title. Note that in the actual code there should be no gap between the &gt and the semicolon following that.

Save the XSL file and switch to the browser. Open the Web Part, go to the Presentation pane and apply the new item style.

Solution 2: Force the filtering out of expired announcements

The CommonViewFields node of the Web Part should contain the following:

Expires,DateTime;

Open ItemStyle.xsl and create a new xsl:template node. Wrap the entire content of the template (but excluding the xsl:template tag itself) with this xsl:if condition:

<xsl:if test="(normalize-space(string(@Expires))='') or
(number(ddwrt:FormatDateTime(
string(@Expires),2057,'yyyyMMdd')) &gt ;=
number(ddwrt:FormatDateTime(
string(ddwrt:TodayIso()),2057,'yyyyMMdd')))">

…

</xsl:if>

Again, remember to remove the space between the &gt and the semicolon following it. The code turns the Expires date into a yyyyMMdd string and compares it with today’s date in yyyyMMdd format. You can replace 2057 (UK English) with 1033 (US English) or any other locale ID, but that doesn’t matter because things get converted into yyyyMMdd in the end anyway.

Save the XSL file and switch to the browser. Open the Web Part, go to the Presentation pane and apply the new item style.

Solution 3: Link to the resource’s URL directly

This is particularly useful when querying lists of URL’s. The CommonViewFields node of the Web Part should contain the following:

URL,URL;

Open ItemStyle.xsl and create a new xsl:template node. Locate the line that begins with <xsl:variable name=”SafeLinkUrl” and replace it with this line:

<xsl:variable name="SafeLinkUrl"
select="substring-before(@URL,',')" />

That’s it! Save the XSL file and switch to the browser. Open the Web Part, go to the Presentation pane and apply the new item style.

Conclusion

XSLT programming is certainly able to polish up a Content Query Web Part. Hopefully, SharePoint 2010 will make all of this a more trivial, less painful experience.

2009-12-12  »  JK