14.3. Working with Navigation Controls
In this section, I talk about a number of ASP.NET and SharePoint navigation controls that can be inserted on Web pages by using SharePoint Designer. SharePoint uses these navigation controls by default for its Quick Launch bar, top navigation menu, breadcrumb menus, etc. I start by helping you understand the nature of these navigation controls by showing you how they have been implemented on SharePoint sites. Later, you can use this understanding to create navigation menus on new Web pages.
14.3.1. Understanding navigation sources
To develop understanding about how SharePoint navigation controls are used in SharePoint sites, follow these steps:
Open a SharePoint site that uses the Team Site template. Open the default.aspx page for this site in the Split view.
In the Design view, hover over the top navigation menu on the default.aspx Web page. The PlaceHolderHorizontalNav content region is highlighted and shows the Common Tasks arrow.
Click the top navigation menu in the PlaceHolderHorizontalNav content region. The following code is highlighted in the Code view:
<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>
In the HTML code of the <SharePoint:AspMenu>, notice the highlighted properties DataSourceID and the StaticDisplayLevels. The DataSourceID attribute specifies the data source that's being used for the navigation control.
Scroll a little below this code in the Code view of the default.aspx page to find the following code:
<asp:SiteMapDataSource ShowStartingNode="False" SiteMapProvider="SPNavigationProvider" id="topSiteMap" runat="server" StartingNodeUrl="sid:1002"/>
This is the code of the data source control being used by the <SharePoint:AspMenu> navigation control. The id attribute of the <asp:SiteMapDataSource> control is the same as the DataSourceID property specified in the <SharePoint:AspMenu> navigation control.
To summarize, the <SharePoint:AspMenu> navigation control shows the data provided by the <asp:SiteMapDataSource> data source control to generate the top navigation menu on the SharePoint Web page. While the navigation control being used here is SharePoint-specific, the <asp:SiteMapDataSource> data source control is a generic ASP.NET data control. You can use this data source control with other navigation controls, such as <asp:Menu> and <asp:TreeView>.
It's important to notice the SiteMapProvider property of the <asp:SiteMapDataSource> data source control. The value that you specify for this property determines the data that's passed on to the navigation control for display. Depending on the version of SharePoint you're working with, the SiteMapProvider property can have various values. For example, WSS v3 has the SPNavigationProvider, SPSiteMapProvider, SPContentMapProvider, and SPXmlContentMapProvider providers available for use out of the box.
In the next exercise, you use the understanding gained from the previous discussion to implement navigation on a new ASP.NET Web page in a SharePoint site.
14.3.2. Binding to ASP.NET data and navigation controls
The <asp:SiteMapDataSource> data source control is available for inserting on Web pages by using the Toolbox task pane in SharePoint Designer. To create navigation using this data source control on a new Web page in a SharePoint site, follow these steps:
Choose File
New to create a new ASPX page in the SharePoint site you're working with.Click the SiteMapDataSource control that you just inserted on the Web page. The Tag Properties task pane shows you the properties of the control in a grid view.
Type SPSiteMapProvider as a value for the SiteMapProvider attribute of the control. Leave the rest of the properties as default.
Using the Toolbox task pane, insert the Menu control from the Navigation controls under ASP.NET controls. By default, when the control is inserted on the Web page, SharePoint Designer opens the Common Menu Tasks dropdown menu.
Click the Auto Format link to open the Auto Format dialog box, choose the Professional scheme from the list of schemes, click Apply, and then click OK.
Save the Web page and then preview it in a browser.
You now have a navigation bar that shows the list of sites inside the site where the Web page exists. Try changing the value of the SiteMapProvider to SPNavigationProvider and then notice the difference in the way the links in the menu appear.
NOTE
The Design view doesn't refresh the page view when you change the value of the SiteMapProvider. To refresh the view, you have to close and reopen the Web page in SharePoint Designer.
You can also use the SiteMapPath navigation control to display a breadcrumb navigation control on the Web page using these steps:
Using the Toolbox task pane, insert the SiteMapPath navigation control on your ASPX Web page.
Choose the control in the Design view to see the list of control properties in the Tag Properties dialog box.
Type SPNavigationProvider as the value for the SiteMapProvider property.
Type 0 for the value of the ParentLevelsDisplayed property.
In the Styles category, use the CurrentNodeStyle property to apply formatting to the active node of the navigation control.
14.3.3. Exploiting SharePoint navigation controls
SharePoint exposes a number of custom controls that a Web designer can exploit for achieving the desired functionality without having to write too much code. However, the skill that you need is to find out the controls that you want to use by looking at the code of the Web page in SharePoint Designer and then exploit that code in another implementation on your Web site.
The following steps show how you can identify such controls and then use them specifically for your purpose. Two such controls specific to navigation for SharePoint sites are <SharePoint:SPHierarchyDataSourceControl> and <Sharepoint:SPTreeView>. While SharePoint Designer doesn't directly expose these controls for use, it doesn't prevent you from using them in the Code view of the Web page (although it might have some issues rendering them properly).
Using your Site Actions menu of your SharePoint site, click Create to open the Create Web page.
In the Web Pages section, click Web Part Page to create a new Web part page.
Open this SharePoint site in SharePoint Designer.
Using the Folder List task pane, navigate to the document library where you saved this page and then open it in SharePoint Designer.
Click the Code view tab of the Web page and then locate the PlaceHolderMain content region.
Within this content region, just after the closing table tag, add the following code:
<SharePoint:SPHierarchyDataSourceControl runat="server" id="TreeViewDataSource1" RootContextObject="Web" IncludeDiscussio nFolders="true"/> <Sharepoint:SPTreeView id="WebTreeView1" runat="server" ShowLines="True" DataSourceId="TreeViewDataSource1"/>
Save the page and then preview it in a browser.
The control renders to show the list of document libraries and other content of the Web site. The treeview controls discussed here are placed just below the Quick Launch bar on the SharePoint Web page and become enabled for viewing on the Web page only when allowed by using the Tree View Web page in the Look and Feel section of the Site Settings page.
NOTE
Although SharePoint Designer might not be able to render the SPTreeView control properly in the Design view, the control should work in the Code view without issues. Any content that's newly added to the site is appended to the list shown by this control.