Lars Nielsen's Discoveries

July 30, 2010

Custom Application master page: traps and workarounds

Filed under: Branding,SharePoint — Lars Nielsen @ 8:48 pm
Tags: , , ,

I’ve been having some fun trying to change the master page for some of the application pages in the _layouts folder in SharePoint.  I’ve created a special HttpModule that applies my custom master page to some of the pages – just the ones that are normally seen by people who have member level (contribute) permission on a team site.  Most of the application pages are only visible to people with higher level permission than contribute, but a few pages (for example, setting up a new alert, or uploading a file) are visible to members. In my case the client wanted those pages to be branded to look like the rest of the site, not the standard blue-and-orange SharePoint branding that you get with application.master. I managed to apply the standard site master page to a couple of the application pages (the ones for uploading documents and for setting an alert) with no problems.  But as I began to apply it other pages in the _layouts folder, I started getting errors about missing placeholders, or Javascript null reference errors.   The missing placeholder errors are OK to fix – it’s just a question of finding the placeholder in the application.master file and adding it to the custom master page.  I follow Heather Solomon’s advice and have an invisible panel at the bottom of the page, and all the placeholders go in there (unless they need to be visible like PlaceHolderLeftActions – see later). The fun starts when you start getting other kinds of errors which don’t tell you what the real problem is.  All you have to go on is the HTML that comes down to the browser.  Using IE 8 you have a pretty good developer toolbar, which helps to track down what exactly has gone wrong.  But that only takes you part of the way; you still have to work out what’s actually wrong on the master page itself.  That can take a lot of guesswork and trial and error, trying to work out which SharePoint or ASP.NET controls are the source of the problem.

The Design Console

The standard design console in SharePoint is the one that appears when you edit a page without the publishing features activated (.e.g. in a regular team site)

In the standard master page this is generated by the DesignModeConsole control in the WSSDesignConsole placeholder, like this:

ContentPlaceHolder ID="WSSDesignConsole" runat="server">
       <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
ContentPlaceHolder>

I added this code into my master page but strangely the design console bar refused to show up on the page when I edited it. Eventually, by looking at the HTML source of the page when it was being edited, and working backwards from the master page, I figured out that the HTML rendered by this control starts with a <TR> tag.  This means it won’t work unless it’s sitting inside an HTML table.   Well of course using tables for layout is bad practice (although it’s something you find all over the place in SharePoint pages) so I had stripped out as much of the table-based layout as I could from the my master page.  As  a result, my placeholder was not inside a table and the design bar refused to render in the browser.

The fix was to embed the placeholder inside an HTML table like this:

<table width="100%">
       <tbody>
             <asp:ContentPlaceHolder ID="WSSDesignConsole" runat="server">
                    <wssuc:DesignModeConsole id="IdDesignModeConsole" runat="server"/>
             </asp:ContentPlaceHolder>
        </tbody>
</table>

Picture Library thumbnails and film strip views

With my custom master page, when I looked at a picture library, the thumbnails didn’t show up by default, and the filmstrip views just did nothing.  Only details view was showing. After some research, some reverse engineering on the HTML for the Picture Library views, and some trial and error, I found this was because I had to put in a PlaceHolderLeftActions control in the master page, and it has to be before PlaceHolderMain.  The PlaceHolderLeftActions control adds some essential Javascript in the page which the dropdown relies on.

Create View or Modify View pages Javascript breaks

When I created a new view or modified an existing view, the ViewNew.aspx or ViewEdit.aspx pages both displayed OK but the clickable plus sign icons next to “Group By”, “Total”, “Styles” etc. were missing, and the panels underneath them (which are normally hidden until you click the plus sign) were all visible.  I eventually found a clue in the documentation about SearchBoxEx that the problem is caused by a second copy of the ShowHideGroup Javascript function on the page when you have a search box on the master page.  To make things more difficult, this second copy is in Search.js so it’s not even listed in the source HTML of the page –  hard to track down!

To fix this, I took the Javascript of the ShowHideGroup function from the Search.js file and and put it in a <script> tag on the bottom of the master page.  This becomes the third definition of the function on the page, and overrides the second definition of the function from the search box.

Datasheet View locks up the browser

Another problem happened when I switched from standard view to datasheet view in a list.  Doing this caused the browser tab to lock up until I closed down the tab.  Fortunately this one wasn’t quite so bad because there were clues here and here; SharePoint does some fancy scripting to resize the element dynamically, but this doesn’t work once you move the navigation controls around.  I adapted the Javascript code to cope with the fixed-width div that I was using for the main content placeholder.

Scroll Bars and Overflow

If you have a fixed-width page design you might need to make use the CSS Overflow attribute to cope with cases where the main content gets really wide.  This could happen for example if you create a view of a list with a load of columns that can’t be wrapped around.  Here’s an example where the navigation has been moved from left to right, and when you view a document library with a lot of columns it runs over into the right hand navigation at the Content Type column:

Without overflow the view runs into the navigation

To get around this you can use the CSS Overflow attribute to force a horizontal scrollbar on the div that’s too wide, so it looks like this:

Overflow with IE7

Well this is better because at least you can scroll the view horizontally to see the missing columns.  But the field headers are not overflowing properly, and there’s a spurious vertical scrollbar on the right hand side as well.  This is a peculiarity of IE and the way its vertical scrollbar works.  That’s how the view displays in IE7, or in IE8 when the page is set to IE7 mode.  Switch the browser to pure IE8 mode and it looks much better:

Overflow In IE8

To get the master page to force IE 8 to use IE 8 standards when rendering the page, change this meta tag in the <head> of the master page like this:

<meta http-equiv="X-UA-Compatible" content="IE=8">

Can’t delete the master page

When you try to delete the custom master page from the master page gallery, you get an error:

This item cannot be deleted because it is still referenced by other pages

Microsoft says to work around this by hiding the master page but that’s not ideal.  Katrien De Grave has a better solution by copying the master page to a temporary folder and then deleting the folder.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: