SharePoint (and Project Server) Shenanigans

Today I had a requirement to alter the title in the left hand side of the Suite bar in SharePoint 2013.

This is the bar appearing at the very top of the page, by default containing the word SharePoint on the left and links to things like SkyDrive, the Newsfeed and sites you follow on the right.

In this particular scenario I was interested in changing the word SharePoint to something more meaningful, preferably customisable on a per web basis, or based upon the site collection root web’s title.

My first thought on trying to change it was to look into the master page but I could find no reference to it there, so I did a little digging and found some surprising details.

1. The entire bar is a delegate control
2. The left hand part of the bar is stored as a property against the Web Application
3. There is no way of modifying the right hand links without writing a farm solution in .NET, or adding custom JavaScript to each page to modify the links on the fly.

While these problems are not insurmountable, it left me a little nonplussed, especially the idea that it was not possible to modify the branding uniquely per site collection or per web. However I bravely fought on, as I was really quite determined to get that heading working the way I wished.

My first test was to see what the property against the web application was called, and what it contains by default. Let’s break out our trusty SharePoint Management Console and use the following bit of PowerShell.

$webApp = Get-SPWebApplication -Identity "http://mywebapplicationurl"
$webApp.SuiteBarBrandingElementHtml
<div class="ms-core-brandingText">SharePoint</div>

This seems straight forward enough, the property is a string containing the HTML for the heading, so let’s go and update it to something else using the same window from our previous example (Re-do the Get-SPWebApplication call again if you have closed it)

$webApp.SuiteBarBrandingElementHtml = '<div class="ms-core-brandingText">My Custom Branding</div>'
$webApp.Update()

Note the call to the Update() method, without this your changes will not be applied to the Web Application.

Once done, refresh your page and you will see that your branding has updated accordingly.

So to recap, we can modify this string only on the Web application level, but when we do so, we can put HTML tags in directly, and they will be rendered to the page. Interesting!

Let’s talk about JavaScript

The ECMAScript Object Model first came into its own with SharePoint 2010, and with 2013 has gone from strength to strength. Lets see if we can’t use it to meet our requirement of at least customising the Suite bar based on the current Site Collection’s root web title.

To do this is very simple in code, take a look at the following JavaScript example:

(function() {

	// Set a default title to use if we cannot retrieve one.
	var defaultTitle = 'SharePoint';

	// Ensure that both the DOM and the Object Model are ready for us
	document.addEventListener('DOMContentLoaded', function() {
		EnsureScriptFunc('sp.js', 'SP.ClientContext', function() {

			// Instantiate our renamer.
			var t = new titleBarRenamer();

		});
	});


	function titleBarRenamer() {

		// Get and load a reference to the root web of the current site collection.
		var ctx = new SP.ClientContext.get_current();
		var site = ctx.get_site();
		var rootWeb = site.get_rootWeb();

		ctx.load(rootWeb);

		// Send our query off to SharePoint.
		ctx.executeQueryAsync(function() {

			var title = false;

			// Pull the title into a variable.
			// Default to the default title if it fails.

			try {

				title = rootWeb.get_title();

				title = title || defaultTitle;

			} catch (e) {

				title = defaultTitle;

			}

			// Update our title to our results.
			document.getElementById('webTitleContainer').innerHTML = title;

		}, function() {

			// If all else fails, set the title back to our default.
			document.getElementById('webTitleContainer').innerHTML = defaultTitle;

		});
	
	}

})();

That’s cool, wherever this code is run it will set an HTML element with an ID of ‘webTitleContainer’ to the root web’s title.

Putting it all together

So how do we combine these two together?

Again this is pretty simple, take a look at the following PowerShell:

Add-PSSnapIn Microsoft.SharePoint.PowerShell

$containerCode = @"
<div id='webTitleContainer' class='ms-core-brandingText'></div>
<script type='text/javascript'>
(function() {

	// Set a default title to use if we cannot retrieve one.
	var defaultTitle = 'SharePoint';

	// Ensure that both the DOM and the Object Model are ready for us
	document.addEventListener('DOMContentLoaded', function() {
		EnsureScriptFunc('sp.js', 'SP.ClientContext', function() {

			// Instantiate our renamer.
			var t = new titleBarRenamer();

		});
	});


	function titleBarRenamer() {

		// Get and load a reference to the root web of the current site collection.
		var ctx = new SP.ClientContext.get_current();
		var site = ctx.get_site();
		var rootWeb = site.get_rootWeb();

		ctx.load(rootWeb);

		// Send our query off to SharePoint.
		ctx.executeQueryAsync(function() {

			var title = false;

			// Pull the title into a variable.
			// Default to the default title if it fails.

			try {

				title = rootWeb.get_title();

				title = title || defaultTitle;

			} catch (e) {

				title = defaultTitle;

			}

			// Update our title to our results.
			document.getElementById('webTitleContainer').innerHTML = title;

		}, function() {

			// If all else fails, set the title back to our default.
			document.getElementById('webTitleContainer').innerHTML = defaultTitle;

		});
	
	}

})();
</script>
"@

$webApp = Get-SPWebApplication -Identity "http://mywebapplicationurl"
$webApp.SuiteBarBrandingElementHtml = $containerCode
$webApp.Update()

As you can see, the bulk of this is our JavaScript code from above, with the addition of a div for our title to end up in and the required script tags for the code.

Once you have this, you can save it as a .ps1 file and execute it in PowerShell. You may need to set the execution policy to RemoteSigned before you are able to do this.

And there you go. You could do some fairly interesting things with this, particularly as it takes effect right across the entire web application. You also have to be aware that this is stored within the Configuration Database rather than the Content Database, so will not be migrated if you move content databases from one farm to another.

via Chris on SharePoint http://spchris.com/2013/04/mastering-the-sharepoint-2013-suite-bar/

SharePoint and Project Server Consultant MCITP – SharePoint Administrator 2010 MCTS – Microsoft Project 2010 – Managing Projects, Project Server 2010, Configuration, SharePoint 2010, Configuration Prince 2 – Practitioner This article has been cross posted from spchris.com (original article)

The User Profile Service is an incredibly powerful part of SharePoint. When used correctly it vastly improves the experience of your users by adding a real sense of personal ownership of your sites and their content.

Unfortunately like any complex system, identifying and fixing issues can be a painful process. There is minimal information provided in the site and almost none regarding the connection between the service and Active Directory.

In SharePoint 2010, the user profile sync is controlled by the ForeFront Identity Manager service, this is a Windows service that handles the connections between Active Directory, any BDC connections defined and the SharePoint site collections and sites.

The workings of the service are somewhat impenetrable, but if you wish to see what it is doing and follow the sync process, it comes with a nice GUI interface.

This can be run directly on the server from the path X:\Program Files\Microsoft Office Servers\14.0\Synchronization Service\UIShell\miisclient.exe

When running during a sync you can see any issues encountered such as permissions problems.

via Chris on SharePoint http://spchris.com/2013/04/forefront-identify-manager-client/

SharePoint and Project Server Consultant MCITP – SharePoint Administrator 2010 MCTS – Microsoft Project 2010 – Managing Projects, Project Server 2010, Configuration, SharePoint 2010, Configuration Prince 2 – Practitioner This article has been cross posted from spchris.com (original article)

Quite often when working with data within a SharePoint environment, we wish to link the data to images hosted within a third party system.

This is often seen in the form of staff pictures that are hosted on a third party HR platform rather than within Active Directory, so the User Profile service images are of no use to us.

Unfortunately there is no real way of detecting if the image on the third party system actually exists, which means that rather than seeing the nice friendly missing profile image, you get a horrible missing image box.

This can be overcome with some simple JavaScript:

(function(){

    var defaultImage = "/_layouts/15/images/PersonPlaceholder.200x150x32.png";

    var profileImage = document.createElement("img");

    // Define an error handler, this will fire if there is an
    // error loading the URL for the staff image and redirect
    // it to the missing user profile image in the hive.

    profileImage.onError = function() {

        this.src = defaultImage;

    }

    // Point the image element to our staff images then attach
    // it to the DOM.

    profileImage.src = "http://hr/staffimages/" + employeeId + ".png";

    // Note that the employeeId variable referenced above is to be
    // provided externally and is beyond the scope of this post.

    var container = document.getElementById("profileImageContainer");

    if (container) {
        container.appendChild(profileImage);
    }
})();

With this code in place any missing images will automatically serve the default image instead.

This method will work anywhere you need to serve images and have no way of detecting if the image to be served exists or not.

SharePoint and Project Server Consultant MCITP – SharePoint Administrator 2010 MCTS – Microsoft Project 2010 – Managing Projects, Project Server 2010, Configuration, SharePoint 2010, Configuration Prince 2 – Practitioner This article has been cross posted from spchris.com (original article)