With all the news around Windows 8 and the new Metro interface I’ve been inspired to come up with a “Metro-esque” styled SharePoint list menu (personally I think Metro looks great and works well on a phone or a tablet with touch - I guess I'm still to be convinced about how it will work on the desktop... )
So onto the web part.. It's built using the swiss army knife of web parts, …. the SharePoint Data View.
It displays “tiles” for the 12 most heavily used lists and libraries (based on Item Count) in your team site. Each tile shows the list title, last item modified date and the item count. If you haven’t got 12 lists then the tile is filled with a link to the create page.
The web part doesn’t use any custom code, works fine (only a few quick tests...) on SharePoint 2007 and 2010 and has no external dependencies on JavaScript files so you can just add it to your site home page and you’re good to go. You can download the webpart file here MetroListMenu.webpart. If you need help adding the webpart to your site check out this Office.com page for info on Importing Web Parts either into the web part gallery or onto a page.
You can view a demo page with the web part on Office 365 here - http://pemberton-web.sharepoint.com/SitePages/metro.aspx
If you want to read more about the Data View web part (DVWP) configuration read on...
Data View Web Part Configuration
There are 3 pieces of configuration the web part uses:
- SPDataSource with mode set to ListsOfLists
- XSL template to produce the html
- Resource parameter binding for localization
SPDataSource
The data source for the web part uses a SPDataSource with a mode of ListsOfLists. As hinted by the name this will list all the lists on the current team site with a data row for each list. The attributes for the row match fairly closely what’s available in the SharePoint API and some of the attributes are described in a posting called “SPDataSource Fields for Webs & ListsOfLists” by Keith Dahlby. For our XSL we’ll be using the list attributes __spHidden, __spDefaultViewUrl, __spItemCount, __spImageUrl, __spDescription, __spTitle and __spLastItemModifiedDate.
<SharePoint:SPDataSource runat="server" DataSourceMode="ListofLists" />
Note: If you ever want to check all the attributes available on your SharePoint system it’s easiest to use a general XSL template that will output everything:
<xsl:template match="/"> <temp><xsl:copy-of select="*"/></temp> </xsl:template>
The web part could easily be changed to display subsites by switching the SPDataSource mode to Webs and using the web attributes.
XSL Template
The SPDataSource generates an XML document with a Row for each list in the team site. In the XSL template we first select the lists we want display into a xsl variable. The criteria I’ve specified is not to display Hidden lists or Catalog libraries such as the Web Part Gallery. The filter could be changed based on the list type (check on __spBaseType, __spBaseTemplate)
or whether the list includes a specific field (check on __spSchemaXml).
<xsl:variable name="Rows"
select="/dsQueryResponse/Rows/Row[not(@__spHidden = 'True')
and not(contains(@__spDefaultViewUrl, '_catalogs'))]" />
Then we loop around the rows sorting by the Item Count with the biggest first. Our CSS for each tile is indexed on position so the list with the most items (tile-1) appears the largest in the menu. The CSS is all included within a style element in the XSL so if you need to change the colors of the tiles to fit with yor template go for it.
<xsl:for-each select="$Rows"> <xsl:sort select="@__spItemCount" order="descending" />
We only want to output 12 lists so we include a check....
<xsl:if test="position() < 13">
The html for each “tile” in our menu includes a link to the lists default view, the list title, the last modified date and a list icon. If we get to the end of our lists and haven’t output 12 then we use a “filler” tile template with a link to the List Create page.
<div id="{concat('tile-', position())}" >
<img src="{@__spImageUrl}" class="micon" />
<a href="{@__spDefaultViewUrl}">
<xsl:attribute name="title">
<xsl:choose>
<xsl:when test="@__spDescription and string-length(@__spDescription) > 0">
<xsl:value-of select="@__spDescription" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@__spTitle" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<div class="subtitle">
<xsl:value-of select="@__spLastItemModifiedDate"/>
</div>
<div class="title">
<xsl:value-of select="@__spTitle"/>
</div>
<div class="listcnt">
<xsl:value-of select="@__spItemCount"/>
</div>
</a>
</div>
<xsl:if test="position() = last() and not(position() = 12)" >
<xsl:call-template name="filler">
<xsl:with-param name="from" select="position() + 1" />
<xsl:with-param name="until" select="13"/>
</xsl:call-template>
</xsl:if>
…
<xsl:template name="filler">
<xsl:param name="from"/>
<xsl:param name="until"/>
<xsl:choose>
<xsl:when test="$from < $until">
<div id="{concat('tile-', $from)}" style="background-color:#ddd">
<img src="/_layouts/images/createcontent.gif" class="micon" />
<a href="/_layouts/create.aspx" title="{$CreateLabel}">
<div class="title">
<xsl:value-of select="$CreateLabel" />
</div>
</a>
</div>
<xsl:call-template name="filler">
<xsl:with-param name="from" select="$from + 1" />
<xsl:with-param name="until" select="$until"/>
</xsl:call-template>
</xsl:when>
</xsl:choose>
</xsl:template>
The XSL could be modified to include a RSS icon link or a settings icon link using the __spID and __spParentWebUrl attributes.
Note: The __spLastItemModifiedDate attribute is in the regional date format of the current team site so for a quick demo I wasn’t able to include a reliable XSL date calculation that says how many days ago the list was used. I did spot a __spPropertiesXml attribute that does include an ISO format last modified date that could be extracted and used for this.
Parameter Binding
The only other configuration is the parameter binding used to get the “Create” label in the language of your team site.
<ParameterBinding Name="CreateLabel" Location="Resource(core,nav_Create)" DefaultValue="Create" />
This looks up the label from the core SharePoint resource file for your language and passes it into the XSL transform, where we have declared a param to hold the value:
<xsl:param name="CreateLabel"></xsl:param>
More...
If you want to do more than style html and develop real Windows 8 Metro styled applications for SharePoint check out this blog post “Developing Windows 8 (Metro Style) Applications for SharePoint” by adis jugo.
If you want to learn more about the Data View web part check out some of the great examples by Marc Anderson on his blog http://sympmarc.com/tag/data-view-web-part/
If you want to create a Site Directory using the client side object model check out the following post by Bil Simser - Metro Style Site Directory for SharePoint Using EMCAScript
You can download the webpart file here MetroListMenu.webpart.