Wednesday, December 2, 2015

Add Full Breadcrumbs to SharePoint Document Library

Add Full Breadcrumbs to SharePoint Document Library

Inexcusably, SharePoint has no true breadcrumb navigation. In document libraries, navigating up and down the folder hierarchy is a painful series of pageloads. Fortunately, there are options.
If you have access to the server, you can create a custom code solution in SharePoint Designer or Visual Studio and serve it up. But before devoting resources to a server configuration change and all that entails, there’s a client side option that’s much easier to implement.

As a user of document libraries with folders up to a dozen levels deep, this is much appreciated.  The best part about this solution is the simplicity, it’s pure javascript and CSS, with no dependencies like jQuery or other outside libraries.  This means it works in IE8+, and creates no additional load on the server.
On note I will make, be sure the “title” option is set for the document library web part, which is not the default in SharePoint 2013. If it is not showing, the breadcrumb will be hidden. It’s also simple enough to modify the javascript to draw the breadcrumb to another element elsewhere on the page.

* Adds a breadcrumb to "Document Library" Web Parts
* Copyright 29/11/2013 - Alexis Nominé - MIT Licence
* Mdified by Oumaima Achkari - Adaptation to SharePoint 2013 - 02/12/2015

_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-webpart-titleText 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
                                               var pathname = window.location.pathname;
                                               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">';
                                                     var LibraryName = $(".ms-webpart-titleText").text();
                                                    breadcrumb += '<a href="' + location.pathname + '">'+ LibraryName  +'</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 ='RootFolder=' + encodeURIComponent(rootStr), 'RootFolder=' + encodeURIComponent(basepath));
                                                                              breadcrumb += ' &gt; <a href="'+ pathname+'?RootFolder=' +encodeURIComponent(basepath)+ '">' + currentfolder  + '</a>';
                                                                              //breadcrumb += ' &gt; <a href="Formations.aspx?RootFolder=/Formations/'+encodeURIComponent(currentfolder)+ '" ">' + currentfolder  + '</a>';
                                                               breadcrumb += '</span>';
                                                               // Insert breadcrumb
                                                               //webpartHeader.getElementsByClassName("span")[0].innerHTML += breadcrumb;
                                                               //document.getElementById("WebPartTitleWPQ2").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(;
    if (results == null)
        return "";
        return decodeURIComponent(results[1].replace(/\+/g, " "));}

How to export a schema.xml file for a list from a SharePoint site

How to export a schema.xml file for a list from a SharePoint site In sharepoint, we can retrieve the XML schema of any list by using ...