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)