Changing the number of visible list views in the view selector of a list or library

For a colleague I did some checks on how the view selector rendering is achieved in lists and libraries. While digging through the code I found a very useful property, which is the ClientPivotControl.prototype.SurfacedPivotCount property. This property is used to define the amount of list views that are visible on the list view selector.

The default property value is 3, which you can also check in all your lists and libraries. You always receive three view links, the other views can be accessed underneath in the list view menu (…):

Show image

Show image

Now by changing this property, for example to 6 in my example, all my list views become available:

Show image

The code to achieve this fairly simple:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// With MDS enabled
ExecuteOrDelayUntilScriptLoaded(function () {
  if (typeof ClientPivotControl.prototype.SurfacedPivotCount !== "undefined") {
    ClientPivotControl.prototype.SurfacedPivotCount = 6;
  }
}, "start.js");

// Without MDS
if (typeof ClientPivotControl.prototype.SurfacedPivotCount !== "undefined") {
  ClientPivotControl.prototype.SurfacedPivotCount = 6;
}

Video

Video made by Webucator.