Quick Links using a Data View – Horizontal Links with Style and Flair

Posted on June 23, 2010 by

1


All too often in life we find people will choose form over substance, looks over depth.  Yet every now and then we have the opportunity to have both form and substance combine for a more pleasurable experience.  Unfortunately SharePoint’s out of the box look and feel has always detracted from its depth and ability to be a robust information delivery platform .  Harken back to our days of dating, yes we’re all guilty of it, when you’d meet someone who you enjoyed being with but didn’t embrace it because it wasn’t the look you wanted.  

So where am I going with this tangent, SharePoint’s Quick Links have always been a simple list or one with a throw away icon.  Not to mention if you had too many links you were stuck with that unsightly scroll bar.  Using a SharePoint DataView, XSL style sheet and SharePoint Designer to bring them together we have just the right blend of form and substance.  So let’s get started…

  • In SharePoint Designer open a new ASPX page
  • Next we’ll add a SharePoint Data View
  • Place your cursor on the appropriate place on the page
  • Select Insert from the main menu
  • Select SharePoint Controls
  • Select Data View

 

You will now see the SharePoint Data View Web Part placed on the page.  Next you will need to add the data content to you web part.

  • On the right side of the page select the Data Source Library pane
  • Expand the SharePoint Lists section
  • Find the Quick Link List you previously created
  • Select the Quick Link data source from the SharePoint List located in the Source Library.

  • Double click on the Quick Links List
  • You will now see the a new pane named Data Source Details
  • This pane will show the fields and number of records in the respective list chosen.
  • You will also see the fields and results of the 1st record set in the Data Source Details pane.
  • Highlight the field you want to display and drag it into the Data View area.

  • Select the data elements you want to be displayed and drag them into the Data View
  • In this example we are using the URL and Icon fields
  • The Data View should populate with the respective results
  • Once all the fields have been entered the data view is now ready to be formatted

 As the first step in formatting we will remove the title row.

  • Select and highlight the top row
  • A right mouse click will active the table menu
  • Select Delete
  • Select Delete Row
  • The header row should now be gone

 

We’ll continue to adjust the formating and sort sequence of Data View

  • Click on the right chevron to activate the Common Task Menu
  • Active the Common Data View Task menu
  • Select Sort and Group

 

 Select the desire sort field, in the case of Quick Links select View Order

  • Click Add
  • Click OK

 

 Next we need to transform the table and apply the  XSLT Style Sheet. 

  • Select the Data View web part
  • Right click and select Web Part Properties

You will now see the Data View Properties Window

  • Located the XSL Editor section
  • Click on the ellipse to modify the  XSLT currently attached to the web part

 

You will now see a Text Entry dialog box with the current  XSLT code

  • Select the entire block of code in the dialog box
  • Delete the selected area of code
  • The Text Entry dialog box will now be blank and ready to apply the new  XSLT code
  • At the end of this post, I have provide the  XSLT code used
  • Paste the  XSLT code from your paste buffer into the Text Entry dialog box
  • Click Save
  • Click OK

You have now applied the XSLT code and your Horizontal Quick Links web part is ready to be added to a web page on your Intranet site.

 

To verify the look of your new horizontal quick link, I suggest previewing the results  in your browser

The last step is importing this web part onto a page in your SharePoint site providing users with a nice combination of form and substance

.

Horizontal Quick Links  XSLT Code

<xsl:stylesheet xmlns:x=”http://www.w3.org/2001/XMLSchema&#8221; xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp&#8221; version=”1.0″ exclude-result-prefixes=”xsl msxsl ddwrt” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime&#8221; xmlns:asp=”http://schemas.microsoft.com/ASPNET/20&#8243; xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer&#8221; xmlns:xsl=”http://www.w3.org/1999/XSL/Transform&#8221; 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>’

                <xsl:variable>0

                <xsl:template match=”/” xmlns:x=”http://www.w3.org/2001/XMLSchema&#8221; xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp&#8221; xmlns:asp=”http://schemas.microsoft.com/ASPNET/20&#8243; xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer&#8221; xmlns:SharePoint=”Microsoft.SharePoint.WebControls”>

                                <xsl:call-template/>

                xsl:template>

                <xsl:template>

                                <xsl:variable>HorzTitl

                                <xsl:variable select=”/dsQueryResponse/Rows/Row” />

                                <xsl:variable select=”count($Rows)” />

                                <xsl:variable select=”$dvt_RowCount = 0″ />

                                <xsl:choose>

                                                <xsl:when test=”$dvt_IsEmpty”>

                                                                <xsl:call-template />

                                                xsl:when>

                                                <xsl:otherwise>

                                                                <p>

                                                                                <xsl:call-template>

                                                                                                <xsl:with-param select=”$Rows” />

                                                                                xsl:call-template>

                                                                </p>

                                                xsl:otherwise>

                                xsl:choose>

                xsl:template>

                <xsl:template>

                                <xsl:param />

                                <table cellpadding=”10″ cellspacing=”0″ border=”0″>

                                                <tr>

                                                                <xsl:for-each select=”$Rows”>

                                                                                <xsl:call-template />

                                                                xsl:for-each>

                                                </tr>

                                </table>

                xsl:template>

                <xsl:template>

                                <td align=”center” valign=”top” width=”100px”>

                                                <xsl:if test=”@New_x0020_Window = 1″>

                                                                tahoma; font-size: 8pt;” target=”_blank”>

                                                                                <img border=”0″ src=”{substring-before(@Icon, ‘, ‘)}” />

                                                                                <br/>

                                                                                <xsl:value-of select=”substring-after(@URL, ‘, ‘)” />

                                                                </a>

                                                xsl:if>

                                                <xsl:if test=”@New_x0020_Window = 0″>

                                                                tahoma; font-size: 8pt;”>

                                                                                <img border=”0″ src=”{substring-before(@Icon, ‘, ‘)}” />

                                                                                <br/>

                                                                                <xsl:value-of select=”substring-after(@URL, ‘, ‘)” />

                                                                </a>

                                                xsl:if>

                                                </td>

                                <xsl:if test=”position() mod 5 = 0″ ddwrt:cf_ignore=”1″>

                                                <xsl:text disable-output-escaping=”yes”></tr>

                                                <xsl:if test=”position() != last()” ddwrt:cf_ignore=”1″>

                                                                <xsl:text disable-output-escaping=”yes”><tr>

                                                xsl:if>

                                xsl:if>

                xsl:template>

                <xsl:template>

                                <xsl:variable>There are no items to show in this view.

                                <table border=”0″ width=”100%”>

                                                <tr>

                                                                <td>

                                                                                <xsl:value-of select=”$dvt_ViewEmptyText” />

                                                                </td>

                                                </tr>

                                </table>

                xsl:template>

</xsl:stylesheet>

Advertisements