Category: Navigation

Multi Level Navigation

The out-of-the-box WSS navigation offers one level of navigation. The navigation elements can be configured in the site settings.

There is a way to make it have multi level navigation, as MOSS does, by changing the DataSource. But this “hack” is not flexible, as you can not reorder the item within the navigation menu.

While I was reading the post How to create your own Cascading Navigation using the ASPMenu control, the decision was made to build a custom navigation which supports multiple navigation levels.

default WSS toplevel navigation 

configure top link bar 

 

multi level navigation I wanted a more flexible way of realizing a navigation, which allows you to have more than one level with a plain Windows SharePoint Services site. So I build a navigation control, which uses the entries of a SharePoint list as source for the navigation elements.

Of coarse multiple navigation levels are supported. You can configure a parent element for each navigation element.To customize the order of appearance, you can set the ‘Link Order’.

The feature list:

  • Custom navigation control
  • Webpart shows the navigation
  • SharePoint list as DataSource
  • Multiple navigation levels
    • Assign a parent navigation element
    • Expand navigation nodes with child elements
  • Reorder navigation elements
  • Hide navigation elements
  • Access check on relative links for web, list and items
  • Cache
    • Items from the navigation list
    • Invalidate cache if there is a change within the listitems
    • Access to navigation Urls is stored in the session
  • Import SharePoint TopLevel navigation entries to the list
  • Get navigation list items with elevated privileges, so the list can be hidden from users
  • Grouped view “By Parent” for the navigation list
  • Url Parameter
    • Refresh=true
      will force a reload of the navigation list items
    • Debug=true
      will show how long (in ms) the navigation control needs to render

Each navigation element is stored in a SharePoint list. This list is created when the feature is activated on the SiteCollection.

SharePoint list

The list can be filled with the current SharePoint navigation by clicking on the link “Import Navigation to Multi Level Navigation List” in the site settings. It brings up another page, where you can import the navigation and check for updates for the solution.

site collection administration

Installation:

  1. Add the solution with “stsadm –o addsolution –filename RH.Navigation.wsp”
  2. Deploy the solution in the Central Administration
  3. Active the feature “RH.Navigation” for a site collection
    sitecollection feature
  4. Add the Webpart to a page, or alter the masterpage to use the custom navigation instead of the build-in SharePoint navigation

Customize the masterpage

To use the Multi Level Navigation instead of the out-of-the box SharePoint navigation, register a tagprefix, add the control and remove the SharePoint Navigation.

  • Add an entry to the top of your masterpage
    <%@ Register TagPrefix="Navigation" Namespace="RH.Navigation.Control" Assembly="RH.Navigation, Version=1.0.0.0, Culture=neutral, PublicKeyToken=2d07bbf19c37a6cf" %>
  • Alter the SharePoint navigation
    <SharePoint:AspMenuNavigation:MultiLevelNavigation
          ID="TopNavigationMenu"
          Runat="server"
          DataSourceID="topSiteMap"
          EnableViewState="false"
          AccessKey="<%$Resources:wss,navigation_accesskey%>"
          Orientation="Horizontal"
          StaticDisplayLevels="21"
          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:AspMenuNavigation:MultiLevelNavigation>
  • OR remove the SharePoint navigation (<SharePoint:AspMenu…) and insert the MultiLevelNavigation
    <Navigation:MultiLevelNavigation runat="server"></Navigation:MultiLevelNavigation>

Note:

If your AspMenu contains the StaticDisplayLevels property, remove it or set it to 1! (Quote from MSDN: The StaticDisplayLevels property indicates how many levels to display statically from the root of the menu. For example, if StaticDisplayLevels is set to 3, your menu will be expanded to statically display its first three levels. The minimum static display level is 1, and the control will throw an exception if the value is set to 0 or a negative number.)

Download RH.Navigation.wsp

Download Sourcecode 

Navigation for Wikis

image

The Wiki functionality SharePoint offers is great for quickly writing down stuff. It is often used for Server documentation.

Creating new pages is easy, and you can link pages. The ability to format the text is nothing fancy, but most of the time enough 🙂

Uploading images can be done with my custom field type, which stores images and documents in existing libraries. After the upload, a link is inserted into the Wiki body. –> Custom Field – Upload Files and Images

Now I want to introduce the navigation for SharePoint Wikis.

I realized the navigation through a control adapter. It extends the history button, which is shown on every Wiki page. The advantage is, that the navigation will have to be activated only per web application. Every Wiki page within that web application then has a navigation control beneath the Quick launch. You can see the navigation in action in my Wiki.

How does it work?

The start page in a Wiki library is used as root for the navigation. The text “Wiki Navigation” is linked to this start page.

Every link on this start page which points to another Wiki page is followed to create the navigation tree.

The navigation is cached for 20 minutes. But if a page changes within this time, the navigation will be rebuild and cached automatically.

The Wiki Navigation uses the same CSS as the Quick launch TreeView. This way it does not break the layout, if a node text is too long.

If you Wiki was created from the Wiki site template, it will use the same page for the navigation root you see when you browser to your page (usually the home.aspx).
But if you created a Wiki library on e.g. an empty Teamsite template, the Navigation uses the first Wiki page it will find inside the Wiki library. This is usually the "How to use this wiki library" page. You have to manually delete this page, so the homepage is the page with the lowest ID (see in the url if you edit a Wiki page).

URL Parameters

The Wiki Navigation can take three URL Parameters, to change the way it renders the navigation.

  1. Refresh=true
    This parameter will clear the cached data, reload it and store it in the cache again
  2. ExpandDepth=x
    Controls the depth TreeNodes are expanded. The path to the currently selected TreeNode is always expanded.
  3. MaxLength=x
    Shorten the TreeNode text to this length and add “…”

Requirements

WSS and .NET 3.5 (SP1)

WSPBuilder Extensions for the Visual Studio if you want to user the source code

Installation

Add the solution via stsadm. Deploy it to the web application where you want to use the navigation. Then activate the web application feature.

Download

SharePoint Solution RH.WikiNavigation.wsp

Source code RH.WikiNavigation-Source.zip

Update 7/20/2009

Fixed a bug with Wiki Libraries created without the Wiki page template

Update 8/10/2009

More Trace output during feature activation/deactivation.
The control adapter is now available on every UrlZone configured in Alternate Access Mappings.