A ‘Whats New’ web part

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)

Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Displaying a Single Users Profile Details

Following the previous post on search, this shows how to simply and quickly show a single users profile details on a page. Note, that this intended for MOSS (where we have the profile database) but could be re-worked for WSS to show details from the user list.

On our page, we need to add the People Search Core Results Part

 

Once added, open the web part properties so we can configure the part. We need to make several changes....

a) Under the Results Display / View group, set the Results Default View to Relveance and Results per page to 1

b) Under the Results Query Options group, change the Cross Web Part Query ID to Query 2 (see also note below)

c) Under the Miscellanous group, uncheck all the options except  Show Search Results

d) Finally, in the Fixed Keyword Query option, enter the query required (e.g. LastName:Piper)

Save the changes.

The final result will be basic details from the profile databse about our user

If the appearance needs to be changed, then you can edit the XSLT (another future post I think!) to suit.

Note - you may need more than one profile - in this case, the Cross Web Part Query ID needs to unique for each part on the page.

If you have more than 3 user profiles to display, then consider using different queries to get multiple results. For example, to show all users who have the property Department:Sales to show all sales members. If doing this, the number of search results should be increased from 1!

Currently rated 5.0 by 3 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Visio stencil for Sharepoint Site planning

When planning a Sharepoint implementation, I often use Visio to diagram a site hierarchy. In the past, I've used standard shapes, but wante something a bit more representative of the sites / lists / libraries.

Maxime has produced a basic stencil set, but this didnt include everything I wanted (plus I really wanted to use the WSS 3 style icons! Smile ) and TamTam has one for page design

I've attached my stencil for the community. This is the first pass, and is very much work in progress!

The shapes are taken from the Sharepoint icons, as shown below. Each shape has the option of attaching data (URL, Template, Title) and I hope to be able to extend this in future (what about linking to Kivati to graphically build a portal?)

Site Collection 

If there are any comment, please send them in so we can improve

MOSSSiteStructureStencils.zip (193.73 kb)

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Sharepoint and Accessibility

A common requirement when undertaking interface design for Sharepoint is to make the interface accessible (accessible meaning that users with visual or other impairment).

In the UK, the Disability Discrimination Act implicitly states that an intranet should be accessible to all employees, so even your private intranet should be capable of coping with user impairments.

The Sharepoint Team issued a statement a while back (pre release) about the accesibilty capabilites of Sharepoint

Customising the Sharepoint interface to make this work can be a real uphill task. The interface uses a lot of nested tables making relative font sizing difficult as noted by Diantha. The Sharepoint accessibility kit can be your friend here though.

An example of the kits usage is show below - a resizing tool to change absolute to relative sizing

 

But beware, this does not 'magically' fix your accessibility problems and you still need to consider the interface requirements early on.

The kit also includes a set of more accessible style sheets that can be applied

Another great resource for Sharepoint design, including accessibility is Heather Solomon

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

 

Dilbert of the day