Many of us have seen the Links List in SharePoint. It is a widely used list type for intranets, extranets and internet facing sites not only for its simplicity but also for it's built in ability to reorder items. This is done by clicking on the Change Order link in the actions menu, and it is also accompanied with a great UI. This is a wonderful feature that custom lists and libraries unfortunately do not have out of the box.
Alas as great as the links library may be with all its Re-Ordering goodness, that shall not be the theme of this post. Oh no, even with all the work the brilliant SharePoint engineers in Redmond had put into this list type, it seems they dropped the ball on one glaringly obvious feature. As many of us have seen, one of the really annoying quirks is the lack of an "Open In new window" option. What I am referring to is when you add the links list as a web part to a page, clicking on a link navigates away from the SharePoint site instead of opening it up in a new window or tab. Now us computer savvy of course know the work around to this "Just tell the user to hold down the ctrl key". Unfortunately this does not fly with many end users, or customers. Now believe me I was a skeptic when it came to the urgency of this feature. On one of our recent projects our project manager had warned from the beginning this would be a huge deal, but I just brushed it off. Until of course we started receiving user feedback after the beta release. And low and behold the majority of the complaints didn't have anything do with Workflows or InfoPaths or any of that other nonsense. It was about that freakin Link List not opening in a new window! So then I was sold. Now the question becomes how do we accomplish this in SharePoint? Well the solution I came up with is by using a DataForm web part in SharePoint designer. You start by going to the task panes menu and activating the Data Source Library.
Then with the data source library open, click on the Links list you are interested in and click show data.
Now you are ready to create your dataform webpart. This is done by selecting the fields you want and then clicking Insert Selected Fields as "Multiple Item View". Since all we are interested in is the URL field, this is all you need to select. Interestingly, SharePoint stores both the URL Text and the Link in this one field delimited by a column but we'll get to that later.
Now once you do this, you should see a data form web part on the page rendering a basic Links List. The next step now is to get it looking like the default Links List style with the bulleted items. Lucky for you I already went through the trouble of formatting the XSL. Simply strip out the XSL stylesheet and replace it with this one:
<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">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param name="dvt_apos">'</xsl:param>
<xsl:variable name="dvt_1_automode">0</xsl:variable>
<xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:call-template name="dvt_1"/>
</xsl:template>
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">RepForm1</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
<TABLE Summary="Links" class="ms-summarycustombody" style="margin-bottom: 5px;" cellpadding="0" cellspacing="0" border="0">
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows" />
</xsl:call-template>
</TABLE>
</xsl:template>
<xsl:template name="dvt_1.body">
<xsl:param name="Rows" />
<xsl:for-each select="$Rows">
<xsl:sort select="@Order" data-type="number" order="ascending" />
<xsl:call-template name="dvt_1.rowview" />
</xsl:for-each>
</xsl:template>
<xsl:template name="dvt_1.rowview">
<tr>
<TD style="padding-bottom: 5px; vertical-align:middle;" class="ms-vb"><img src="/_layouts/images/square.gif" alt="" /></TD>
<TD style="padding-bottom: 5px;padding-left: 5px;" class="ms-vb">
<A onfocus="OnLink(this)" target="_blank" href="{substring-before(@URL, ', ')}"><xsl:value-of select="substring-after(@URL, ', ')" /></A>
</TD>
</tr>
</xsl:template>
</xsl:stylesheet>
The key here is the anchor tag that now has the attribute target="_blank" which means the link will open in a new window:
<A onfocus="OnLink(this)" target="_blank" href="{substring-before(@URL, ', ')}"><xsl:value-of select="substring-after(@URL, ', ')" /></A>
Also, you can see how it uses the substring-before and substring-after XSL functions to extract out the link and description from the field. The last thing to note is that we want to take advantage of the built in ordering functionality. This is why you will notice that I included the following tag:
<xsl:sort select="@Order" data-type="number" order="ascending" />
You have to specify the data-type="number" attribute or else SharePoint will treat the order numbers as alpha characters and sort incorrectly. I found this out the hard way because I used the data form properties window to apply the sorting automatically. Now the last step is to include the "order" field as one of the fields SharePoint queries in the data form web part. By default it omits this field, but you can fix this by clicking on the Current Data Source link and adding it as a queried field:
And we are done. Also just to point out, if you want this as a moveable web part simply wrap it in a web part zone. You can find that in the Insert menu:
Once added just make sure the web part zone surrounds the entire data form web part. Then when you browse to the page and edit it you will be able to modify the web part properties and even edit the xsl from the browser. If you are using a publishing site you will need to do this from a non-publishing page, and then export/import the web part to the page you want using SharePoint's web part exporting feature. Well I hope this post has helped you and saved you some pain staking time.
-Neil Barkhina