Integrating UltraWebMenu into SharePoint 2007 using Office SharePoint Designer

SharePoint 2007 is a great platform for enabling collaboration among team members, and a huge step forward as a development platform compared to earlier versions of SharePoint.  If you have done any development with SharePoint 2007, you will quickly notice how familiar the development experience is since SharePoint is now basically a big ASP.NET application.

Today I was customizing a new Site I created in SharePoint using Office SharePoint Designer (which is an amazing tool for customizing a SharePoint site by the way).  In creating my custom look and feel, I wanted to see how easy it would be to integrate our UltraWebMenu control into the new sites MasterPage and as it turns out, its actually a piece of cake.  The first code listing below shows the default MasterPages menu markup which you can easily open and edit in SharePoint Designer.  As you can see, to generate the top level menus the MasterPage uses an AspMenu control (which is a customer SharePoint control derived from the standard ASP.NET Menu control) and a SiteMapDataSource control.

<SharePoint:AspMenu
  ID="TopNavigationMenu"
  Runat="server"
  DataSourceID="topSiteMap"
  EnableViewState="false"
  AccessKey="<%$Resources:wss,navigation_accesskey%>"
  Orientation="Horizontal"
  StaticDisplayLevels="2"
  MaximumDynamicDisplayLevels="1"
  DynamicHorizontalOffset="0"
  StaticPopoutImageUrl="/_layouts/images/menudark.gif"
  StaticPopoutImageTextFormatString=""
  DynamicHoverStyle-BackColor="#CBE3F0"
  SkipLinkText=""
  StaticSubMenuIndent="0"
  CssClass="ms-topNavContainer">
    <StaticMenuStyle/>
    <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
    <StaticSelectedStyle CssClass="ms-topnavselected" />
    <StaticHoverStyle CssClass="ms-topNavHover" />
    <DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
    <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
    <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
    <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

As an aside, you can actually get the source code to the AspMenu here if you want to customize it, or just see how it works.

Now, to replace the default AspMenu control with the UltraWebMenu, you have to do a bit of setup on your SharePoint server.  First you need to drop the Infragistics2.WebUI.UltraWebNavigator.v8.1.dll and Infragistics2.WebUI.Shared.v8.1.dll into the SharePoint _app_bin directory.  Next you have to add the UltraWebMenu control to SharePoints SafeControls list in its web.config:

  <SafeControl 
      Assembly="Infragistics2.WebUI.UltraWebNavigator.v8.1, Version=8.1.20081.1000, 
            Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
      Namespace="Infragistics.WebUI.UltraWebNavigator" TypeName="*" Safe="True" />

In this case I am telling SharePoint to make any control in the Namespace a SafeControl.

Once SharePoint knows the UltraWebMenu is safe to use, you can simply add the control to your sites MasterPage.  Since the Office SharePoint Designer does not support including third party controls in its toolbox, you have to manually add the Register directive to the top of the page:

<%@ Register assembly="Infragistics2.WebUI.UltraWebNavigator.v8.1, Version=8.1.20081.1000,
         Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" 
    namespace="Infragistics.WebUI.UltraWebNavigator" tagprefix="ignav" %>

Once the Register directive is in place, you can manually add the UltraWebMenu control to the MasterPage markup.  Thankfully Office SharePoint Designer does give you Intellisense in the code editor, which makes configuring the control a little less painful.

<ignav:UltraWebMenu ID="UltraWebMenu2" runat="server" DataSourceID="topSiteMap" 
     EnableAppStyling="True" StyleSetName="Nautilus"  StyleSetPath="/ig_res">
    <ExpandEffects ShadowColor="LightGray"></ExpandEffects>
</ignav:UltraWebMenu>
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource">
    <Template_Controls>
        <asp:SiteMapDataSource
          ShowStartingNode="False"
          SiteMapProvider="SPNavigationProvider"
          id="topSiteMap"
          runat="server"
          StartingNodeUrl="sid:1002"/>
    </Template_Controls>
</SharePoint:DelegateControl>

In this sample I am simply binding the UltraWebMenu to the same SiteMapDataSource control used by the AspMenu and that's it.  My site is now configured to use the UltraWebMenu control to render its top level navigation.  In this case I also set up the control to take advantage of Application Styling and apply the Nautilus styleset at runtime.  To do this, you can simply copy the ig_res folder containing the StyleSet resource into the root of your SharePoint website, then just make sure that control has its EnableAppStyling property set to true, the StyleSetName is set to Nautilus and the StyleSetPath points to the ig_res folder.  Of course I could have also set up the Application Styling in the SharePoint web.config and set the StyleSet so it would be applied to any IG control used in SharePoint.  If you want to use Presets, those work equally as well, just make sure you copy the appropriate images used by the Preset to your SharePoint website.

That's it...a quick walk-through on integrating the UltraWebMenu into SharePoint.