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


The First SharePoint Saturday New Zealand
December 19, 2010, 3:13 pm
Filed under: Development, jQuery, SharePoint, SharePoint Saturday, WCF

The first SharePoint Saturday was held in New Zealand on Saturday the 11th of December. I may be a little biased but I think the event was a real success with at least 80-100 people, close to 20 sessions and 17 speakers. A big thanks to all our sponsors, the speakers and also the other organisers. These events are a lot of work to put on so it wouldn’t have been possible without all of these people!

Any of the session slides that have been made available by the speakers are up on the site and we will continue to try and get the rest. Look forward to seeing everyone at next years event…

My session was in the developer stream and built a SharePoint 2010 Alerting solution to show how 1) to build a custom WCF web service that returns JSON, 2) how SP.UI JavaScript namespace is used to interact with the status bar, notifications and modal dialogues and 3) how to call web services from jQuery. The session slides are provide below for anyone that wants them:



jQuery to Fix ‘Image Web Part’
July 18, 2009, 6:35 pm
Filed under: jQuery, SharePoint

While working on a mini-demo site today I managed to get distracted with a very minor (and irrelevant) component of the site. I felt compelled to find an elegant-ish resolution even though it served no practical purpose for the demo I was building. How often does that happen?

Image Web Part Sizing

The out-of-the-box Image Web Part is great for adding images to a site. Like all Web Parts it has some properties for changing the web parts behavior, but the problem is some of them don’t quite work as you might expect.

The width and height properties are the true target of this this post. Your initial expectation when you set them is the image displayed by the web part will resize to match the settings. This just isn’t how it works – if the image’s physical size is bigger than the Web Part then some ugly scroll-bars appear.

Image Without Resize

Figure 1: Standard ‘Image Web Part’ with the width property set.

Using a little bit of jQuery we can use these properties to apply the settings to our image as well. The following script can be added to the site using the Content Editor Web Part.

 <script type="text/javascript">
$(function(){
 $("img[id^='MSOImageWebPart_']").each(function(){
            var width = $(this).width();
            var parentDiv = $(this).parents("div.ms-WPBody");
            if(width > parentDiv.width()) {
                this.width = parentDiv.width();
            }
        });       
});
</script>  

Dynamically Resized Image

Figure 2: ‘Image Web Part’ that was resized with jQuery

Note: In this example I am only manipulating the width property of the image element. This leaves the browser to calculate the height of the image to keep everything in proportion. The height could be applied as well but then the image can start to look a little distorted):

See my previous post on jQuerywhich has some useful jQuery links including Jan Tielens excellent post on deploying jQuery to a site collection via a feature. Time to get back to building the demo now the distraction has been dealt with…



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.




%d bloggers like this: