Sharepoint 2013: How to create Document Library Webpart with folder navigation breadrumbs

Question

This is a question and a solution on how to create a sharepoint Docmuent Library Webpart and allow navigation between its folders.

Answer 1

Just use this Javascript in your Script Editor Webpart. * Make sure to replace 'WebPartTitleWPQ8' with your webpart ID. *****

$( document ).ready(function() {
// Variable to store the text used by SharePoint to generate the breadcrumb separator arrows

     var SeparatorArrow = '<span id="onetidPageTitleSeparator"><span><span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/images/fgimg.png" alt=":" style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" /></span></span> </span>';

     var baseURL = (document.location).toString();

     baseURL = baseURL.substring(0,baseURL.indexOf(".aspx")+5);



     var url = baseURL;                             

     url = baseURL + '?RootFolder=';



     var rootFolder = unescape(GetUrlParameter('RootFolder'));      

     var path = GetFolderPath(rootFolder);   

     rootFolder = rootFolder.substring(0,rootFolder.indexOf(path));  

     if(path.length > 0)

     {

         var folders = path.split('/');

         for(var i=0; i < folders.length; i++)

         {

              if(i==0)                             

                    url += encodeURIComponent(rootFolder.substring(0,rootFolder.length-1));

              url += encodeURIComponent('/' + folders[i]);
 var urlok=url.replace('%2F%2F','%2F');

              if(i < folders.length-1)

              {

                   //Add the folder link and separator arrows if more than one folder level deep
/* and change URL to URLOK down*/
if (i==0) {
$("#WebPartTitleWPQ8 h2:first a").attr("href", urlok + "&FolderCTID=" + GetUrlParameter("FolderCTID") + "&View=" + GetUrlParameter("View"));
}
else {

$("#WebPartTitleWPQ8").html($("#WebPartTitleWPQ8").html()+ '<a href="' + urlok + '&FolderCTID=' + GetUrlParameter("FolderCTID") + '&View=' + GetUrlParameter("View") + '">' + folders[i] + '</a>');

}

$("#WebPartTitleWPQ8").html($("#WebPartTitleWPQ8").html() + SeparatorArrow);


              }

             else

              {

                   if(folders.length>1){
$("#WebPartTitleWPQ8").html($("#WebPartTitleWPQ8").html() + folders[i])
                        //document.write(folders[i]);
}
              }             

         }

     }  



// Gets the value of the requested URL Parameter

function GetUrlParameter( name )

{

     name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");

     var regexS = "[\\?&]"+name+"=([^&#]*)";

     var regex = new RegExp( regexS );

     var results = regex.exec( window.location.href );

     if( results == null ) return "";

     else return results[1];

}



// Gets the name of the library

function GetFolderPath(rootFolder)

{

     var domain = window.location.hostname;

     var web = baseURL.substring(baseURL.indexOf(domain)+domain.length);

     var path = rootFolder.substring(GetFirstBreakIndex(web, rootFolder));

     return path;

}



// Gets the first different character occurrence index

function GetFirstBreakIndex(a, b)

{

     var slashIndex = -1;

     var equalsReturnCode = -1;

     if (a && b)

     {

          var longest = b.length > a.length ? b : a;

          var shortest = a.length > b.length ? b : a;



          for(var i=0; i < shortest.length; i++)

          {

               // Get location of each / as a breakpoint if

               // the first break index is part way into the string

               if(shortest.charAt(i) == '/')

                    slashIndex = i;

               if(shortest.charAt(i) != longest.charAt(i))

               {

                    if(i-slashIndex == 1)

                         return i;

                    else

                         return slashIndex + 1;

               }

          }

     }

     else

     {

          return equalsReturnCode;

     }

}
});