Tuesday, December 3, 2013

Breadcrumb navigation in SharePoint 2013

     ,  10 comments


Here is a quick way to add bread crumb navigation to SharePoint 2013 . By default we can only see the current location . To get a navigation which drills down to parent site collection , i usually go with the following approach. 

ListSiteMapPath  creates a SiteMapPath control that renders as site map as a hierarchical set instead of nested un-ordered lists.


Both of the controls have the “SiteMapProvider” property. ListSiteMapPath has a property “SiteMapProviders” which means we can specify more than one  provider object with one ListSiteMapPath control. There are many providers for us to choose. Following articles describes it well http://www.ktskumar.com/blog/2008/04/sharepoint-navigation-providers-part-1/ :

• SPSiteMapProvider
• SPContentMapProvider
• SPXmlContentMapProvider
• CurrentNavSiteMapProvider
• CurrentNavSiteMapProviderNoEncode
• CombinedNavSiteMapProvider
• GlobalNavigation
• CurrentNavigation
• ExtendedSearchXmlContentMapProvider
• AdministrationQuickLaunchProvider
• SharedServicesQuickLaunchProvider
• PWASiteMapProvider
• GlobalNavSiteMapProvider
• SiteDirectoryCategoryProvider
• MySiteMapProvider
• MySiteLeftNavProvider
• MySiteSubNavProvider
• SPNavigationProvider


Add following code snippet to any content place holder in master page where we want breadcrumb navigation to appear, in my case i added it in "PlaceHolderPageTitleInTitleArea" .

<!--SPM:<SharePoint:ListSiteMapPath
                runat="server"
                SiteMapProviders="CurrentNavSiteMapProviderNoEncode"
                RenderCurrentNodeAsLink="false"
                PathSeparator=""
                CssClass="ms-breadcrumb"
                NodeStyle-CssClass="ms-breadcrumbNode"
                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="ms-breadcrumbRootNode"
                NodeImageOffsetX="0"
                NodeImageOffsetY="289"
                NodeImageWidth="16"
                NodeImageHeight="16"
                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                RTLNodeImageOffsetX="0"
                RTLNodeImageOffsetY="312"
                RTLNodeImageWidth="16"
                RTLNodeImageHeight="16"
                RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"
                HideInteriorRootNodes="true"
                SkipLinkText=""/>-->
Adding above results in the following





Now, instead of i wanted as bread crumb separator. 
                NodeImageOffsetX="0"
                NodeImageOffsetY="289" change to 573
                NodeImageWidth="16" 
                NodeImageHeight="16" change to 10
                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" Image used for separator


Making above changes did the trick for me . After above changes our navigation is supposed to look like this.







Adding the following css aligns breadcrumb items in a horizontal menu 

.ms-breadcrumb li,ul {
 display: inline;  margin-left:-2.5em   
}




.ms-breadcrumb > li:first-child  > span:first-child{
display:none
}

Above hides image separator at the beginning 





Following css can be overridden to change the way we want our navigation to appear
               CssClass="ms-breadcrumb"
                NodeStyle-CssClass="ms-breadcrumbNode"
                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="ms-breadcrumbRootNode"

Monday, December 2, 2013

Change welcome menu text in SharePoint 2013

     ,  No comments




Make SharePoint more user friendly by giving your users a friendly welcome message. We will use jquery to achieve this. Make sure to include jquery file . You can download it from Jquery Download Link




$(document).ready(function (){
 var _welcomemenu =  $("a[title='Open Menu']")
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text();    //get the text of element

      var _newwelcomemenu = _welcomemenu.split(',')[1]  +" " + _welcomemenu.split(',')[0]; //swipe first and last name
      $("a[title='Open Menu']").text( "Welcome " + _newwelcomemenu); // Add friendly text
});



Thursday, November 21, 2013