SharePoint 2010: Dealing With MasterPage Customizations on the Dialog Pages, and an Introduction to Modernizr.
Tuesday, March 06 2012
How am I supposed to prevent that toggle button (or any other masterpage customization) from appearing on the dialog pages. I knew the solution was possible, because we can see from the dialog pages that there are many features of the masterpage that are not visible on the dialog page. How was Microsoft managing this? I didn’t have to look very far. Whenever I need to solve one of this mysteries, the first thing I do is to look at the source of the page. It can be a little confusing to try to get the source of the dialog to display. The trick is to right click on the title bar of the dialog and select “View Source”. A quick scan uncovers a class, “ms-dialog” that has been injected into the <html> tag. No doubt, this class is being used by SharePoint to hide all those elements that serve no purpose on the dialog. Consequently, we can use this CSS class for exactly the same purpose.
Remember the pTechMaster.js file in our first post? We changed its name to HTML5Master.js. In our custom masterpage, we gave the toggle button an ID of qlAccordian, so now we need to add our jQuery snippet that will hide the button when the html tag contains a CSS class of “ms-dialog”. This snippet is setting htmlClass variable to the attributes of the html tag, and if “ms-dialog” is one of those classes, then the page is a dialog page and we hide our button, otherwise (if “ms-dialog” was not found in the attributes) a regular page is displayed and we turn on the toggle button. The important point of this demonstration is that we can use this same approach for any customization that we wish to suppress on dialog pages. It’s equally easy to hide and display several items by simply adding them to the if/else statement.
You may have noticed that I had already used this technique to hide the button, however the rounded corners at the top tell us that our other CSS3 functionality is still present on the dialog page. So that’s how to deal with those masterpage customizations that should not appear on the dialog pages.
After the second post, I had several readers request the solution package for my project. I took that request to heart. Giving folks a way to play with the new technologies without having to create a solution package or manually upload and edit files made sense. In response, I have created a project at CodePlex, sharepoint2010html5. It occurred to me that allowing others to contribute to the project might further improve the features implemented in the masterpage template and make it more useful to a larger audience. What I didn’t factor is the additional efforts at managing the project site. If you would like to participate in the project or help to maintain the documentation at the CodePlex site, send me a message explaining how you’d like to contribute. Meanwhile, visit the site and download the source and solution package. The template should make a good starting point for your own customized master and make it easier to follow along as the project evolves. As time permits, I’ll update the source code at the site so that you can work with the actual code samples. You can use the versioning provided by Mercurial to download previous versions later if needed.
Until the next post, have fun with the template. Visit http://html5test.com/ and test what features are supported in your browser and experiment with implementing some of these features into your masterpage. In the next post we’ll start implementing some of those features that are not supported in your current browser. Till then, explore and have fun.