{"id":87,"date":"2011-11-16T14:50:20","date_gmt":"2011-11-16T19:50:20","guid":{"rendered":"http:\/\/blogs.visigo.com\/chriscoulson\/?p=87"},"modified":"2011-11-16T14:50:20","modified_gmt":"2011-11-16T19:50:20","slug":"adding-breadcrumb-navigation-to-sharepoint-2010-application-pages","status":"publish","type":"post","link":"https:\/\/blogs.visigo.com\/chriscoulson\/adding-breadcrumb-navigation-to-sharepoint-2010-application-pages\/","title":{"rendered":"Adding Breadcrumb Navigation to SharePoint 2010 Application Pages"},"content":{"rendered":"<p>The application pages in my SharePoint 2010 FBA Pack were not properly displaying the breadcrumb navigation. They didn&#8217;t include &#8216;Site Settings&#8217; in the navigation &#8211; they went straight from Home to the application page.<\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-89\" title=\"breadcrumb1\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb1.png\" alt=\"FBA User Management Title Before Changes\" width=\"472\" height=\"97\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb1.png 472w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb1-300x61.png 300w\" sizes=\"auto, (max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<p>I used the following blog entry to add the breadcrumb navigation:<\/p>\n<p><a href=\"http:\/\/weblogs.asp.net\/jan\/archive\/2008\/04\/16\/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx\">http:\/\/weblogs.asp.net\/jan\/archive\/2008\/04\/16\/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx<\/a><\/p>\n<p>Unfortunately after making the changes, I still didn&#8217;t see a single change on the page. \u00a0I found a few other people on the forums wondering how to do breadcrumbs in SharePoint 2010, but nobody with a solution. \u00a0I decided to dig into the out of the box Site Settings application pages and see how they did it, as their breadcrumb navigation was displaying flawlessly, with the Site Settings as part of the navigation:<\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-90\" title=\"breadcrumb2\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb2.png\" alt=\"Site Columns Application Page Title\" width=\"439\" height=\"90\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb2.png 439w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb2-300x61.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<p>Looking at the Site Columns application page, mngfield.aspx, I realized the problems. \u00a0First, the SharePoint 2010 master page v4.master uses\u00a0SPSiteMapProvider and SPContentMapProvider for the breadcrumb site map providers. These don&#8217;t build the breadcrumb from the layouts.sitemap file that define the breadcrumb in 2007. \u00a0The mngfield.aspx application page overrides v4.master and uses\u00a0SPXmlContentMapProvider for the site map provider, which does read from the layouts.sitemap file. The second thing the out of the box application page does differently is override the\u00a0PlaceHolderPageTitleInTitleArea content and hard codes the breadcrumb navigation. What I had mistaken for the bread crumb navigation was actually the title area. \u00a0The breadcrumb navigation in SharePoint 2010 is accessed with the &#8216;Navigate Up&#8217; folder icon.<\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb3SharePoint2010Breadcrumbs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-91\" title=\"breadcrumb3SharePoint2010Breadcrumbs\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb3SharePoint2010Breadcrumbs-500x122.png\" alt=\"SharePoint 2010 Breadcrumb Control\" width=\"500\" height=\"122\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb3SharePoint2010Breadcrumbs-500x122.png 500w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb3SharePoint2010Breadcrumbs-300x73.png 300w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb3SharePoint2010Breadcrumbs.png 728w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb4TitleArea.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-92\" title=\"breadcrumb4TitleArea\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb4TitleArea.png\" alt=\"SharePoint 2010 Title Area\" width=\"439\" height=\"90\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb4TitleArea.png 439w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb4TitleArea-300x61.png 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<p>So here are the steps required to get breadcrumb navigation working in SharePoint 2010:<\/p>\n<ul>\n<li>Follow the steps from\u00a0<a href=\"http:\/\/weblogs.asp.net\/jan\/archive\/2008\/04\/16\/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx\">http:\/\/weblogs.asp.net\/jan\/archive\/2008\/04\/16\/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx<\/a>, creating your own layouts.sitemap.myprojectname.xml file, and merging it with SharePoint&#8217;s layouts.sitemap file using:<\/li>\n<\/ul>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\nSPFarm.Local.Services.GetValue&lt;SPWebService&gt;().\r\n                    ApplyApplicationContentToLocalServer();\r\n<\/pre>\n<ul>\n<li>Add the following PlaceHolderTitleBreadcrumb section to your application page:<\/li>\n<\/ul>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;asp:Content contentplaceholderid=&quot;PlaceHolderTitleBreadcrumb&quot; runat=&quot;server&quot;&gt;\r\n  &lt;SharePoint:UIVersionedContent UIVersion=&quot;3&quot; runat=&quot;server&quot;&gt;&lt;ContentTemplate&gt;\r\n\t&lt;asp:SiteMapPath\r\n\t\tSiteMapProvider=&quot;SPXmlContentMapProvider&quot;\r\n\t\tid=&quot;ContentMap&quot;\r\n\t\tSkipLinkText=&quot;&quot;\r\n\t\tNodeStyle-CssClass=&quot;ms-sitemapdirectional&quot;\r\n\t\tRootNodeStyle-CssClass=&quot;s4-die&quot;\r\n\t\tPathSeparator=&quot;&amp;#160;&amp;gt; &quot;\r\n\t\tPathSeparatorStyle-CssClass = &quot;s4-bcsep&quot;\r\n\t\trunat=&quot;server&quot; \/&gt;\r\n  &lt;\/ContentTemplate&gt;&lt;\/SharePoint:UIVersionedContent&gt;\r\n  &lt;SharePoint:UIVersionedContent UIVersion=&quot;4&quot; runat=&quot;server&quot;&gt;&lt;ContentTemplate&gt;\r\n\t&lt;SharePoint:ListSiteMapPath\r\n\t\trunat=&quot;server&quot;\r\n\t\tSiteMapProviders=&quot;SPSiteMapProvider,SPXmlContentMapProvider&quot;\r\n\t\tRenderCurrentNodeAsLink=&quot;false&quot;\r\n\t\tPathSeparator=&quot;&quot;\r\n\t\tCssClass=&quot;s4-breadcrumb&quot;\r\n\t\tNodeStyle-CssClass=&quot;s4-breadcrumbNode&quot;\r\n\t\tCurrentNodeStyle-CssClass=&quot;s4-breadcrumbCurrentNode&quot;\r\n\t\tRootNodeStyle-CssClass=&quot;s4-breadcrumbRootNode&quot;\r\n\t\tHideInteriorRootNodes=&quot;true&quot;\r\n\t\tSkipLinkText=&quot;&quot; \/&gt;\r\n  &lt;\/ContentTemplate&gt;&lt;\/SharePoint:UIVersionedContent&gt;\r\n&lt;\/asp:Content&gt;\r\n<\/pre>\n<ul>\n<li>Replace your PlaceHolderPageTitleInTitleArea section with the following:<\/li>\n<\/ul>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;asp:Content ContentPlaceHolderId=&quot;PlaceHolderPageTitleInTitleArea&quot; runat=&quot;server&quot;&gt;\r\n\t&lt;a href=&quot;settings.aspx&quot;&gt;&lt;SharePoint:EncodedLiteral runat=&quot;server&quot; text=&quot;&lt;%$Resources:wss,settings_pagetitle%&gt;&quot; EncodeMethod=&quot;HtmlEncode&quot;\/&gt;&lt;\/a&gt;&amp;#32;&lt;SharePoint:ClusteredDirectionalSeparatorArrow runat=&quot;server&quot; \/&gt;\r\n\tMy Application Page Title\r\n&lt;\/asp:Content&gt;\r\n<\/pre>\n<p>After those changes my application pages display as they should, with the proper breadcrumb navigation:<\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-93\" title=\"breadcrumb5\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb5-500x81.png\" alt=\"FBA User Management Title Area After\" width=\"500\" height=\"81\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb5-500x81.png 500w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb5-300x48.png 300w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb5.png 595w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb6.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-94\" title=\"breadcrumb6\" src=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb6-500x141.png\" alt=\"FBA User Management Breadcrumbs After\" width=\"500\" height=\"141\" srcset=\"https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb6-500x141.png 500w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb6-300x85.png 300w, https:\/\/blogs.visigo.com\/chriscoulson\/wp-content\/uploads\/2011\/11\/breadcrumb6.png 574w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The application pages in my SharePoint 2010 FBA Pack were not properly displaying the breadcrumb navigation. They didn&#8217;t include &#8216;Site Settings&#8217; in the navigation &#8211; they went straight from Home to the application page. I used the following blog entry to add the breadcrumb navigation: http:\/\/weblogs.asp.net\/jan\/archive\/2008\/04\/16\/adding-breadcrumb-navigation-to-sharepoint-application-pages-the-easy-way.aspx Unfortunately after making the changes, I still didn&#8217;t see [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[191,5],"tags":[204,205,116,193,192,210,201,202,194,207,198,200,22,24,195,206,197,196,203,199,208,209],"class_list":["post-87","post","type-post","status-publish","format-standard","hentry","category-development","category-sharepoint","tag-application-page","tag-application-pages","tag-aspx","tag-bread-crumb","tag-breadcrumb","tag-breadcrumb-navigation","tag-breadcrumbs","tag-contentmap","tag-layouts","tag-layouts-sitemap","tag-navigation","tag-placeholdertitlebreadcrumb","tag-sharepoint-2","tag-sharepoint-2010","tag-site-map","tag-site-settings","tag-sitemap","tag-sitemapproviders","tag-spcontentmapprovider","tag-spsitemapprovider","tag-spxmlcontentmapprovider","tag-v4-master"],"_links":{"self":[{"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/posts\/87","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":0,"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.visigo.com\/chriscoulson\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}