A recent prototype involved creating a ‘Whats New’ web part. This was required to display a total of the new of recent new content and the latest 5 items.
We had a number of options when creating this, but we chose to build it quickly using SharePoint Designer and the Search web service.
Before we start, a note on the use of SharePoint designer.
There is a lot of debate about when (or even if) this tool should be used, but for me it is a great tool to write xslt and transform web services. It can do a heck of a lot even before you start jumping in and typing xslt. I use it on development servers only and export the created web part. If you want to use designer on your live servers then please research and understand the implications of ghosted / unghosted pages.
OK – our webpart. The key to this prototype is the SharePoint search webservice. In this case, I’m using search.asmx (the MOSS search) rather than spsearch.asmx.
Why use search.asmx?
Our prototype (and many client implementations) are comprised of multiple site collections. Becuse of this, out of the box tools like the Content Query Web Part or 3rd party tools like Jan Tielmans ‘Whats New’ part wouldn’t help us as they only work across the current site collection.
Another thing to note – using search.asmx means we are getting security trimmed results – you are only seeing new items that you have access to.
I’m assuming that readers of this will know and understand how to open pages, add data sources and the basic principles of XSLT
In designer, our first task is to hook onto the search service. It’s accessed via the URL ‘http://<portal>/_vti_bin/search.asmx. For details on the service, look at http://msdn.microsoft.com/en-us/library/ms470518.aspx. We are adding a WebService datasource. Check out http://office.microsoft.com/en-us/sharepointdesigner/HA101171541033.aspx for details on doing this
Once accessed, we are going to use the QueryEx method. There is a similar Query method that will return an XML formatted result packet, but QueryEx will allow us to work with the resulting dataset inside Designer.
After connecting, we have to pass our search query (the QueryXML property). We can pass a complex SQL (http://msdn.microsoft.com/en-us/library/bb219479.aspx ). In our case, we are going to ask for all content created within the last 7 days.
The query we used was...
<QueryPacket xmlns="urn:Microsoft.Search.Query" Revision ="1000">
<Query domain="QDomain">
<SupportedFormats>
<Format>urn:Microsoft.Search.Response.Document.Document</Format>
</SupportedFormats>
<Context>
<QueryText language ="en-US" type ="MSSQLFT">SELECT Rank, Title, Path, Author, Write, WorkId, Size, Description, SiteName, CollapsingStatus, ContentClass, IsDocument, HitHighlightedSummary, HitHighlightedProperties FROM Scope() WHERE Write > DATEADD(DAY, -7, GETGMTDATE())</QueryText>
</Context>
</Query>
</QueryPacket>
An important note – the QueryXML property is a complete XML string, we can’t just pass the query itself. The string above has been split across multiple lines to adi readability but when entering we have to enter as a single row
Once input, click on the DataView and choose Show Data.
If all is well, we should see a dataset result, similar to the screen below. Note – if there is no new content, no results!
Now we have the data, we can quickly build our webpart.
Firstly, click in a webpart zone on the page and add a basic DataView using the fields TITLE, WRITE and DESCRIPTION.
I now changed some properties. I changed the layout to the second option (rather than the default row/column view).
We also changed the sort options to sore by WRITE (so we are showing the latest content in date descending order)
Parameters
I added some parameters to make adding to other servers slightly easier. These were for More Details link, images path, maximum number of items etc as seen below
Showing the number of new items...
In the <xsl:template name="dvt_1"> template, I added a new row and inside the row put the following....
<tr>
<td valign="middle">
<div class="wpTitleZone" style="width:236px; height:35px; background-color:#ccc; background-image: url({$ImagePath}/blueTitle1.gif); background-repeat: repeat-x">
<a class="TitleZone" href="{$MoreDetailsLink}">
<div class="TitleZone" style="width:236px; height:35px; text-align: center; line-height:35px; cursor: hand; background-image: url({$ImagePath}/iconBlue1News.gif); background-repeat: no-repeat; background-position: left center;">
<xsl:value-of select="$TitleText"/>
</div>
</a>
</div>
</td>
</tr>
Showing Icons
The next change was to include the icons to represent the type of content. These icons are those used in standard search results.
Inside the <xsl:template name="dvt_1.rowview"> template, we added the following....(extract only)
<xsl:choose>
<xsl:when test="CONTENTCLASS = 'STS_Site'">
<img>
<xsl:attribute name="src">
_layouts/images/<xsl:value-of select="CONTENTCLASS"/>16.gif
</xsl:attribute>
</img>
</xsl:when>
<xsl:when test="CONTENTCLASS = 'STS_Web'">
<img>
<xsl:attribute name="src">
_layouts/images/<xsl:value-of select="CONTENTCLASS"/>16.gif
</xsl:attribute>
</img>
</xsl:when>
<xsl:when test="CONTENTCLASS = 'STS_Document'">
<img src="_layouts/images/html16.gif"></img>
</xsl:when>
<xsl:when test="contains(CONTENTCLASS,'ListItem')">
<img>
<xsl:attribute name="src">
_layouts/images/<xsl:value-of select="substring(CONTENTCLASS,1,12)"/>16.gif
</xsl:attribute>
</img>
</xsl:when>
<xsl:when test="contains(CONTENTCLASS,'_List_')">
<img>
<xsl:attribute name="src">
_layouts/images/<xsl:value-of select="CONTENTCLASS"/>16.gif
</xsl:attribute>
</img>
</xsl:when>
<xsl:otherwise>
<xsl:variable name="displayTitle" select="substring-after(CONTENTCLASS,'_')"/>
<img>
<xsl:attribute name="src">
_layouts/images/<xsl:value-of select="CONTENTCLASS"/>16.gif
</xsl:attribute>
</img>
</xsl:otherwise>
</xsl:choose>
From this you should see that we are interrogating the CONTENTCLASS property and mapping an image to it. Again, this is similar to search and fortunately, there are a lot of icons that map direct to the CONTENTCLASS
Formatting the title and update date
We format the title as a link. This is a simple xslt in the format of
<a href="{$MoreDetailsLink }"><xsl:value-of select="TITLE" /></a>
we are using the $MoreDetailsLink parameter for the URL and the Title for the display text.
For the date, we are applying the DD-MMM-YY hh:mm format using
<xsl:value-of select="ddwrt:FormatDateTime(string(WRITE) ,1033 ,'dd-MMM-yy hh:mm tt')"/>
For both of the above, you can get Designer to do this for you. Right click the text you want to format and then you can choose the format options –e.g. hyperlink, datetime etc.
We set the properties of the DataView web part to set the maximum number of items to 5, then in the opening of the XSLT we set
<xsl:variable name="RowLimit" select="$NumberOfItems" />
you can see we are setting the maximum number of items to a parameter value. We do this so that we only need to modify parameters in the Web UI rather than asking administrators to open the XSLT in future.
Finally, in the template, we added another row to link to a more details page.
<tr>
<td class="ms-vb">
<a href={$MoreDetailsLink}>See All New Items...</a>
</td>
</tr>
This is our prototype linked to a page that contained as similar web part, but was showing all results and had pagination etc.
You can download a version of the prototype web part here. As always, be aware that this is a prototype and the normal disclaimers apply (e.g. make sure this web part goes through a code review before putting onto a production server).
Whats_New.zip (3.65 kb)