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>
    <style type="text/css">
        .ms-WPHeader .breadcrumbs {
            display: block;
            font-style: italic;
        }
        .ms-WPHeader .breadcrumbs, .ms-WPHeader .breadcrumbs a {
            font-size: 0.8em;
            color: #D1D1D1;
        }
    </style>
    <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        _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 += ' &gt; <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>
<body>
</body>
</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.
Step 5:

No comments:

Post a Comment