Customize Application pages top navigation bar

As known that in SharePoint 2010 the application pages have a new property called DynamicMasterPageFile that enable them to use the site master page instead of using the OOB application.master. But it would maintain the default top navigation control although the one in site master page changes.

The reason it maintains the default top navigation is that application pages override content in PlaceHolderTopNavBar with a user control called TopNavBar.ascx where it contains the default top navigation control (AspMenu).

To have the application master use our top nav control, we need to find the PlaceHolderTopNavBar and PlaceHolderHorizontalNav in the master page, set it Visible = false and make sure they don’t enclose any controls.

  <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server" Visible="false"/>
  <asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server" Visible="false"/>

Microsoft SharePoint 2010, SharePoint Designer, SharePoint Workflow

SharePoint 2010 feature to perform visual & master page upgrade

After migrating site collections from SharePoint 2007 to SharePoint 2010. I need to apply visual upgrade and apply the new v4 master page on the sites.

The easiest way to do this is creating features to peform the operation. Below is my project structure in Visual Studio 2010.

feature

The first feature is a site collection scoped feature to provision the new master page. It contains the Master Page module.

The second feature a site scoped feature that will perform the visual upgrade and apply the master page on the site.  The feature has feature activation dependency to the first feature and it has event receiver as shown below.

   public override void FeatureActivated(SPFeatureReceiverProperties properties)
   {
     SPWeb web = (SPWeb)properties.Feature.Parent;
     string masterV4 = properties.Definition.Properties["MasterV4"].Value;
     if (web.UIVersion == 3)
     {
       if (!web.Properties.ContainsKey("OldMasterUrl"))
       {
         web.Properties.Add("OldMasterUrl", web.MasterUrl);
         web.Update();
       }

         string masterUrl = web.Site.RootWeb.MasterUrl;
         string masterGallery = masterUrl.Substring(0,masterUrl.LastIndexOf("/") + 1);

         //apply visual upgrade
         web.UIVersion = 4;

         //master page for non-publishing pages such as form,etc
         web.MasterUrl = masterGallery + masterV4;

         //master page for publishing pages
         web.CustomMasterUrl = masterGallery + masterV4;

         web.Update();
    }
}

public override void FeatureDeactivating(SPFeatureReceiverProperties properties)
{
  SPWeb web = (SPWeb)properties.Feature.Parent;

  if (web.Properties.ContainsKey("OldMasterUrl"))
  web.MasterUrl = web.Properties["OldMasterUrl"];

  web.UIVersion = 3;
  web.Update();
}

MasterV4 is a feature property added in VisualUpgrade.Template.xml. Below is the MasterV4 definition.

<Properties>
   <Property Key="MasterV4" Value="defaultv4.master>
</Properties>

The reason I split into 2 features is that I can have more controls on which site I want to perform visual upgrade. Otherwise it can be just one feature in which add a feature receiver in the MasterPage feature with folowing code:

         SPSite site = (SPSite)properties.Feature.Parent;
                site.VisualUpgradeWebs();
                foreach (SPWeb web in site.AllWebs)
                {
                    using (web)
                    {
                        //perform master page upgrade on the web
                    }
                }

SharePoint 2010 Visual Upgrade: adding ribbon to MOSS 2007 Master Page

Recently I was trying to migrate a site collection from MOSS 2007 to SharePoint 2010 in our UAT enviroment. By following a technet article, I was able to have my site collection in SharePoint 2010.   Then I followed the next step to perform visual upgrade otherwise we would have a MOSS 2007 looks and feels in SP 2010.  So grabbed one of the 2010 master page, in this case v4.master from  {hive14}\TEMPLATE\GLOBAL.

Next I created a blank masterpage using SharePoint Designer, copied and pasted the content of MOSS 2007 masterpage to the new blank masterpage then modifed it to have ribbon and v4 css & javascripts. Finally I used this master page on one of the site in the site collection, but gosh, it just looked awful, and off course no ribbon appeared and the worse was the CssLink version 4 wasn’t rendered. So basically the new masterpage didn’t have the the css reference to core.css.

After trial and error and reading some blogs and technet, I was be able to have a nice ribbon to my new masterpage. Below is the steps I did.

1. Create a new Master Page

Create a blank master page in SharePoint Designer and copy the content of the MOSS 2007 master page into it.

2. Add ribbon component the new master page.

These are the steps you need to do to add and make the ribbon work:

Open SharePoint 2010 master page either v4.master in {hive14}\TEMPLATE\GLOBAL or any v4 publishing master page in {hive14}\TEMPLATE\FEATURES\PublishingLayouts\MasterPages such as nightandday.master.

On the new master page modify the Assembly version of the Register SharePoint namespace to Version 14.0.0.0,

Copy any register controls, and any tags underneath <head runat=”server”> from nightandday.master or v4.master. and paste them at the appropriate location in the new master page

Very Important step to follow markup guideline from microsoft, this guideline contains all mandatory elements (css and div’s) for ribbon to work properly. Based on the guideline below are my steps.
First step is modifying the body so the body tag will be<body onload=”….” scroll=”no” class=”customv4″>, my customv4 class will be

body.customv4 {
height: 100%;
width: 100%;
overflow: hidden;
}

I copy  <div id=”s4-ribbonrow” class=”s4-pr s4-ribbonrowhidetitle”> and everything in it from v4.master, the div contains ribbon controls and its components such as Site Actions, Pop-out control, etc. And paste it in the the location where I want the ribbon sit, in my case under the global navigation. Having pasted this one I need to remove the following controls and contentPlaceHolders from the MOSS 2007 masterpage as they are now in the ribbon.

  • Controls: SiteActions, Welcome, DelegateControls (ControlId=GlobalSiteLink0 & PublishingConsole)
  • ContentPlaceHolders:  PlaceHolderGlobalNavigation, PlaceHolderGlobalNavigationSiteMap, SPNavigation

I changed the asp:menu to the one from v4.master.

Then next step is to enclose any content under the ribbon where I want the browser scroll bar displayed with this div <div id=”s4-workspace”> <div id=”s4-bodyContainer”> … </div></div>.

As I applied the master page to any form pages, the pop-up dialog on new/display/edit forms would include top banner & top navigation. To remove the unwanted parts in the pop-up, the parts should be enclosed with <div class=”s4-notdlg>.

Finally I put my custom css to overwrite the ribbon background color: body #s4-ribbonrow{background-color:#94969C}

3. Perform Visual Upgrade.

This steps is required otherwise the CSSLink version 4 won’t be rendered. The visual upgrade will set the UIVersion property of the SPWeb to 4. The easiest way to do visual upgrade is from Site Settings -> Title, Description, And Icon or go to SiteUrl/_layouts/prjsetng.aspx, there is a new section on that application page to perform visual upgrade, choose either Preview the updated user interface or Update the user interface. Having chosen the preview we can switch back the old interfaces later on.

This technet article has more explanation and techniques to perform visual upgrade.

Or create a feature to perform the upgrade as I shown in this post.

4 Use the new Master Page to the current site

The easiest way is change this from site settings or SiteUrl/_Layouts/ChangeSiteMasterPage.aspx.

Here is my master page looks like,

Before visual upgrade

After visual upgrade (using the ribbon from v4.master).

Conclusion

Having a ribbon in the migrated master page is one of the important task of the visual upgrade. This post shows you the simplest steps to put the ribbon to upgraded master page by following the markup guideline and performing visual upgrade.