SharePoint 2010: Bread Crumb for List/Library View Web Part in Wiki Page
Let’s have a look at why we need it. 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 a wiki page, then it’s very difficult for end users to navigate through each folder level. Secondly, a user can never know in which folder currently he/she is. Thirdly, if users want to navigate up more than one level then it's very hard to.
Suppose we have one document library saying ‘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 screenshot, we are in folder1.1.1 but one can never know it from the screenshot.
Here is a simple script which you can put in a content editor web part on the same wiki page to remove the 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 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 the web part. If you have set it then you may need to modify below code accordingly. If there is an alternate approach for this kind of breadcrumb, then please edit it in this Wiki article.
See Also
An important place to find a huge amount of SharePoint related articles is the TechNet Wiki itself. The best entry point is SharePoint Resources on the TechNet Wiki