How to display more than 3 views in SharePoint List

I have a SharePoint list with 5 Views, and there is a restriction that, by default only the top 3 views including the default view can be shown on the page. This quite annoying, if you need any other view, you will need to click on the 3 dots and select.

Recently I had a requirement to display 5 Views on the SharePoint List page. After few mins of Google, I found the solution and I have modified as per my need. I hope someone is definitely in need of this solution, So thought of writing it here.

1. Simple solution:

Open the List view page > Edit Page > Add Web part > Script Editor Webpart > Edit Snippet > Paste below code:
<script type="text/javascript">
function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
    var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
    ClientPivotControl.prototype.SurfacedPivotCount = 5;   
    return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); 
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  Templates: {
    Header: renderHeaderTemplateForDocuments
  }
});
</script>
I have highlighted SurfacedPivotCount =5 update this with your value.

Problem:

With the above solution, you will need to add the Script editor web-part to each List View page and if you create a new View, again manual process to add the web-part.

2. Advanced Solution:

Create a JS file width below content and upload to the Site Assets or Style Library, and give a reference to it on the Master Page.
function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames) {
try{
    ClientPivotControl.prototype.SurfacedPivotCount = 5;
}catch(e){}
    return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames);
}
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", overrideSurfacePivotCount);
Note: Do not include above code in the Jquery doument ready method.

This will make all the List pages to have 5 Views shown.

Further fine-tuning:

Above solution works well and shows 5 Views. But think of below scenarios:
  • If you have only 1 default view in the List (or say < 5 Views), then this code will also show the menus: Modify this View and Create View.
  • If you are using a large monitor where more than 5 views can be shown at a time or the other hand if some users have very small screened laptops where only 4 views can be fit.
  • If you want a particular view to be shown on top always which is a common view in all the lists in your site.
This solution can be tweaked for above scenarios:

function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames) {
try{
    var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
    if (window.innerWidth > 1500) {
        if ((viewData.length - 3) >= 6)
            ClientPivotControl.prototype.SurfacedPivotCount = 6;
        else
            ClientPivotControl.prototype.SurfacedPivotCount = viewData.length - 3;
    }
    else
        if ((viewData.length - 3) >= 5)
            ClientPivotControl.prototype.SurfacedPivotCount = 5;
        else
            ClientPivotControl.prototype.SurfacedPivotCount = viewData.length - 3;
}catch(e){}
    return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames);
}
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", overrideSurfacePivotCount);

Code explained:

  • window.innerWidth gives us the with if the screen and based on this we can decide the number of views to be shown.
  • viewData is an array of the Views as shown in below picture:

  • viewData.length gives us the total number of views including the 3 dots ...Modify this View and Create View. (viewData.length - 3) is to make sure to exclude these 3 and always show as usual (default behavior).
  • This code sets 6 Views on the screens with size > 1500 and 5 on other screens, also it ignores the last 3 Views from the viewData array to have the Modify this View and Create View inside the 3 dots... dropdown.
  • You can modify the code for the 3rd scenario explained above by lopping the array, and viewData[n].DisplayText value.
Hope this post helped someone..

Check my post on List view cell formatting here :SharePoint List View Cell formatting with CSR

Comments

Popular posts from this blog

SharePoint Online (O365) OAuth Authentication | Authorizing REST API calls against SharePoint Online Site | Get Access token from SharePoint Online | Set up OAuth for SharePoint Online Office 365

SharePoint 2013 REST API Reference

Simple Risk Assessment Matrix table with resultant risk calculation

Kendo UI (Core JavaScript) grid Server Paging, Server Sorting and Server Filtering with Dynamic SQL queries

Sharepoint- Using an Image From formatmap32x32.png in a Ribbon Control