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:

1 comment:

  1. thanks very much.. your ways works for me.

    i have tried another same script with another ways.. but it did not worked

    ReplyDelete

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts