SharePoint 2010: Dealing With MasterPage Customizations on the Dialog Pages, and an Introduction to Modernizr.

Tuesday, March 06 2012

In this, part 3 of the series: SharePoint 2010, CSS3, HTML5, jQuery & The JavaScript Client Object Model, we are going to cover three items.  At the end of the last post, I pointed out one of the “gotchas” when working with custom SharePoint Masterpages.  When we added our toggle button to the Masterpage, we also, inadvertently, added the button to the SharePoint Dialog pages.  In this post, we will explore how you can control the differences between the SharePoint pages and dialog pages within your masterpage customizations.  Then we’ll introduce you to Modernizer, and integrate it into our masterpage.  Thirdly, due to the requests for code samples of the project, I will provide the link to the CodePlex project where the evolving code of our series will be maintainedimage


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 imageconfusing 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”.image  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.


Next on the agenda is Modernizr.  To quote their description, “Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and imageCSS3-powered websites”.  Modernizer is the subject of many blog posts, but to start out,  I recommend visiting the Modernizr site.  To really understand Modernizr will take a little time and effort.  Fortunately, you needn’t fully understand it to use it.  The quick lesson is that when Modernizr loads, it very efficiently tests the current browser against the HTML5 and CSS3 features which you selected for your Modernizr  file.  The Modernizr site does a great job of guiding you through this process.  For the purposed of this project, I chose the Development version which tests for nearly every feature…and it does this incredibly fast.  When Modernizr loads, it also builds an array of the features with the result of the tests so that we have a run-time evaluation of the running browser’s HTML5 capabilities.  In a later post, we will use this information with our polyfills to overcome some of the shortcomings with some browsers ability to take advantage of the features of HTML5. 


Now, we will see what should be becoming a familiar process of integrating our modernizer file into SharePoint 2010. It shouldn’t come as a surprise, that the Modernizr.js file is referenced in our masterpage header section in exactly the same way we integrated jQuery earlier.  image   The modernizer JavaScript file is uploaded to the js folder of our Site Assets library, and the references in the masterpage pull the file from the folder that is built when SharePoint builds the virtual path provider from the content database.   And that’s all there is to integrating Modernizr.  By now this process should start to seem familiar and easy. 


After the second post, I had several readers request the solution package for my project.  I took that request to heart.   Giving imagefolks 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 sitimagee 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 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.