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