Tag Archives: SharePoint

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

SharePoint 2013 Preview

SharePoint 2013 Preview

SharePoint 2013 Preview version was released this week. I took the chance to install it and get a first look at the new version of Microsoft’s powerful integration content management software.

Resources:
Install files can be found here
http://www.microsoft.com/en-us/download/details.aspx?id=30345
SharePoint 15 Training files
http://technet.microsoft.com/en-US/sharepoint/fp123606

SharePoint 2013 Preview Home
Install notes:

The install is very similar to SharePoint 2010. Hardware requirements seem to be exactly the same as the previous version. The only additional work I had to do was upgrade SQL Server 2008 R2 to service pack 1.

Office Web Apps:

Office web apps are no longer a service application within SharePoint. In fact they are now set up as a completely separate farm from SharePoint. This is because other products/services can integrate with this farm such as exchange. This also allows web app system usage and load to be completely independent from the SharePoint farm.

Mobile View:

The new version of SharePoint will have device detection to redirect to a mobile site. Also capable of mobile push notifications.

Sharing:

When a site is created, the site owner is encouraged to share the site using the share button at the top of the page. This seems to be more of a rewording/rearrangement of the site permissions page.

Apps:

Lists and Libraries have been renamed Apps. You can download additional Apps from the SharePoint Store (very original).

Apps
Ribbon:

The ribbon has been restyled slightly but the biggest improvement is in the performance of the ribbon appearing when editing the page. Waiting for the ribbon to load a tab in SharePoint 2010 no longer happens in SharePoint 2013, the ribbon slides out instantly and smoothly.

Ribbon

Of course there is far more to SharePoint 2013 than just this. I will post back when I have dug a little deeper.

Theming

Creating a HTML5 iPhone Web App!

iPhone App Icon

First create two images which will be vital in creating the iPhone web application. The first image is for the app’s icon. This is the icon you will see when you add it to your home screen. Make sure your image is 57px by 57px and save it as a JPEG or PNG file.

iPhone icon

Startup Screen

The second image is for the app’s loading screen. When the icon is selected, the app will start in full screen mode and display a loading screen while it loads the HTML page in the background. This image should be 320px wide and 460px high.
Startup Screen

HTML 5 page

HTML5 does not yet work in any desktop browser fully yet but more mobile web broswers are supporting it.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset=utf-8>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<title>tony is here iPhone web app</title>
		<link rel="stylesheet" href="html5css.css">
		<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
		<link rel="apple-touch-startup-image" href="images/tonystartup.png" />
		<!-- Prompt user to install on iphone if accessed through mobile safari -->
		<script type="text/javascript">
			if (window.navigator.standalone) {
				// fullscreen mode
			} else{
				alert('Install on iPhone by pressing Add to Home Screen')
			}
	</script>
	</head>
	<body>
		<section id="wrapper">
			<header>
				<h1>Tony Phillips SharePoint and Web Design Blog</h1>
			</header>

			<article>
				<section>
					<button type="button" name="Blog" class="css3button" onclick="parent.location='blog.html'">Blog</button>
					<button type="button" name="Linked In" class="css3button" onclick="parent.location='linkedin.html'">Linked In</button>
					<button type="button" name="Facebook" class="css3button" onclick="parent.location='facebook.html'">Facebook</button>
					<button type="button" name="Twitter" class="css3button" onclick="parent.location='twitter.html'">Twitter</button>
					<button type="button" name="Email" class="css3button" onclick="parent.location='email.html'">Email</button>
				</section>
			</article>
		</section>
	</body>
</html>

You may notice a few differences in the example above from a standard HTML page. There are two link tags to provide the iPhone with the icon and loading screen location. These are the two graphics created in the first section of this post.

<link rel="apple-touch-icon" href="images/tony-icon.jpg" />
<link rel="apple-touch-startup-image" href="images/tonystartup.png" />

The two meta tags below scale the site to the mobile device’s screen and enable adding as a web app on the iPhone.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">

The only new tags in this example are the section, header, article and button tags which all make it much easier to create websites in HTML5. HTML5 is worth a google!

JavaScript

You can also detect if the site is being accessed through the web browser or if it has been loaded from the home screen. If it has been opened in the browser, we can notify the user that they can add this site as a web app. All you need to do is add the following JavaScript in the HEAD section of the HTML.

// Prompt user to install on iphone if accessed through mobile safari
if (window.navigator.standalone) {
// fullscreen mode
} else{
alert('Install on iPhone by pressing Add to Home Screen')
}

Make sure you take full advantage of CSS3 when styling your site. Rounded corners and shadows look great on buttons without the need for background images or jQuery!

To see this example working go to the following URL on your iPhone and add it to your home screen. In my next post I will explain how this could also be a SharePoint MasterPage!

http://www.tonyishere.co.uk/mobile

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:

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