SharePoint (and Project Server) Shenanigans

I have been playing round with a SharePoint hosted app to learn about how it all works. This has been going well but i ran into more problems than i though i would when trying to implement a menu for my App.

If you are using the auto hosted or developer hosted app model then this is easy (ish) you use the new chrome control, create you menu links in JS and you are done. MS have some documentation on this that works great.

But i am creating a SharePoint hosted app. So this causes a few “problems”. The first one being that if i add a chrome control to my page i get 2 menu which is just silly.

Google wasn’t much help although i did find this post here

http://www.intrateam.com/gb/blogpost/sharepoint-2013-app-master-page

which pointed me in the right direction.

My first issue was actually getting hold of a copy of the master page that app’s use. I could not work out how to do this only having an office 365 tenant. In the end I grabbed the app.master and default.master from the GLOBAL folder in the hive on a on premise install.

The first thing i worked out is that the reference to “~masterurl/default.master”  seems to translate to the app.master from the GLOBAL folder in the HIVE.

So i made a copy of the app.master and added it to my project. Changing the elements.xml file as per the post linked above.

I also changed the link in my ASPX pages from ~masterurl/default.master to ~site/_catalogs/masterpage/<Name of my master page>.master

This assumes you have you elements file setup like

While doing this I noticed that there is a content place holder with an id of PlaceHolderLeftNavBar. This isn’t hidden.

So I added

into my Default.aspx page and loaded it into SharePoint.

Bingo I have a menu in the standard place in SharePoint. What is also nice is that if the user hits the “Focus on Content” button then the menu gets hidden.

But wait a minute we just setup our own master page, what was the point? Well at the moment you do not need you own master page but this does now mean you could move any of the other Content Place Holders to put a menu in a different location. It also helps get rid of some of the warnings in visual studio as it now knows the master you are using.

I do have an issue that  have to copy my <asp:menu> content onto all the pages. I tried using the XML data source but this appears to not be supported but there may be another way to store the menu logic centrally.

The next problem to solve was that we need to pass the query string values around the system, so these have to be added to the menu.

This can be done with some simple jQuery.

Just make sure this will run on all of the pages and your querystring values will be maintained between page loads

Sorry for the images but my code plugin was not working.

Hope this helps someone.

via Buzz Blog http://paulbuzzblog.wordpress.com/2013/02/10/custom-navigation-in-a-sharepoint-hosted-app-in-sharepoint-2013/

Paul is a an expert SharePoint and Project Server developer and is responsible for designing and implementing custom solutions on client systems using the latest SharePoint and .NET technologies. Paul has extensive experience with SharePoint systems across all sizes of implementation, ranging from small to large farms and has an excellent understanding of all the elements of SharePoint. This article has been cross posted from paulbuzzblog.wordpress.com (original article)