SharePoint 2010: Bread Crumb for List/Library View Web Part in Wiki Page.

SharePoint 2010: Bread Crumb for List/Library View Web Part in Wiki Page.

Let’s have a look on why we need it first? In SharePoint, if we have large folder hierarchy in list/library (i.e. more than 10 sub levels) and we have added list view web part of that list/library in wiki page then it’s very difficult for end users to navigate through each folder level. Secondly, user can never know in which folder currently he/she is. Thirdly, If user want to navigate up more than one level then it's very hard too.

Suppose we have one document library say ‘Training Material’ with below folder structure.

Root(Training Material)
-Folder1
--Folder1.1
---Folder1.1.1
----Folder1.1.1.1
-----Folder1.1.1.1.1
------Folder1.1.1.1.1.1

In below screen shot I am in folder1.1.1 but one can never know it from the screen shot.





Here is a simple script which you can put in a content editor web part on the same wiki page to get rid from all above difficulties.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var rootStr = getParameterByName("RootFolder");
        var listUrl;
        var j;        
        if (rootStr != "") {
            // If you have added List
            if (rootStr.indexOf("List") >= 0) {
                j = 3;
                listUrl = rootStr.substring(0, findNthOccurrence(rootStr, '\/', j));
                listUrl = listUrl.replace(' ', '%20');
            }
            // If you have added Library
            else
            {
                j = 2;
                listUrl = rootStr.substring(0, findNthOccurrence(rootStr, '\/', j));
                listUrl = listUrl.replace(' ', '%20');
            }
            var count = rootStr.match(/\//g);
            if (count.length > j - 1) {               
                var i = j;
                for (i; i < count.length; i++) {                    
                    $("a[href='" + listUrl + "']").parent('h3').append('<span> > </span>');
                    var spanEle = document.createElement("span");
                    var anchorEle = document.createElement("a");
                    anchorEle.innerHTML = rootStr.substring(findNthOccurrence(rootStr, '\/', i) + 1, findNthOccurrence(rootStr, '\/', i + 1));
                    var rootFolder = rootStr.substring(0, findNthOccurrence(rootStr, '\/', i + 1));
                    anchorEle.href = location.href.replace(/(RootFolder=)[^\&]+/, '$1' + rootFolder);
                    spanEle.appendChild(anchorEle);
                    $("a[href='" + listUrl + "']").parent('h3').append(spanEle);
                }
                $("a[href='" + listUrl + "']").parent('h3').append('<span> > </span>');
                var spanEle = document.createElement("span");
                var anchorEle = document.createElement("a");
                anchorEle.innerHTML = rootStr.substring(rootStr.lastIndexOf('\/') + 1, rootStr.length);
                anchorEle.href = '#';
                spanEle.appendChild(anchorEle);
                $("a[href='" + listUrl + "']").parent('h3').append(spanEle);
            }
        $("a[href='" + listUrl + "']").attr('href', location.href.split('?')[0]);
        }
    });
    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.search);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    function findNthOccurrence(string, char, nth) {
        var firstIndex = string.indexOf(char);
        var lenUptofirstIndex = firstIndex + 1;
        if (nth == 1) {
            return firstIndex;
        }
        else {
            var strAfterFirstOccurrence = string.slice(lenUptofirstIndex);
            var nextOccurrence = findNthOccurrence(strAfterFirstOccurrence, char, nth - 1);
            if (nextOccurrence === -1) {
                return -1;
            }
            else {
                return lenUptofirstIndex + nextOccurrence;
            }
        }
    }
</script>

Above code block will construct a breadcrumb at web part header something like below. Now you can navigate through each folder very quickly and easily using it.



Hope it helps!!!!

Note : It will work only with default Title URL of web part. If you have set it with yours then you must need to modify below code accordingly. If there is an alternate approach for this kind of bread crumb, then please edit it in this Wiki article.
Leave a Comment
  • Please add 6 and 4 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • Gokan Ozcifci edited Revision 6. Comment: Added version

  • Ed Price - MSFT edited Revision 2. Comment: Title casing

  • Ed Price - MSFT edited Revision 3. Comment: Ruined the code block

  • Naomi  N edited Revision 1. Comment: minor edit

Page 1 of 1 (4 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Gokan Ozcifci edited Revision 6. Comment: Added version

  • @Ed Price : why revision 3??

  • Ed Price - MSFT edited Revision 2. Comment: Title casing

  • Ed Price - MSFT edited Revision 3. Comment: Ruined the code block

  • Naomi  N edited Revision 1. Comment: minor edit

Page 1 of 1 (5 items)