Tag Archives: SharePoint Design

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

BETT 2012 – Olympia, London

BETT show 2012 Olympia
I will again be attending the BETT 2012 show at Olympia, London on 11th-14th January 2012.

I will be demonstrating SharePoint customisation and integration into schools systems (SIMS, Exchange, Moodle, VLEs, etc..) on Stand H9 in the National Hall.

For more information please visit the following websites:

Corners in IE and Firefox for SharePoint MasterPages

You may find that the OOTB V4 master page has the Meta tag: <meta http-equiv=”X-UA-Compatible” content=”IE=8″/>. This renders the page in IE8 mode even when using IE9.

Web Designers may realise that this means CSS3 rounded corners are not available (http://www.css3.info/preview/rounded-border/). Unfortunately removing this tag breaks SharePoint’s ability to drag and drop web parts between web part zones and a few other quirky things.

Rounded corners in CSS3 use anti-aliasing to give a clean smooth effect. It also renders very fast. Using jQuery.corner.js sometimes slows the page down and causes a slight flicker, the rendering is not as sharp as the CSS3.

Rounded web part zone

To optimise the loading so that IE uses jQuery rounded corners and all other modern browsers use CSS3, I used the following code:

<!–[if IE]>

<script type=”text/javascript”>

jQuery(document).ready(function() {

jQuery(‘.right-wp-zone-core-1’).corner(“12px”);

});

</script>

<![endif]–>

<style type=”text/css”>

.right-wp-zone-core-1{

-moz-border-radius: 12px;

border-radius: 12px;

}

</style>

A bit disappointed with the rendering in IE9 but ensures that all browsers get the best experience possible.

The problem is not that CSS3 doesn’t work with IE 9 (it does very well!) but SharePoint 2010 does not work with IE9 (e.g. dragging web parts, people picker, etc…) so Microsoft force with default Master Page into IE8 mode using the meta tag.

Hopefully there is an update to IE9 soon (maybe automatic??) to fix SharePoint compatibility and then we can all happily use CSS rounded corners!!

Apply Custom Master Page to all Site Collections

I’ve just upgraded my MOSS 2007 site to SharePoint 2010. Oh No! The Master Page for 2007 doesn’t work in 2010 and I have 1500 Site Collections each with three websites!!

I need to activate my Master Page feature on each site collection and apply it to every site. Back in the old days, I would enumerate sites and create a huge script in excel to activate features and apply the Master Page. This is quite time consuming especially if you are upgrading different web applications every day. I thought it was time I tried to make this job easier and faster using PowerShell.

First start by looping though all the site collections in the web application then loop through the all the websites in the site collection (nested loop to get to every web in the web application). Then retrieve the URL of the web application and the URL of the site collection.
If the site is using a managed path for the site collections, it needs to be the relative path to the Master Page from the root of the web application.

e.g.

Web Application: http://www.tonyishere.co.uk
Site Collection: http://www.tonyishere.co.uk/sites/accounts
So the Master Page URL would be:  /sites/accounts/_catalogs/masterpages/custom.master

So how do we find the MasterPage URL path (as seen above) for each site collection? Using the length of the URL strings, the web application URL can be broken into a substring and appended to create the right path (see below).

e.g.
$len2 = $webname.length - 1
$len = $webappname.length
$len3 = $len2 - $len
$masterpath = $webUrl.substring($len,$len3)
$masterpath = $masterpath += "/_catalogs/masterpage/custom.master"

The new Master Page path then needs to be applied to the website.

$web.CustomMasterUrl = $masterpath

I found looping through 4500 websites in 1500 site collections took about 9 seconds, compared with the four hours that stsadm would of taken….big difference!!

Here is my full script to activate the feature on the site collection and loop into each website and apply the Master Page.


$webapp = Get-SPWebApplication https://www.tonyishere.co.uk
foreach ($s in $webapp.sites)
{
Enable-SPFeature MyCustomMasterPageFeature -Url $s.url
foreach ($web in $s.AllWebs)
{
$webUrl = $web.url
$web = Get-SPWeb $webUrl
$webappname = $webapp.url
$len2 = $webname.length - 1
$len = $webappname.length
$len3 = $len2 - $len
$masterpath = $webUrl.substring($len,$len3)
$masterpath = $masterpath += "/_catalogs/masterpage/custom.master"
$web.CustomMasterUrl = $masterpath
$web.MasterUrl = $masterpath
$web.Update()
}
}

European SharePoint Best Practice Conference 2011

bestPracticesLogo

I attended the SharePoint Best Practices Conference 2011 in April and came away with lots of great handy tips. Here is a quick summary of some of what I came across.

IIS caches user AD group membership –

You may have wondered why adding someone to an AD security group does not give someone instant access to a SharePoint site? Although SharePoint’s people picker reads directly from Active Directory, the actual group membership of clients is cached in IIS. So if you have accessed a site before and recently been added to a group in AD, it does not guarantee instant access to the new SharePoint sites. Even if the AD imports are run from Central Admin, it does not guarantee access to the site.

Using PowerShell to search error logs-

I went to a couple of talks by world famous SharePoint expert Gary La Pointe which was based on the use of PowerShell with SharePoint. He did a talk on using PowerShell for administrators and another talk on the use of PowerShell for developers. One of the things that always disappoints me is seeing another correlation ID appearing in a SharePoint error. Now using PowerShell we can write a function to quickly search the log files and return the recent matches to our correlation ID.

Get-SPLogEvent -StartTime (Get-Date).AddMinutes(-10) | ? {$_.Correlation -eq “8db5e7ed-075c-46cc-8d7c-e2cb78f15f7e”}

http://blog.falchionconsulting.com/index.php/2011/04/european-sharepoint-best-practices-conference-wrap-up/

It was a very eye opening talk by Gary and really made me realise the potential of PowerShell as an administration tool and also a very powerful development tool. Note that you can call these PowerShell commands/functions from c# code making some very interesting application pages.

Updating Display Name in profiles-

When a user logs into a SP2010 site, their display name in displayed in the top right corner of the page (when using v4 master). Sometimes a user may need their display name updating (e.g. marriage, legal, etc…). This is usually changed in AD and expected to replicate through to the SharePoint site.

This doesn’t always happen automatically and the reason for this is that if someone has not contributed to a site collection, then the site collection will not check that the profile information is up to date. One solution to this would be to delete the user from the site collection and get them to access it again. The most obvious solution though would be getting the user to contribute to the site collection in some way (adding announcement, uploading a file, etc…). Once the user has contributed to the site and the sync-profiles job has run, the display name will be updated!

Mysite Provisioning in 2010-

If your profile is not found when the profile sync job is run (your profile has probably been deleted from AD), then your profile is flagged for deletion by SharePoint. It is not deleted automatically in SharePoint 2010. The user will no longer be able to login. Public access is stopped and the manager of the user is now the site collection administrator. The manager is atomically sent an email asking them to backup any data on the site before it is deleted after x days.  The Mysite clean-up job will delete any users flagged for deletion. This will not remove the user from the info table (this is so you can still see who created/modified documents still on the system). There are 14 timer jobs relating to social and profile imports!

If a user is disabled in AD and later re-enabled, you will have to reinsert the profile property (URL) manually into the profile. If a user has been recreated (deleted and made again), the only option is to create a new Mysite and migrate any content across manually. Even with the same username, all the permissioning will be broken as AD uses the GUID rather than the actual username to permission items.

There was far more and much more detail but unfortunately I have run out of time. My train journey is coming to an end so I have to wrap up.

Will try to get more up soon….

Tony Phillips