hit counter script
Skip to main content

Go Search
SharePoint for End Users
  

 Other Blogs

  EndUserSharePoint.com by Mark Miller
  Microsoft SharePoint Team Blog
  Michael Gannotti on SharePoint+
  SharePoint Design by Heather Solomon
  Asif's Blog by Asif Rehmani
  Ian’s SharePoint Blog by Ian Morrish
  SharePoint Demystified
  Siolon - Chris Poteet
  SharePoint Guru - Rod Stagg
SharePoint for End Users > Categories
HTML Dog: Cool content for a hot summer Friday

While surfing for cool content on this hot summer’s day, I came across Matthew McDermott’s SharePoint MVP profile. Turns out, Matthew and I share something in common besides SharePoint; we train dogs.

 

Matthew, and his dog Willa, Matthew and Willa founded K9 SEARCH, which serves the FBI, and Austin and San Antonio Police Departments. Looks like the K9 SEARCH website is running on SharePoint Server 2007. Pretty cool, on both counts, Matthew!  

 

What do dogs have in common with SharePoint? It must have been this connection with dogs that led me to notice Matthew’s recommendation to HTML Dog: The Best Practice Guide to HTML and CSS, Patrick Griffiths' website and book.

 

HTML Dog: The Best Practice Guide to HTML and CSS

 

As you'll soon find out, there’s nothing doggie about the HTML Dog website! From the Beginner HTML Tutorial to the more Advanced HTML Tags and CSS Properties references Patrick provides easy to read, step-by-step instructions, unraveling the seemingly deep, dark mystery about how HTML and CSS works. He augments the tutorials and references with articles, examples, and an invaluable list of external links.

 

As you may already know, when you view content on a Web page in SharePoint you’re looking at HTML and CSS that's coming from page templates and style sheets that reside on the front-end web servers (unless the page has been customized, but that's another story). The content is arranged on the page depending on the site template or the Web Parts in which it appears. If you're viewing content in a list or library you can change the way it looks by using a view.

 

Many of these choices are available “out-of-the-box,” but in most cases you can customize the look and feel of SharePoint. That means that the team site that I use does not look like the team site that you use. 

 

We think this is cool, because, let’s face it, one size, color, and shape doesn’t work for everyone, right? But, it seems as though this confuses people. I think that’s where Patrick’s site can help. You don’t have to be an expert on HTML or CSS to use SharePoint, but it does help to understand the basics of what’s going on; especially if you’re a site administrator.

 

If you’re new to SharePoint or just need a good reference, give Patrick’s site a try. Thanks for the tip, Matthew. Just in time for the “dog days” of summer!

 

…Renée

SharePoint End-User Content Team

Use SharePoint and Silverlight to display a summary of SharePoint blog posts on any site page

by Rod Stagg, SharePoint Solutions Architect/Developer
http://www.rstagg.com | Allyis Inc., Kirkland, Wa

Overview:

We have been investigating ways on our intranet at Allyis to surface information via a more automatic and less manual process through various features and also to implement multiple ways for discovering data/information across the site.  One area in particular we have been looking for improvement has been to increase the discoverability of our leadership blogs and encourage employees throughout our organization to blog as as way to increase collaboration and information sharing. 

As a way to address these efforts we recently developed and deployed a suite of web-parts (one of which we call the BlogRollUp web-part) which displays details on the most recent post made to any of our SharePoint blogs.  The web-part can be added to any site page, configured to point to a specific blog, and uploaded into the web-part gallery for others to use as well. 

Single Post Version
Multi-Post Version

Features:

  • Displays blog title as a hyperlink to the original full post.
  • Displays the first 215 characters of the post body as an excerpt.
  • Displays an image for the blogger or blog.
  • Displays the post's category as a hyperlink to view all similiar posts.
  • Displays the number of comments as a hyperlink to the comments page.
  • Displays an alert icon hyperlinked to the blog's alert page.
  • Highlights background on mouseover.
  • Users can configure the web-part settings. 
  • Can be deployed across site collections. 

Technical Approach:

  • The user-interface was designed and developed entirely using Microsoft Expression Blend, Silverlight, and Visual Studio 2008. 
  • Custom SharePoint web-part to host the Silverlight application which allow users to configure which blog, blogger image, and alerts link from the web-part properties pane directly. 
  • The Silverlight application code uses the initParams provided from the webpart or HTML test page and the URL protocol to access the blog's post list directly.
  • The web-part can be configured once and easily exported from and imported to the webpart gallery and added to any site page on any site collection.   
  • The Silverlight application was deployed into a SharePoint document library for ease of future updates. 

Advantages of using Silverlight over a DataView Web-Part for instance include more portability, more rich user experience, and able to migrate to new sites/hardware easily.

  • Can be added to any site page on any site collection easily by the user without a developer or SharePoint Designer involved.
  • Can be easily deployed on our customer’s SharePoint sites and do not require a substantial effort to migrate to new hardware.
  • A more rich UI is possible using Silverlight and development is simplified using Visual Studio and C#.
  • The project files (.xap) developed in Silverlight are stored in standard SharePoint libraries and can be updated without the need for IT to be involved.

Deployment Methods:

Deployment using only a document library and a content editor web-part without the need to install server-side code and as such administrative access typically not required.

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download BlogRollUp.zip
  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder
  5. Locate the BlogRollUpTestPage.html, update the initParams to use the settings for your particular blog including siteurl, imagepath, listid, and alerturl. 
  6. Copy the updated BlogRollUpTestPage.html file to the root of your new document library.
  7. On a site page add a content editor web-part and reference the BlogRollUpTestPage.html file inside an iframe. 
  8. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the BlogRollUp webpart so other users can add to their site pages without having to configure themselves. 

Deployment using the custom web-part where server-side code is installed via the .wsp solution file for the webpart and typically requiring administrative access

  1. Download the Visual Studio solution .zip and extract the files.
  2. Download BlogRollUp.zip
  3. Create a folder named ClientBin in a SharePoint document library to store the Silverlight application. 
  4. Locate the BlogRollUp_Web\ClientBin\BlogRollUp.xap file and copy into your new ClientBin folder.
  5. Download the .wsp solution file
  6. DownLoad BlogRollUpWP.wsp
  7. Install the provided .wsp solution file via stsadm -addsolution
  8. Activate the solution from SharePoint Central Administration or stsadm -activatefeature
  9. Upload the provided webpart .dwp file into your web-part gallery via site setting, web parts. 
  10. Add the web-part to a site page, update the Silverlight web-part settings section with the appropriate .XAP fullpath, siteurl, imagepath, listid, and alerturl for your particular blog
  11. Export the now pre-configured web-part to your desktop and upload back into the webpart gallery with an appropriate name identifying the blogrollup webpart so other users can add to thier site pages without having to configure themselves. 

Summary:

This is just one way of displaying some pertinent details on recent posts from the blogs dispersed throughout the intranet while also making it easy for users to add to any site page.  Using Silverlight allows .NET developers to develop rich UI in Expression and Visual Studio and store the .xap files in SharePoint document libraries for future updates. 

Free SharePoint Online Master Pages: Friday Cool Content

I recently wrote about free downloadable master pages available from Expert SharePoint Consulting. One reader noted that free master pages are also available for SharePoint Online sites.
 
SharePoint Online is part of the Business Productivity Online Suite (BPOS) that my teammate Tom described in a post last year. I'll "borrow" a few lines of his description: 
 
"SharePoint Online, along with Exchange Online, Communications Online, and Live Meeting make up Microsoft Online Services. Rather than installing and maintaining SharePoint Server, SQL Server, Exchange Server, and other server software in your office, just sign up for this business hosting solution and let Microsoft do the heavy IT lifting for you. The service can handle up to 500 individual PC users. Just launch a Web browser, and you have immediate access to your entire business environment."

What about those free master pages for SharePoint Online? :-) Here are a few links you might find useful:
http://www.milesconsultingcorp.com/Free-Sharepoint-Online-Master-Pages.ASPX
 
Links about customizing standard SharePoint Online master pages:
http://blogs.technet.com/msonline/archive/2009/03/28/update-your-microsoft-sharepoint-online-site-collections.aspx
 
Please feel free to share additional links by leaving a comment to this post.

Thanks!
Anthony
SharePoint End-User Content Team

How to Create Article Comments

 

When publishing pages are utilized one of the common layouts used is the Articles layout.  While this comes out of the box, the ability to comment on a particular article and be brought back to that page after submitting a comment is not an out of the box feature.  This is often a common request from clients.  The following article is the complete solution to this request.  We are going to utilize SharePoint Designer, XSL, JQuery, and the Data View web part.

In order to accomplish this task it is best to see a sample article with comments.  The following image is our end product.

 

 

 

 

  1. The first step is creating a location to hold all of the comments.  We will use a custom list called ArticleComment.  For the purpose of this solution, I am using one list hold all the comments for every article.  While number of items in a list may become an issue, the Data View will be filtering by article page. 

Place the following fields in the ArticleComment custom list:

    1. Rename Title to PageURL
    2. Add ArticleComment

 

The Page URL will contain the article page name (i.e. article.aspx) as it is displayed in the last part of the http address.

 

  1. We have a list for all our comments; now we need to insert a Data View web part onto the article.aspx page.  This will show all of the comments for a particular article.  We will bind this web part to the ArtcleComment list we created in step 1. 
    1. Open SharePoint Designer
    2. Open your default installation (File / Open Site)
    3. Click _catalogs / masterpage
    4. Check out the Articles.aspx page and open
    5. Click Insert Data View positioning it properly on the page (ensure that it is under the body of the article text) as shown in the image below.

 

 

 


  1. After inserting the Data View, the screen will look like the image below.   By clicking it, we can now bind it to the ArticleComment list.  

 

 

 

  1. The fields from the list are now visible and can be inserted into the Data View web part.   Insert:
    1. PageURL
    2. ArticleComment
    3. Created By

 

NOTE:  Styling with this web part is done in code via XSL – we will not be covering styling in this blog.

 

  1. With the fields now showing data, we need to create a filter to show only the comments that are associated with the article that is being viewed.  This is done utilizing a parameter which is part of the Data View web part.
    1.  Click the arrow to the right of the Data View web part that was just inserted.
    2. A new menu will appear called Common Data View Tasks as shown in the image below. 
    3. Click Parameters.

 


 

  1. We can now add a new Parameter.   The image below is the screen you should be viewing.
    1. Click New Parameter
    2. Under the Parameter Source dropdown, choose Server Variable.
    3. Use Path_Info as the Server Variable Name
    4. Click OK

This is key to having this solution work.  The Path_Info variable will bring the complete URL for the page.  (i.e. http://contoso.com/pages/article.aspx).

 

 

 

  1. Now the URL needs to be parsed to just get the article aspx name.  To do this click Filter from the Common Data View Tasks menu show in Step 5 and the resulting screen is show in the image below.

 

  1. Click Add XSLT Filtering and the edit button.
    1. Enter [@Title=substring-after($ReferPageURL, ‘Pages/’)] as shown in the image below.
    2. Click OK

 

This code takes the server variable that has been defined, ReferPageURL.  Substring-after will then parse everything after ‘Pages/’ and assign that new value to @Title.  For example:

 

ReferPageURL = http://wwww.contoso.com/pages/windows7.aspx

@Title = windows7.aspx

 

 

 

 

The Data View is now configured and finished.  We need to write some code in the articles.aspx into order to make the rest of the solution.  This is done in SharePoint Designer code view.

 


  1. We are still in the articles.aspx page but now we need to click Code at the bottom of the page as show in the image below:

 

 

  1.  Navigate to the data view web part.  It can be found by searching for:
    1. WebPartPages:DataFormWebPart

 

NOTE:  You will notice several lines of XSL have been added.  This is all the code behind the task menu as a result of the actions we took in steps 1-8.  We are now going to modify that XSL.

 

 

  1. The first thing we need is the article page name.  This variable (PageName) will be used later in our XSL.
    1. Do a search on dvt_StyleName”>Table
    2. Insert the declaration for the variable for PageName as shown in the code below (in bold)

 

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[@Title=substring-after($ReferPageURL,'Pages/')]"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)" />

<xsl:variable name="RowLimit" select="10" />

<xsl:variable name="FirstRow" select="$dvt_firstrow" />

<xsl:variable name="PageName" select="substring-after($ReferPageURL,'Pages/')" />

<xsl:variable name="LastRow">

 

  1. The user has the ability to comment on the article through a link called 'Add Comment'.  Add Comment takes the user to an input page.

 

 

The link  will use PageName as a variable to be passed in the querystring.  Insert the following code before the section labled dvt 1.body.

 

<xsl:template name="dvt_1.head">

<xsl:param name="PageName"/>

<h6 class="fl">Comments</h6>

<a>

                <xsl:attribute name="href">/Lists/ArticleComment/NewForm.aspx?page=<xsl:value-of select="$PageName" /></xsl:attribute>

            Add Comment

</a>

</xsl:template>

 

  1.  Save the articles.aspx page and close.

From Step 12, one can see that the NewForm.aspx page under the ArticleComment list is being called directly via a querystring.  We need to modify NewForm.aspx to accept the string.  We will utilize jQuery and XSL to accomplish this task.  JQuery is Microsoft's fully supported open source javascript library.  Please refer to www.jquery.com for more information.

 

When a user clicks on Add Comment they will be taken to the following screen.  Upon clicking OK the user will be taken back to the original article. 

 

The image below is a modified NewForm.aspx screen.  The following steps indicate how to modify it.

 

 

 

 

 

  1. Open up Newform.aspx for editing under the list ArticleComment as shown in the image below.

 

 


  1. The page that opens will look like the following image:

 

 

Code needs to be added to the page in order to make the page perform custom actions with the querystring.   Before the code is inserted several components need to added via design mode which will create XSL for us that we can then modify. 

 

 

  1.  Adding a custom list form into the ArticleComment screen shown above will generate XSL that can be manipulated.  Click Insert from the menu > SharePoint Controls > Custom List Form

 

 


  1. The screen will show the PageURL and ArticleComment as seen in the image below:

 

 


  1. Now the code can be added.  In order to insert this code ensure you have the page open in code view (Shown in a prior step). 

Using jquery, we will find the PageURL and insert the value of page as the title (which is the name of your article .aspx).   Your jQuery code is as follows and will be at the top of the file:

 

<script type=”text/javascript”>

 

            $(function() {

 

                                    var page = queryStrVar('page');                //Return the name of the page from querystring

                                    $('input[title=PageURL]').val(page);        //Insert name into PageURL field

 

                        });

           

</script>

 

NOTE: Your master page must have a reference to the jQuery js file in order for this to work.

  1. The next thing to do is hide the ‘Preview of List Form Web Part’ (Shown in the image above).  Find the <IsVisible> tag and set it to ‘false’.
  2.  The last item is to ‘wire’ up the submitting the comments.  The desired behavior is to click the OK button in the image above and comments will be committed into the articlecomment list with the user being redirected to the originating article page.  This must be coded. 
    1. We need a variable containing the page name that our buttons will reference.  Insert the following code after xsl:variable name=”dvt_1_automode”  in the NewForm.aspx page.

<xsl:param name=”Source”>0</xsl:param>

<xsl:variable name=”RedirectLoc”>

            <xsl:value-of select=”$Source”/>

</xsl:variable>

    1. Insert the following code in place of the 2 current input buttons in the NewForm.aspx.  They have a class of ms-toolbar.  By default the buttons are called SaveButton and GoBackButton.

<input type="button" value="Add Comment" class="button" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__commit;__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

<input type="button" value="Cancel" class="button" name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

  1.  Save the NewForm.aspx and publish this.

The End.  Now every time an article is created there is a spot to add comments and view those comments.

 

Peter Serzo

SharePoint Architect

Trillium Teamologies Inc.

www.sharepointusermagic.com

Twitter:  @pserzo

SharePoint and Silverlight-Accessing SharePoint list data for Silverlight without web services

 

Overview

 

Recently I had a client request an animated carousel or filmstrip like player for displaying both images and embedded .wmv videos on their SharePoint intranet.  The idea is to display many images and videos without taking up a ton of screen space in the process.  Also, they wanted to be able to manage what images and videos get displayed via a standard SharePoint list, i.e. they could add links and descriptions in the SharePoint list and those would display appropriately in the filmstrip.

 

Example

 

Technical Analysis:

 

When evaluating a technical solution, it seemed like Silverlight would be the way to go for the filmstrip, Silverlight has built-in animation support, a media player for playing video, a rich set of controls, and good tool support with Expression Blend and Visual Studio 2008.   For accessing the links, etc. stored in the SharePoint list, the SharePoint web service - lists.asmx - seemed a logical choice. 

 

The catch:

 

The client’s IT department didn’t support custom ASPNET web applications or web services to be deployed without a huge review process or none at allJ.  The client’s SharePoint was pretty locked down to any custom development. 

 

The resolution:


There is a nifty yet fairly unknown protocol built in to SharePoint described on MSDN and the SharePoint SDK as the URL Protocol that allows you to query a list directly for all its list items.  Plus, you can do this using a simple URL in the browser and also from Javascript on the client.  I have used this fairly often since back in 2003 when I had to come up with a way to populate a Flash map with SharePoint data, so I was familiar with this protocol but not sure it would work in Silverlight. 

 

I broke out my Swiss-Army knife for SharePoint (URL Protocol aka owssrv.dll) and - good news! - it actually worked!  Silverlight can access data from a SharePoint list without the need to have a web service call.  Essentially using the same built-in web client classes inside Silverlight designed to access external web pages or files.    

 

So what is the SharePoint URL Protocol?


Excerpt from MSDN:

Embedding a request in a URL is a basic mechanism for issuing a method and its parameters to a server running Windows SharePoint Services.

 

The syntax

for using this mechanism is as follows:

[http://Server_Name/[sites/][Site_Name/]_vti_bin/owssvr.dll?Cmd=Display&List=GUID&XMLDATA=TRUE]

 

The details of using this syntax as part of your Silverlight application have been included in the code sample later in this post. 

 

The technical approach for the solution using Silverlight, a SharePoint list, and the URL protocol: 

 

Using Microsoft Expression Blend for the initial layout and Visual Studio 2008 for the C# code, I created an animated filmstrip (a variation of the all too familiar carousel in SilverlightJ) to display thumbnail images of the images and videos along with a main player area to display the larger view of the image/video when the user selected a thumbnail from the animated filmstrip. 

 

Advantages of using Silverlight:

Rich support for animation, rich set of controls, good development tools, i.e. Microsoft Expression Blend and Visual Studio 2008, and all the advantages of coding in C# with a simple deployment process.  You can even copy the Silverlight XAP files (essentially a compressed zip file with all your code) into a SharePoint document library and run from there along with a simple HTML page. 

 

Advantage of using a SharePoint list as the source data for the filmstrip player:

The administrator of the SharePoint list can designate what gets displayed in the filmstrip player automatically via the SharePoint list:

 

·          Designate the initial image/video that loads when the page loads.

·          Turn individual items visibility on/off

·          Select the appropriate thumbnail image and larger image

·          Select the appropriate URL for a video to be played in the video player

 

Advantages of using the URL protocol to populate the Silverlight filmstrip items:

It’s a lightweight HTTP protocol, can be accessed via a simple URL, and does not require web services to access the data in a SharePoint list. 

 

Example of the end solution:

 

Filmstrip player functionality:

·          Animated filmstrip displaying thumbnail images based on links provided in the SharePoint list.

·          Video player to play embedded .wmv video also based on links provided in the SharePoint list.

·          Image viewer to display larger image based on user selection in the filmstrip.

·          Main player section hot-linked to external URLs based on links provided in the SharePoint list.

·          User controls for the filmstrip animation

·          Pause/Play controls that turn on when video is loaded.

 

Example

Other potential uses?

  • Could be used on a Real Estate site to dynamically display images/video of the advertised home.
  • A video player for a blog using the blog to collect comments.
  • Basic slide show for a SharePoint document library or to display images from Flickr for instance in your SharePoint.

What's interesting about this implementation?

 

Using the URL protocol provides a simple mechanism for accessing SharePoint list data from within  Silverlight without the need to add a web service reference.

 

Using LINQ to XML to parse the returned data from the SharePoint in XML greatly simplifies working with the SharePoint list data in Silverlight once it’s retrieved.    

 

Using LINQ to XML also simplifies restructuring the data to a standard RSS feed format to use the data from the SharePoint list's built-in RSS feature as another option.

 

What's next on the feature front?

  • Adding the ability for users to leave comments and ratings.
  • Adding the ability for users to upload their own videos.

Code Example:

Example C# code for accessing the SharePoint list in Silverlight:

 

Silverlight 2 application attached to a ASPNET web project (I don't host the ASPNET app in SharePoint but easy way to generate the test.html and .XAP file)

 

 

public partial class Page : UserControl
    {
        private XNamespace z = "#RowsetSchema";      
        public Page()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Page_Loaded);
        }
        public void Page_Loaded(object sender, RoutedEventArgs e)
        {
            string sUrl = "
http://[server]/[site]/_vti_bin/owssvr.dll?Cmd=Display&List={[listguid]}&XMLDATA=TRUE";
            WebClient sp = new WebClient();
            sp.OpenReadCompleted += new OpenReadCompletedEventHandler(sp_OpenReadCompleted);
            sp.OpenReadAsync(new Uri(sUrl));
        }
void sp_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {
            if (e.Error == null)
            {
              
var items = from item in results.Descendants(z + "row")
                        where item.Attribute("ows_LinkTitle") != null
                        orderby (DateTime)item.Attribute("ows_Created") descending
                        select new FilmFrame
                        {
                            ItemTitle = (string)item.Attribute("ows_Title"),
                            ItemLinkTitle = (string)item.Attribute("ows_LinkTitle"),
                            ItemType = (string)item.Attribute("ows_ItemType"),
                            ItemSourceUrl = (string)item.Attribute("ows_SourceUrl"),
                            ItemThumbnailUrl = (string)item.Attribute("ows_Thumbnail"),
                            ItemDescription = (string)item.Attribute("ows_Description"),
                            ItemDisplayFilmStrip = (string)item.Attribute("ows_DisplayInFilmstrip"),
                            ItemCreated = (DateTime)item.Attribute("ows_Created"),
                        };
//You can bind to an itemtemplate for a listview directly for simplicity-the specfic example UI above builds the XAML dynamically to provide more

flexibility
 //ListView.ItemsSource = items;
            }
        }

 

Separate namespace for filmstripitem:
namespace FilmStrip
{
    public class FilmStripItem
    {
        public string ItemTitle { get; set; }
        public string ItemLinkTitle{ get; set; }
        public string ItemSourceUrl { get; set; }
        public string ItemType { get; set; }
        public string ItemDescription { get; set; }
        public string ItemDisplayFilmStrip { get; set; }
        public DateTime ItemCreated { get; set; }
      
    }
}

 

Things you might want to consider when making use of this example:

 

The test.html and .xap file is being hosted inside SharePoint.  In this case I just dropped on the SP Site at the root site level via SharePoint Designer.

 

For a quick way to databind the XML returned from the SharePoint list to XAML I initially used listbox and a data item template.

 

Summary:

 

The URL protocol is just one more option for accessing the data in your user's SharePoint lists and web client class in Silverlight provides a mechanism to use the list data inside your Silverlight applications hosted in SharePoint.

 

Rod Stagg http://www.rstagg.com
SharePoint Solutions Architect
Allyis Inc. Kirkland Wa
http://www.Allyis.com

Windows Live Writer is Great for SharePoint Blogs Too

Windows Live Writer from Windows Live is not only a great way to post to your SharePoint blog but it's also free.   

What is Windows Live Writer?

Excerpt from Wikipedia:

Currently compatible with Windows Live Spaces, Blogger, LiveJournal, TypePad, Wordpress, Community_Server, PBlogs.gr, JournalHome, the MetaWeblog API, the Moveable Type API, and all blogs that support RSD (Really Simple Discoverability).

Windows Live Writer introduces the Provider Customization API that enables both rich customization of Windows Live Writer's behavior as well as the opportunity to add new functionality to the product. Currently Windows Live Spaces, WordPress, and TypePad have all taken advantage of this API to expose additional service-specific features within Windows Live Writer.

Windows Live Writer is currently available in 6 different languages.

Why Use It?
It's easy to use, supports multiple blogging platforms, provides a good preview of the post prior to posting, and makes formatting, inserting images, and inserting inline videos much easier than coding by hand.  Plus, you have the capability to use the add-in library and even write your own add-ins using the WLW API. 

Since discovering WLW a year ago, it's all I use for blogging to my own blog on Windows Live Spaces, and also a blog I maintain on the SharePoint intranet where I work.   

To make my posts stand out, I frequently incorporate images and video into my posts - on occasion creating my own training videos and then inserting them into my blog posts. WLW makes this easy. 

Inserting Videos:
Here is a training video I did using Windows Media Encoder for screen capture, Microsoft Media Encoder to encode and post directly to MSN SoapBox and the Silverlight Streaming Service. From Windows Live Writer I can insert a video from my Silverlight Streaming Service or MSN Soapbox - even get a preview mode of the video. Nice. 

Using SharePoint Linked Data Sources Video

 

Inserting images:
Inserting images is even easier - just choose Insert an image, browse to the image on your desktop, and WLW even posts the image into your SharePoint blog in a library for you, maintaing the correct image path. 

Blogging while offline and to multiple platforms:
WLW is also a great way to create and edit blog posts while offline and then post to your blog when convienent.  Another plus is that it supports more than one blog platform so it's an ideal choice for creating a single blog post and publishing to multiple blog platforms including SharePoint.  This is great for blogging on a plane, in meetings, and especially useful when blogging at a live event when internet access isn't available or is unreliable. 

I use WLW to post to my Windows Live Spaces Blog and then syndicate to my notes in Facebook, Linked-In profile, and my personal blog page on our company SharePoint blog based on categories assigned in WLW and the built-in RSS Feeds provided by Windows Live Spaces.  WLW really simplifies inserting pictures, videos, maps, etc., plus you can develop your own add-ins which is cool. Having the ability to blog offline and to multiple platforms is a huge plus.  Did I mention it's free? 

Check out the Windows Live Writer download page for more details.

Rod Stagg (website) http://rstagg.com
SharePoint Solutions Architect
Allyis Inc.

Adding JavaScript Tabs to SharePoint
jQuery TabsOne of the most under-utilized web parts by designers inside SharePoint has to be the content editor web part.  The reason why it's so powerful is because it allows us to embed any markup we want right in the page. We will utilize this web part as well as adding some markup with SharePoint Designer to add some functionality to our SharePoint site.
 
Using the Content Editor Web Part
 
Whether you're using MOSS or WSS you can do this tutorial. All you need is a web part zone in a page.
  1. Simply click to add a web part and choose the content editor web part (I'll be doing so in the right-hand side of the page).
  2. Then, in the content editor web part, click the link to "open the tool pane."
  3. Then, click the Source Editor button and paste in the following HTML.

(It includes some example information for conference participants.)

<div id="topsidebar">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>Hotel</span></a></li>
<li class=""><a href="#fragment-2"><span>Contact</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide">
<p>Here are details corresponding to the hotel attendees will be staying at:</p>
<p><a href=http://example.com/>Example Hotel</a><br /> One Microsoft Way, Redmond, WA 98052<br /> Tel: 1.555.555.5555 Fax: 1-555-555-5556</p>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Contact the following for details about the conference:</p> <p>Chris Poteet<br /> <a href=mailto:chris.poteet@example.com>Chris Poteet's E-mail</a><br />555.555.5555</p>
</div>
</div>

When you're done, click OK to exit the Tool Pane, and if you're using WSS then click Exit Edit Mode on the page. If you're using a MOSS publishing page then click the Publish button.

Downloading the jQuery Goodness

Then we need to add both the jQuery framework and jQuery UI which is a framework built on top of jQuery for accomplishing common DHTML functionality.  I have included a ZIP file for you with the necessary JavaScript files. I suggest unzipping this file to the desktop.

Once you have downloaded the files we need to put them on our site. Open your site in SharePoint Designer and expand the _catalogs -> masterpage folder. Drag both JavaScript files into the masterpage folder. Then you may have to check in both as major versions by right-clicking on the files and Check In. (You might also be prompted for content approval which will take you to the master page library to approve the documents.)

Adding References in Our Master Page

Now we need to add references to our JavaScript files as well as instantiate our tabs. Then you will need to add the following to reference the two libraries in the <head> section of your master page.

<script type="text/javascript" src="/_catalogs/masterpage/jquery.js"></script>
<script type="text/javascript" src="/_catalogs/masterpage/jquery-ui.js"></script>

Then we use the following to instantiate our tabs. The document.ready() function allows jQuery to run after the DOM has rendered, and the next line turns on the tabs for the unordered list right beneath the topsidebar div. I decided to use a nice toggle to switch between tabs. This goes inside the <head> after the references we added above.

<script type="text/javascript">
 jQuery(document).ready(function() {
  jQuery("#topsidebar > ul").tabs({
      fx: {
          opacity: "toggle"
      }
  });
 });
 </script>

Adding the CSS

Since DHTML is truly the alteration of the DOM through mostly CSS changes we need to use CSS to hide/show elements in the tabs. Check out your custom CSS file, and then add the following. (If you don't have a custom CSS file reference this post by Microsoft on how to do so.)

/* Conference Welcome Page */

.ui-tabs-hide {
 display: none;
}
ul.ui-tabs-nav {
 margin: 0;
 padding: 8px 0 0 0;
}
ul.ui-tabs-nav li {
 list-style: none;
 margin: 0;
 display: inline;
 font-size: 12px;
}
ul.ui-tabs-nav li a {
 padding: 5px;
 margin-right: 3px;
 border-bottom: none;
 text-decoration: none;
 color: #000000;
 text-transform:uppercase;
}
ul.ui-tabs-nav li a:hover {
 color: #000;
 background: #F1EEE7;
 text-decoration: none;
}
.ui-tabs-selected a {
 background-color: #F1EEE7!important; 
}
ul.ui-tabs-nav li.ui-tabs-unselect a {
 background-color: #F1EEE7;
}
ul.ui-tabs-nav li.ui-tabs-unselect a:hover {
 color: #333;
 background-color: #F1EEE7;
}
.ui-tabs-panel {
 background-color: #F1EEE7;
 padding: 5px;
 line-height: 18px;
}
.ui-tabs-panel ul {
 margin-left: 0;
}
.ui-tabs-panel ul li  {
 background-color: #F1EEE7;
 border-bottom: 1px solid #fff; 
 padding: 5px 0 6px 20px;
}

You're Done!

You've now added some slick tabs to your SharePoint site. There are a multitude of options inside the jQuery UI tabs documentation. Also be sure to change the CSS to match whatever color scheme your SharePoint site uses.

Chris Poteet is a SharePoint consultant for Mixon Consulting with a focus on business analysis, and enterprise information architecture. He also has been involved in user experience and interface designs for over a decade. You can also follow him at his blog at www.siolon.com.