Friday, April 8, 2011

Custom Branded Links Section - Using DVWP XSL

How about having a quick link section with images and links in our SharePoint site? yeah, good idea. How about make it configurable? I mean, quick link titles, links, images manageable by end user.

Well, at high level idea, what you have to do is:
1. Create a list with Title, Description, image, etc columns.
2. Customize the SharePoint data view web part; once done export and import the web part where ever we need.

Sounds good? yeah, we'll look in to the implementation

Create a simple list with Title, Description, and image columns: Here is one I've done:
and i've filled the list with few entries, so now my list is looking like:


So, our list is ready, we've to customize our list by using Data view web part. Or you can just copy paste the below code, which i took from my customized data view web part, into a text file, name it to xxxx.webpart, and import this web part to your page :-)

<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="Microsoft.SharePoint.WebPartPages.DataFormWebPart,
Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
<importErrorMessage>Cannot import this Web Part.</importErrorMessage>
</metaData>
<data>
<properties>
<property name="MissingAssembly" type="string">Cannot import this Web Part.</property>
<property name="FireInitialRow" type="bool">True</property>
<property name="TitleIconImageUrl" type="string" />
<property name="HelpMode" type="helpmode">Modeless</property>
<property name="CacheXslStorage" type="bool">True</property>
<property name="ViewContentTypeId" type="string" />
<property name="Description" type="string" />
<property name="DataSourcesString" type="string">&lt;%@ Register TagPrefix="sharepoint"  Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint,
Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %&gt;&lt;%@
Register TagPrefix="webpartpages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %&gt;&lt;sharepoint:SPDataSource runat="server"
DataSourceMode="List" SelectCommand="&amp;lt;View&amp;gt;&amp;lt;/View&amp;gt;"
UpdateCommand="" InsertCommand="" DeleteCommand="" UseInternalName="True"
ID="dataformwebpart2"&gt;&lt;SelectParameters&gt;
&lt;webpartpages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues"
DefaultValue="{E01A58C6-C760-4C5B-A3EB-7CD61F94281B}" Name="ListID"&gt;&lt;/webpartpages:DataFormParameter&gt;
 &lt;/SelectParameters&gt;
&lt;UpdateParameters&gt;
&lt;webpartpages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues"
DefaultValue="{E01A58C6-C760-4C5B-A3EB-7CD61F94281B}" Name="ListID"&gt;&lt;/webpartpages:DataFormParameter&gt;
&lt;/UpdateParameters&gt;
 &lt;InsertParameters&gt;
&lt;webpartpages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues"
DefaultValue="{E01A58C6-C760-4C5B-A3EB-7CD61F94281B}" Name="ListID"&gt;&lt;/webpartpages:DataFormParameter&gt;
&lt;/InsertParameters&gt;
&lt;DeleteParameters&gt;
&lt;webpartpages:DataFormParameter ParameterKey="ListID" PropertyName="ParameterValues"
DefaultValue="{E01A58C6-C760-4C5B-A3EB-7CD61F94281B}" Name="ListID"&gt;&lt;/webpartpages:DataFormParameter&gt;
&lt;/DeleteParameters&gt;
&lt;/sharepoint:SPDataSource&gt;
</property>
<property name="AllowZoneChange" type="bool">True</property>
<property name="ParameterBindings" type="string">
&lt;ParameterBinding Name="ListID" Location="None" DefaultValue="{E01A58C6-C760-4C5B-A3EB-7CD61F94281B}"/&gt;
&lt;ParameterBinding Name="dvt_apos" Location="Postback;Connection"/&gt;
&lt;ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/&gt;
&lt;ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/&gt;
</property>
<property name="PageSize" type="int">-1</property>
<property name="TitleUrl" type="string" />
<property name="ViewFlag" type="string">0</property>
<property name="Xsl" type="string">&lt;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"&gt;
&lt;xsl:output method="html" indent="no"/&gt;
&lt;xsl:decimal-format NaN=""/&gt;
&lt;xsl:param name="dvt_apos"&gt;'&lt;/xsl:param&gt;
&lt;xsl:variable name="dvt_1_automode"&gt;0&lt;/xsl:variable&gt;
&lt;xsl:template match="/"&gt;
&lt;xsl:call-template name="dvt_1"/&gt;
&lt;/xsl:template&gt;
&lt;xsl:template name="dvt_1"&gt;
&lt;xsl:variable name="dvt_StyleName"&gt;Table&lt;/xsl:variable&gt;
&lt;xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/&gt;
&lt;table border="0" width="100%" cellpadding="2" cellspacing="0"
class="style1"&gt;
&lt;tr valign="top"&gt;
&lt;xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"&gt;
&lt;th class="ms-vh" width="1%" nowrap="nowrap"&gt;&lt;/th&gt;
&lt;/xsl:if&gt;
 &lt;/tr&gt;
&lt;xsl:call-template name="dvt_1.body"&gt;
&lt;xsl:with-param name="Rows" select="$Rows"/&gt;
&lt;/xsl:call-template&gt;
&lt;/table&gt;
&lt;/xsl:template&gt;
&lt;xsl:template name="dvt_1.body"&gt;
&lt;xsl:param name="Rows"/&gt;
&lt;xsl:for-each select="$Rows"&gt;
&lt;xsl:call-template name="dvt_1.rowview"/&gt;
&lt;/xsl:for-each&gt;
&lt;/xsl:template&gt;
&lt;xsl:template name="dvt_1.rowview"&gt;
&lt;tr&gt;
&lt;xsl:if test="position() mod 2 = 1"&gt;
&lt;xsl:attribute name="class"&gt;ms-alternating&lt;/xsl:attribute&gt;
&lt;/xsl:if&gt;
&lt;xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1"&gt;
&lt;td class="ms-vb" width="1%" nowrap="nowrap"&gt;
&lt;span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))"
ddwrt:ammode="view"&gt;&lt;/span&gt;
&lt;/td&gt;
&lt;/xsl:if&gt;
 &lt;td style="width: 10px"&gt;&lt;span style="text-decoration: none;"&gt;
&lt;a href="Lists/Quick Links/DispForm.aspx?id={@ID}"&gt;&lt;img border="0" src="{substring-before(@Image,
', ')}" alt="{substring-after(@Image, ', ')}"/&gt;&lt;/a&gt;&lt;/span&gt;
&lt;/td&gt;
&lt;td style="width: 3px"&gt;&lt;/td&gt;
&lt;td class="ms-vb" valign="top" &gt;
&lt;a href="Lists/Quick Links/DispForm.aspx?id={@ID}"&gt;&lt;xsl:value-of
select="@Title" /&gt;&lt;/a&gt;&lt;BR/&gt;
&lt;xsl:value-of select="@Description"/&gt;
 &lt;/td&gt;
&lt;/tr&gt;
&lt;/xsl:template&gt;&lt;/xsl:stylesheet&gt;</property>
<property name="NoDefaultStyle" type="string">TRUE</property>
 <property name="Direction" type="direction">NotSet</property>
<property name="UseSQLDataSourcePaging" type="bool">True</property>
<property name="ListName" type="string" null="true" />
<property name="Hidden" type="bool">False</property>
<property name="DisplayName" type="string" />
<property name="SampleData" type="string" null="true" />
<property name="HelpUrl" type="string" />
<property name="ChromeType" type="chrometype">Default</property>
<property name="CatalogIconImageUrl" type="string" />
<property name="Height" type="string" />
<property name="DataFields" type="string">@Title,Title;@Description,Description;@Image,Image;@ID,ID;@ContentType,Content
Type;@Modified,Modified;@Created,Created;@Author,Created By;@Editor,Modified
By;@_UIVersionString,Version;@Attachments,Attachments;@File_x0020_Type,File
Type;@FileLeafRef,Name (for use in forms);@FileDirRef,Path;@FSObjType,Item
Type;@_HasCopyDestinations,Has Copy Destinations;@_CopySource,Copy
Source;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval
Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL
Path;</property>
<property name="Default" type="string" />
<property name="ChromeState" type="chromestate">Normal</property>
<property name="DataSourceID" type="string" />
<property name="AllowClose" type="bool">True</property>
<property name="CacheXslTimeOut" type="int">86400</property>
<property name="AllowMinimize" type="bool">True</property>
<property name="AllowEdit" type="bool">True</property>
<property name="XslLink" type="string" null="true" />
<property name="Title" type="string">Quick Links</property>
<property name="Width" type="string" />
<property name="ShowWithSampleData" type="bool">False</property>
<property name="ExportMode" type="exportmode">All</property>
<property name="AllowHide" type="bool">True</property>
<property name="AllowConnect" type="bool">True</property>
</properties>
</data>
</webPart>
</webParts>

Important: You have to change your list ID and list name as in the code higlighed
and here is what you will get finally!
Similar way, just by re-arranging the <TD>'s you can design the quick links sections as in the below image.




You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

2 comments :

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...