Thursday 13 December 2012

SharePoint Master Pages, a slog....

It has been a while since my last post, basically because I have been struck down by that most unwanted of Christmas Presents "The Office Cold"!


When not ensuring that any uninfected colleagues are being deluged with fresh virus I have been playing around with Microsoft's latest SharePoint offering, 2013.

Now a few cynical people might say that any other company appending 2013 to a product name would provoke the wrath of the gods what with 21.12.2012 around the corner but this being Microsoft the gods will make an exception in return for a reduction in license fees....

On The Face Of Things: paying attention led me, by accident, to a cool tool in SharePoint Designer. Or, reason to write a tutorial as my next post?


After you have recovered from installing SharePoint 2013 one of the next things you are going to be doing is playing with all the easily accessible features like MySites, Apps and generally having fun.
Yes, I just admitted to enjoying mucking about with a Microsoft product that doesn't play on an XBox, Ssshhh! 

However most seminars and training courses tend to push you towards being productive which leads you to one of the most vexing problems for an application middleware developer like me: the Master Page!!
I have been through this before with earlier generations of SharePoint and only today did I actually get around to this noisome job, creating a master page template.
These are the steps I took

  1. Search Google for sharepoint 2013 master page
  2. Take the first decent looking tutorial link
  3. Spend hours translating the English instructions into German!!! (I am forced to use SP with German and the translations sometimes suck badly)
  4. create a rudimentary html5 page with css and an image
  5. create a master page using this page + css + image
  6. check out how it looks
  7. be incredibly disappointed because the first thing you have to do is add SP tags to your HTML in order to get any kind of SP functionality involved
At this point I have to say that MS have not learned from previous mistakes: the code to add SP functionality in pages is incredibly bloated and utterly obscure. They could really learn from JSF here.

In order to add SPBLOAT to your page you need to access the page that SP converted into a master page (vast oversimplification for what really happens, find a tutorial to see why).
So, I download the page; what I actually did was follow the instructions on the tin which led me to installing Desktop Experience on my 2008 R2 dev machine so I could open the design library in Windows Explorer by way of WebDav! So now I can simply drop the file into VS 2012 and stare aghast at what happened to the lean mean html I offered to the SharePoint Gods in sacrifice. In the interests of humanity I am not going to  post any code here, I want to keep the reader I have!

VS 2012 did do me one favour though, by automatically highlighting links in blue and me being red/green colour blind I tend to focus on the blue first. The link embedded in the XML comment at the top of my poor html5 file lead me to the.... Ausschnitt-Galerie. Literal translations of this can lead to people getting arrested (neckline/cleavage gallery) but this is the Snippets Generator. Following the link reveals the part of SharePoint that to my mind has to be a leading contender for SharePoint MVP (Most Valuable Page).

With the Snippets Generator you simply select the SP function you want to add to your template and it provides you with the SPBLOAT you need to copy to your page. You can also add your own class strings to the top level component tag which means not having to wade through the SPBLOAT to find out what to change. This discovery has just saved me a mountain of time, stress and the ears of my as-yet-to-be-reinfected-with-the-cold-they-gave-me colleages because I don't need to hand code it!

I thought my poor page was sacrificed to help out with 21.12.2012 but it looks like I have to find another victim... HOWARD!!!

This would have been more interesting with pictures however all the screenies I could have taken would have been in Deutsch.