How to display all the 5 list views in specific order?

Question

I have a basic Custom List in SharePoint Online (Office 365) with 5 different views which their URLs are as follows:

View1 : https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View1.aspx

View2 : https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View2.aspx

View3 : https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View3.aspx

View4 : https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View4.aspx

View5 : https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View5.aspx

I no longer have the "All Items" default view, Because I renamed it to "View1" and made it as my default.

Also, By design, SharePoint displays only Three views along with ellipsis (...).

I really want to display all the Five views in a specific order i.e.

View1 View5 View4 View3 View2

I tried adding Script Editor web part onto the default view page (https://Tenant.sharepoint.com/teams/SiteName/Lists/ListName/View1.aspx) with the suggested scripts that I found on:

How to display more than 3 views in document library?

How do I change the displayed view order for a list in SharePoint 2013?

https://afrait.com/blog/display-more-than-3-views-en/

Nothing seems to be working. Am I adding the script in the wrong location? Or, Is it because this SharePoint Online O365 ?

Please, Help me out !

Answer 1

All those blogs do work in SPOnline

Simplest:

• Create a file viewselector.js in your ~sitecollection/Style Library

  console.info("My viewselector.js");
  ExecuteOrDelayUntilScriptLoaded(function overrideSurfacePivotCount() {
      ClientPivotControl.prototype.SurfacedPivotCount = 99;
  }, 'clienttemplates.js');
  

• On the first ListView WebPart in you ASPX page,
  set a (WebPart Properties/Misc section) JSLink pointing to:
  ~sitecollection/Style Library/viewselector.js

If you do not see that console.info output in the F12 Dev Tools window then the JSLink is wrong

Refer to the blogs you listed for more advanced coding