Doron Goldberg

This post is about enabling web slices on Microsoft Office SharePoint Server 2007.

The following example will demonstrate how to easily implement a simple control adapter which will render the required html code for turning any web part on your server into a live web slice.

First thing I did was creating a class called WebSliceAdapter which inherits from ControlAdpater.

   1: public class WebSliceAdapter : ControlAdapter

ControlAdapter has a single method needs to be overridden:

   1: protected override void Render(HtmlTextWriter writer)

   2: {

   3:     var webpart = Control as WebPart;

   4:     if (webpart != null)

   5:     {

   6:         if (Page.Request.QueryString["sliceitem"] != null && Page.Request.QueryString["sliceitem"].Equals(webpart.ID))

   7:         {

   8:             Page.Response.Clear();

   9:             renderWebSlice(webpart, writer);

  10:             Page.Response.End();

  11:         }

  12:         else

  13:         {

  14:             renderWebSlice(webpart, writer);

  15:         }

  16:     }

  17:     else

  18:     {

  19:         base.Render(writer);

  20:     }

  21: }

(I’m clearing the response and ending it because the webslice is not functioning well for some reason when the html it too large or because of the default  js & css of MOSS. I’m still trying to figure out why and how to overcome this)

The following methods are rendering the required HTML code for the webslice surrounding the web part itself:

   1: private void renderWebSlice(WebPart webpart, HtmlTextWriter writer)

   2: {

   3:     writer.Write(getWebSliceHeader(webpart.ID, webpart.Title, 15));

   4:     base.Render(writer);

   5:     writer.Write("</div></div>");

   6: }

   1: private string getWebSliceHeader(string id,string title,int refreshRate)

   2: {

   3:                  return String.Format(

   4:                     @"<div class='hslice' id='hsliceitem{0}'>

   5:                         <a rel='feedurl' href='?sliceitem={0}'></a>

   6:                         <span style='visibility:hidden;display:none;' class='ttl'>{2}</span>

   7:                         <span class='entry-title' style='visibility:hidden;display:none;'>{1}</span>

   8:                         <div class='entry-content'> ",

   9:                     id, title, refreshRate.ToString());

  10: }

getWebSliceHeader gets 3 parameters: id of the webslice, the title to display in the favorites bar and the refreshRate which configures the time in minutes for the webslice to be updated. Every time the content of the webslice will be changed the webslice will appear as bold in the favorites bar indicating the user an update is available.

after signing the assembly and placing it into the GAC all is needed in order to make it work is a small change in the compat.browser file located under App_Browsers folder within the web application:

   1: <browser refID="Default">  

   2:   <controlAdapters>

   3:    <adapter controlType="Microsoft.SharePoint.WebPartPages.ContentEditorWebPart" 

   4:             adapterType="Netwise.MOSS.Extensions.ControlAdapters.WebSliceAdapter, Netwise.MOSS.Extensions.ControlAdapters, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4d08bf77f3d60265" />

   5:    <adapter controlType="Microsoft.SharePoint.Publishing.WebControls.SummaryLinkWebPart,Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 

   6:             adapterType="Netwise.MOSS.Extensions.ControlAdapters.WebSliceAdapter, Netwise.MOSS.Extensions.ControlAdapters, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4d08bf77f3d60265" />

   7:    <adapter controlType="Microsoft.SharePoint.Publishing.WebControls.ContentByQueryWebPart,Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 

   8:             adapterType="Netwise.MOSS.Extensions.ControlAdapters.WebSliceAdapter, Netwise.MOSS.Extensions.ControlAdapters, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4d08bf77f3d60265" />

   9:   </controlAdapters>

  10: </browser>

Make sure to use full assembly names for every web part you wish to enable the adapter for. In this example I’m using the ContetEditorWebPart, SummaryLinkWebPart and the ContentByQueryWebPart.

* In this example I’m enabling the adapter for all the browsers but you can / should use IE8 definition only.

** Webslices use a different http header when they update so you might need to add a separate definition as well.

This screen shot is from my MOSS homepage after enabling the adapter. This page contains 1 content query web part for showing me my tasks, a news list and a content editor web part. As you can see I now have 3 webslice feeds which I can see from the top bar and on the page itself:

Adding the content editor web part:

The webslices on the favorites bar:

Viewing the content of the webslice:

One of the coolest new features of IE8 are Web Slices – portions of a web page you can subscribe to and view updates directly from the Favorites bar.

Instead of keep adding complete pages to the Favorites list for future visits and / or subscribe to rss feeds of a complete channel it is now possible to keep tracking parts of pages, and view them while working on other tasks with  out the need to actually re-visit the page.

This can provide web sites with the ability to allow users to track live updates (sports, news, stock exchange data etc), online auctions and much more.

In the following example I will describe a small web form application I’ve created in order to create web slices which shows live updates from twitter according to search terms.

I will be using Twitter’s atom feed and a simple atom2html xslt I found online. (The xslt can be edited for better appearance)

First I’ve created a web site project called TwitterSearchWebSlice.

To the Default.aspx I’ve added 3 control – a TextBox, a Button and a one Literal.

The Button’s click event generates the simple HTML needed for creating a Web Slice:

   1: protected void Button1_Click(object sender, EventArgs e)

   2: {

   3:     Literal1.Text=(@"<div class=""hslice"" id=""item123"">

   4:         <a rel=""feedurl"" href=""default.aspx?q=" + TextBox1.Text + @"#item123""></a>

   5:         <p class=""entry-title"">" + TextBox1.Text + @" on twitter</p>

   6:         <div class=""entry-content""></div></div>");

   7: }

This code generates the HTML which will display a short text surrounded with the green background of the web slice after the user types a keyword in the TextBox and clicks the Button:

Clicking the Web Slice Icon opens the ‘Subscribe to a web slice’ window of IE8:

By clicking the ‘Add’ button the user approves to add the web slice to his favorites bar, which is available at any moment:

Now, when opening the web slice by clicking it it displays a small window with the content that comes from the web slice defined in the HTML generated earlier:

How is that?

My Default.aspx page had 2 more methods in it:

   1: private void getTwitterSearchResults(string query)

   2: {

   3:     XPathDocument xmlDoc = new XPathDocument("http://search.twitter.com/search.atom?q=" + query);

   4:     System.Xml.Xsl.XslCompiledTransform myXslTrans = new System.Xml.Xsl.XslCompiledTransform();

   5:     

   6:     myXslTrans.Load(Request.ServerVariables["APPL_PHYSICAL_PATH"]+"TwitterRSS.xslt");

   7:     Response.Clear();

   8:     Response.Write(@"<html><head>

   9:     </head><body>

  10:     <div class=""hslice"" id=""item123""> 

  11:     <p class=""entry-title"">" + query + @" on twitter</p>

  12:     <div class=""entry-content"">");

  13:     myXslTrans.Transform(xmlDoc, null, Response.Output);

  14:     Response.Write("</div><span class=\"ttl\">1</span></div></body></html>");

  15:     Response.End();

  16:  

  17: }

  18: protected void Page_Load(object sender, EventArgs eargs)

  19: {

  20:     if (Request.QueryString["q"] != null)

  21:     {

  22:         getTwitterSearchResults(Request.QueryString["q"].ToString());

  23:     }

  24: }

Page_Load which calls getTwitterSearchResults in case the request contains a ‘q’ argument in the query string and getTwitterSearchResults which gets the atom feed of the requested search and then uses the xslt to transform it to html.

So what just happened?

Let’s have a look at the HTML of the web slice:

   1: <div class="hslice" id="item123">            

   2: <a rel="feedurl" href="default.aspx?q=windows 7#item123"></a>

   3: <p class="entry-title">windows 7 on twitter</p>            

   4: <div class="entry-content"></div>

   5: </div>

The first thing which is obvious here is that this web slice doesn’t contain any content at all! Unlike said earlier this web slice DOES NOT show a part of a page!

So what does it do then? This Web Slice has another control in it – the <a rel=”feedurl”… which indicates the feed source, a dynamic feed source in this case (notice the q argument in the url).

Using this small feature I can now add as many twitter search web slices as I like to my Favorites bar, enabling me to check up on them with out the need to visit http://search.twitter.com every time. 

The example project can be downloaded from here.

As mentioned on the ieblog, IE8 has a new feature for supporting alternating style sheets.

One of the best web sites for demonstrating css power is the well known csszengarden which includes a single html file with many (hundreds!) of css implementations suitable for that particular html.

In order to show the power of IE8’s new feature I have created an example page which contains alternating style sheet for some of css zen garden’s style’s.

All I did was adding this code so the html will now include the required tags for the alternating style sheets:

   1: <script runat="server">

   2:     protected void Page_Load(object sender, EventArgs e)

   3:     {

   4:         for (int i = 100; i < 120; i++)

   5:         {

   6:             HtmlLink link = new HtmlLink();

   7:             link.Attributes.Add("type", "text/css");

   8:             link.Attributes.Add("rel", "alternate stylesheet");

   9:             link.Attributes.Add("title", i.ToString());

  10:             link.Attributes.Add("href", "http://www.csszengarden.com/" + i.ToString() + "/" + i.ToString() + ".css");

  11:             this.Header.Controls.Add(link);

  12:         }

  13:     }

  14:     </script

The result can be viewed here for users who use IE8.