Microsoft Power Platform, SharePoint, Azure, AWS, Google Cloud, DevOps, AI/ML: Folder Navigation for List View WebPart in SharePoint 2013 and SharePoint Online

Monday, May 15, 2017

Folder Navigation for List View WebPart in SharePoint 2013 and SharePoint Online

Folder Navigation for List View WebPart in SharePoint 2013 and SharePoint Online.
Step 1: Create a notepad file and save as "FolderNavigation.html" and below code to this file.

<!DOCTYPE html>

<html>

<head>

.ms-WPHeader .breadcrumbs {

display: block;

font-style: italic;

}

.ms-WPHeader .breadcrumbs, .ms-WPHeader .breadcrumbs a {

font-size: 0.8em;

color: #D1D1D1;

}

</style>

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

function doBreadCrumbs() {

var rootStr = getUrlParam('RootFolder');

if (rootStr != '') {

//For SharePoint online: '.ms-webpart-titleText a'

//For SharPoint 2013: '.ms-WPTitle a'

var webpartHeaders = document.querySelectorAll('.ms-webpart-titleText a');

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

var webpartHeader = webpartHeaders[i];

var link = decodeURIComponent(webpartHeader.getAttribute('href'));

if (rootStr.indexOf(link) != -1) {

var path = rootStr.replace(link, '');

var basepath = rootStr.replace(path, '');

var breadcrumb = '<span class="breadcrumb">';

breadcrumb += '<a href="' + location.pathname + '"> Home</a>';

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

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

var currentfolder = folders[i];

basepath += "/" + currentfolder;

var folderlink = decodeURIComponent(window.location.search).replace('RootFolder=' + decodeURIComponent(rootStr), 'RootFolder=' + decodeURIComponent(basepath));

breadcrumb += ' > <a href="' + folderlink + '">' + currentfolder + '</a>';

}

breadcrumb += '</span>';

webpartHeader.parentNode.innerHTML += breadcrumb;

}

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>

</head>

</html>

Step 2: Upload this "FolderNavigation.html" file into "Site Assets" Library.

Step 3: Add "Document Library" List WebPart in a page and make sure Chrome type should be any one of these.
1. Default
2. Title and border
3. Title only
Step 4: Add Content Editor WebPart, Edit Content Editor WebPart and provide Content Link as "/sites/dev/SiteAssets/foldernavigation/foldernavigation.html"
Content Editor WebPart Chrome Type: None.