Building Custom Navigation with SharePoint Mauro Cardarelli Jornata email@example.com
Agenda • Navigation Primer • Why Do You Need Custom Navigation? • Design Considerations • Sample Code Snippets • Overview of Navigation Control Deployment • Summary • Questions
Navigation Primer – Quick Launch • Quick Launch • Displayed on the home page of a Windows SharePoint Services 3.0 site and contains links to featured lists and libraries on the site, subsites of the current site, and People and Groups. • Through Site Actions, a site administrator can • Hide or show the Quick Launch • Add or remove a list or library from the Quick Launch • Change the order of items on the Quick Launch • Add, edit, or delete a Quick Launch heading • Edit, move, or delete a Quick Launch link
Navigation Primer – Top Link Bar • Top Link Bar • Provides a way for users of your site to get to other sites in the site collection by displaying a row of tabs at the top of every page in the site. • 3 different configuration options • Inherited and included in parent The site is included as a tab on the top link bar of the parent site and uses the same top link bar as the parent site. The top link bar cannot be customized at this level without first breaking the inheritance from the parent site. • Inherited not included parent The site uses the same top link bar as the parent site but is not included as a tab on the top link bar of the parent site. The top link bar cannot be customized at this level without first breaking the inheritance from the parent site. • Unique The site is not included as a tab on the top link bar of the parent site and does not use the same top link bar as the parent site. The top link bar is customizable at this level and is completely separate from the parent site.
Navigation Primer – Top Link Bar • Through Site Actions, a site administrator can • Configure the top link bar for a site • Add, edit, or remove a link from the top link bar • Reorder links on the top link bar
Quick Tip: Flyouts • The Top Link Bar supports the use of flyouts (dynamic navigation to subsites) • The default setting is to go one level below the current • What if you want more? • In the default.master file (or the master file in use) look for the 'MaximumDynamicDisplayLevels' property. • It is set to 1 by default; change it to 2 and you now have dynamic flyouts that go two levels deep
Architecture • To understand what can be done programmatically, it is important to understand the underlying architecture • Office SharePoint Server 2007 bases its navigation model on the hierarchical structure of the site collection. By using the navigation features, you can link to the following: • A site's subsites • A site's peer sites • Sites higher in the site structure • Web pages in a site
Architecture • The role of the master page • Contains the elements that you want all pages in your site to share, such as branding information, common commands such as Search, and navigation elements that you want to be available throughout the site • Provides the menu style of the navigation controls. You can configure master page menu style by using Microsoft Office SharePoint Designer
Additional Terminology • Global Navigation • Top Link Bar • Current Navigation • Quick Launch • Breadcrumb Navigation • Associated with the master page • Additional Navigation (Web Parts) • Summary Links • Table of Contents • Content Query
Why Do You Need Custom Navigation? • Super Rich User Experience • Aesthetics • Functionality / Effects • Exceptions to Standard Navigation • Extend the native navigation to include additional functionality • Typical Profile • Wireframe comes from professional design team • Business users demand specific navigation • Internet facing; requires high polish
Design Considerations • Performance • New navigation cannot impede page rendering times • Cross Browser Capabilities • For internet based deployments, how does the experience differ for non-IE users; do you care? • Dynamic vs. Controlled • Is navigation constructed real-time (SharePoint API) or read from some external source (XML file)? • Security • What are the security consideration for custom development (i.e. continue to enforce security trimming)
Quick FYI’s • Experience with using the SharePoint object model is assumed • Great improvements over SPS 2003 • Note that objects used to programmatically customize navigation reside in the Microsoft.SharePoint.Navigation namespace • The SPWeb object has a new property named Navigation that returns a SPNavigation object. This object allows developers to programmatically control the navigation of a SharePoint site. • This coding can done as part of custom navigation development or even site provisioning
Code Snippet – Example #1 Source: Todd Baginski’s Blog
Code Snippet – Example #1 SPSite sharedNavSite = new SPSite(“http://server/test/sharednav”); SPWeb sharedNavWeb = sharedNavSite.OpenWeb(); sharedNavWeb.Navigation.UseShared = true; SPSite sharedNavSite = new SPSite(“http://server/test/sharednav”); SPWeb sharedNavWeb = sharedNavSite.OpenWeb(); sharedNavWeb.Navigation.UseShared = false; Source: Todd Baginski’s Blog
Code Snippet – Example #2 SPSite quickLaunchSite = new SPSite(“http://server/quicklaunch”); SPWeb quickLaunchWeb = quickLaunchSite.OpenWeb(); SPNavigationNodeCollection quickLaunchNodes = quickLaunchWeb.Navigation.QuickLaunch; SPNavigationNode internalMenuItem = new SPNavigationNode(“Links”, “Lists/Links/AllItems.aspx”, false); quickLaunchNodes.AddAsFirst(internalMenuItem); SPNavigationNode externalMenuItem = new SPNavigationNode(“SharePoint Experts”, “http://www.SharePointExperts.com”, true); quickLaunchNodes.AddAsFirst(externalMenuItem); quickLaunchWeb.Update(); Source: Todd Baginski’s Blog
Code Snippet – Example #2 Source: Todd Baginski’s Blog
Must Have for Navigation Development • Todd Baginski's SharePoint Navigation Demo - http://www.sharepointblogs.com/files/folders/tbaginski/entry10255.aspx
Putting It All Together • Codeplex - Navigation Custom Control for Microsoft Office SharePoint Server (MOSS) • The custom control uses a PortalSiteMapProvider to render a vertical navigation. Unlike the out-of-the-box AspMenu, it does not emit table tags, but list tags customizable using CSS classes. The navigation expands the root nodes and all parent nodes to the current node. A node can be a sub-site or a page. • This is an example starting point for custom navigation development; it is not a deployable solution! Consider it a framework!
Custom Navigation Control • Installation • Add files to a Visual Studio 2005 Class Library project • Compile the project to a strong named assembly • Copy the assembly either to the bin directory of your web site or to GAC. If the bin directory is used, modify web.config to use a custom or WSS_Medium trust level • Add a SafeControl entry containing the assembly in your site's web.config • Insert custom control to your site master pages or page layouts
Summary • There is lots that you can with .NET development to extend or control user site navigation • Functionality can be built into site provisioning, custom web parts, and/or custom controls • Don’t forget about cross-browser compatibility and security trimming requirements • Use CSS references and take aesthetics out of the coding when possible • For internally facing applications, discourage advanced navigation controls… invest time and resources elsewhere
Resources • Customize site navigation - http://office.microsoft.com/en-us/sharepointtechnology/HA101191001033.aspx • Plan site navigation (Office SharePoint Server) - http://technet.microsoft.com/en-us/library/cc262951.aspx • Todd Baginski’s HOW TO: Programmatically customize site navigation in WSS 3.0 and MOSS 2007 - http://www.sharepointblogs.com/tbaginski/archive/2007/12/26/how-to-programmatically-customize-site-navigation-in-wss-3-0-and-moss-2007.aspx • Codeplex: Navigation Custom Control for Microsoft Office SharePoint Server (MOSS) - http://www.codeproject.com/KB/sharepoint/MossVerticalNav.aspx
Your Feedback is Important Please fill out a session evaluation form and either put them in the basket near the exit or drop them off at the conference registration desk. Thank you!