Monthly Archives: October 2012

Fixing SharePoint 2010 dynamic menus on the iPad

When using an iPad with the default v4 Master Page in SharePoint 2010, the dynamic drop down menus do not function as expected. When using a mouse, a simple hover over the menu item will drop down the dynamic menu child items (as shown below).

SharePoint 2010 menu on ipad

When using an iPad, iPhone and most other smart phone/tablets device, there is no mouse and no hover over action. When clicking on the parent menu item, the user is taken to that link instead of showing the child items.

To solve this issue (partially), I created some jQuery code to allow the first tap to drop down the menu items and the second tap to take the user to the chosen page.

First I use the jQuery ready function to load my script when the page has fully loaded.

jQuery(document).ready(function() {
});

When the page has finished loading, the type of device needs to be detected. In the example below I have used the iPhone, iPad and iPod devices. There are alternative devices!

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
}

This solution involves using a counter to detect the first tap of a dynamic menu item as a hover over and the second tap as the actual click. First, set the counter to 0.

var countipad=0;

Another handy jQuery function is used to detect when a dynamic menu item is clicked. Using this class “dynamic-children” ensures that only the first click of a drop down menu is cancelled.

jQuery("a.dynamic-children").click(function() {
}

If the click is the first click, the default action (redirect) is prevented. The counter is then incremented ready for the next click.

if(countipad==0){
	event.preventDefault();
	countipad=countipad+1;
}

The full solution is as follows:

jQuery(document).ready(function() {
	if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
		var countipad=0;
 		jQuery("a.dynamic-children").click(function() {
			if(countipad==0){
				event.preventDefault();
				countipad=countipad+1;
			}
		});
	}
});

This isn’t a great solution as the second click will always take you to the link. A better solution would detect which link is selected and only redirect on the second click of that particular menu item.

ipad menu SharePoint 2010

Design Manager in SharePoint 2013

There are a number of options available for visual designers and information architects. One of the great new features in SharePoint 2013 is the Design Manager. You can locate this by going to the settings menu and selecting “Design Manager”

Screen 1

Design Manager is a series of pages and links to take you to the design libraries similar to those found in SharePoint 2010. From welcome page you can import wsp packaged designs or pick from a pre-installed master page.

Screen 3

“Manage Device Channels” is a new feature which allows you to change the look and feel of a site based on the client’s device or browser. This is great for optimising the rendering of the page in mobile devices.

Screen 4

The “Upload Design Files” is a link to the _catalogs folder which was also used in SharePoint 2010 and MOSS to store the Master Pages. It recommends that this is mapped as a network drive.

Screen 5

“Editing Master Pages” is a link to the _catalogs folder which was also used in SharePoint 2010 and MOSS to store the Master Pages.

screen 6

“Edit Design Templates” is another new feature in SharePoint 2013. It allows customisation of the way content is displayed. This might be used to customise search results by defining fields but also presentation. More information can be found here http://msdn.microsoft.com/en-us/library/jj163942%28v=office.15%29.aspx

screen 7

“Edit Page Layouts” is another shortcut to a library which was also used in SharePoint 2010 and MOSS. It displays the page layout content types from the master page gallery.

screen 8

The page shown below reminds the designer to publish all of the files before applying the design to the site. A handy link to apply the Master Page is provided.

Create design package allows the design to be exported and used on other sites. This is really useful for taking a design from a development environment to the live site. To create this package previously would have required creating a solution or feature in Visual Studio and deploying it to the server or site collection. This is a handy tool to do this for you.

All of the features below are described in more detail on Microsoft’s site.
http://msdn.microsoft.com/en-us/library/jj163942%28v=office.15%29.aspx

While the design manager is more of a guide than somewhere an experienced designer will actually upload there designs to (SharePoint Designer will be the main tool), it does make the design process clearer and provides some neat tools for the new functionality about to be released in Microsoft SharePoint 2013.

SharePoint 2013 Design Manager