Monday 23 May 2016

Breadcrumb when navigating folders in a Sharepoint 2010 Document Library WebPart

Breadcrumb when navigating folders in a Sharepoint 2010 Document Library WebPart



Thanks to this post, helped me with adding breadcrum to webpart title in sharepoint document library.

Just add the content editor webpart and add below script.

I used this script to home page to default team site shared documents webpart.

<script>
_spBodyOnLoadFunctionNames.push("doBreadCrumbs");//execute after DOM loaded

function doBreadCrumbs(){
// Get 'RootFolder' value in URL
var rootStr = getUrlParam('RootFolder');  
if (rootStr != '') {
// Get all links in WebParts titles (IE8+)
var webpartHeaders = document.querySelectorAll('.ms-WPTitle a');
// For each link
for(var i = 0; i < webpartHeaders.length; i++){
var webpartHeader = webpartHeaders[i];
// Get link target
var link = decodeURIComponent(webpartHeader.getAttribute('href'));
// If target contains 'RootFolder' value, then we have our Web Part.
// Let's generate our breadcrumb
if(rootStr.indexOf(link) != -1){
var path = rootStr.replace(link, ''); // Folder path, relative to Doc Lib
var basepath = rootStr.replace(path, ''); // Doc Lib path

var breadcrumb = '<span class="breadcrumb">';
breadcrumb += '<a href="' + location.pathname + '">Home</a>'; // link to base page

// Create link for each sub-folder
var folders = path.split('/');
for(var i = 1; i < folders.length; i++){
var currentfolder = folders[i];
basepath += "/" + currentfolder;

// Replace 'RootFolder' value in URL without touching any other variables(orderby, etc.)
var folderlink = window.location.search.replace('RootFolder=' + encodeURIComponent(rootStr), 'RootFolder=' + encodeURIComponent(basepath));

breadcrumb += ' &gt; <a href="' + folderlink + '">' + currentfolder  + '</a>';
}
breadcrumb += '</span>';

// Insert breadcrumb
webpartHeader.parentNode.innerHTML = breadcrumb;
}
}
}
}

/* Get param value from query string */
function getUrlParam(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, " "));
}</script>
<style>
.ms-WPHeader .breadcrumbs{
display:block;
font-style:italic;
}
.ms-WPHeader .breadcrumbs,.ms-WPHeader .breadcrumbs a{
font-size: 0.8em;
color:#D1D1D1;
}
</style>

No comments:

Post a Comment