Nick Hadlee's Blog on SharePoint and Other Occasional Rants…


Customise Breadcrumbs with jQuery the SharePoint Swiss-Army Knife
May 23, 2009, 2:22 pm
Filed under: Development, jQuery, SharePoint, WCM

Breadcrumbs in SharePoint seem to be a pet hate for many people, but they are a necessary evil as they provide a fundamental part of the SharePoint navigation. The stock standard SiteMapProvider SPContentMapProvider is good from within libraries and lists but is lousy for pages as described by Heather Solomon:

The main issue with the WSS site map provider is it will show directories you don’t want it to (mainly the Pages library) in the breadcrumb, and on some pages it will show ".aspx" on the end of the page name. The MOSS site map provider is more graceful, it just doesn’t show the list or library name in the breadcrumb.

So using the WSS breadcrumb we would get the following breadcrumb from within a library or list:

Site Name > Library or List Name > Folder Name

That is pretty useful for users, especially if they have a habit (I’m tempted to say bad habit!) of using folders to manage their content. The problem is what you see when viewing a page:

Site Name > Pages > PageName.aspx

What we really want to see is a very stripped down breadcrumb more like what the CurrentNavSiteMapProviderNoEncode provides:

Site Name

The best approach is to modify the relevant page layouts so we are using the CurrentNavSiteMapProviderNoEncode for our page level breadcrumbs. Then we have the SPContentMapProvider in the master page as the default breadcrumb provider and the nicer page level breadcrumb coming from CurrentNavSiteMapProviderNoEncode. The problem is what if we have lots of page layouts or even worse we don’t have any page layouts at our disposal – WSS or non publishing MOSS sites? Using a bit of jQuery we can mimic what the we could get with the CurrentNavSiteMapProviderNoEncode by using only the SPContentMapProvider breadcrumbs:

That might not be optimal jQuery (in fact I could almost guarantee its not so if anybody can suggest optimisations please let me know!) and this solution is not going to be very useful unless you can deploy it into your entire site via a web or site scoped feature. Jan Tielens provides a really good example on how to integrate jQuery into SharePoint using the AdditionalPageHead delegate control.

$(document).ready(function() {
	var pageIndex = -1;
	var offset = 2;
	var $spans = $("#ctl00_PlaceHolderTitleBreadcrumb_ContentMap > span");

	if($spans.eq($spans.length - 1).text().search(/\.aspx$/) > -1) {
		$spans.each(function(i) {
			if( $(this).text() == "Pages" ) {
				pageIndex = i;	
			}
		});	

		$spans.each(function(i) {
			if(i == (pageIndex - offset)) {
				$(this).addClass("ms-sitemapdirectional");
				var innerText = $(this).text();		
				$(this).empty();	
				$(this).text(innerText);
			} else if((pageIndex != -1) && (i > (pageIndex - offset))) {
				$(this).empty();
			}
		});
	}
});

Want to know more about jQuery? A simple google search on jQuery+SharePoint is a good start or take a look at what Jan Tielens or the guys and gals at End User SharePoint have got to say.

Advertisements

2 Comments so far
Leave a comment

[…] to Fix 'Image Web Part'SharePoint 2010 Presentation at the Christchurch SharePoint User GroupCustomise Breadcrumbs with jQuery the SharePoint Swiss-Army KnifeSharePoint Conference and […]

Pingback by jQuery to Fix ‘Image Web Part’ « Nick Hadlee's Blog on SharePoint and Other Occasional Rants…

Good stuff..Thanks

Comment by Ted




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: