Resources For IT Professionals
Page Details
  • First published by (eMicrosoft Community Contributo)
  • When: 30 Jun 2013 10:51 AM
  • Last revision by (eMicrosoft Partne)
  • When: 1 Aug 2013 10:14 AM
  • Revisions: 8
  • Comments: 5
Options

Revision #5

Wiki  >  TechNet Articles  >  SharePoint 2010: Bread Crumb for List/Library View Web Part in Wiki Page.  >  Revision #5
SharePoint 2010: Bread Crumb for List/Library View Web Part in Wiki Page.
You are currently reviewing an older revision of this page.
Go to current version
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 this 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.

Best Regards,
Joydeep K.
Revert to this revision