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

Question

I have a list and a requirement to show certain views by default. Thankfully, the default view always shows up first in the list, but after that it seems that everything is controlled alphabetically. At the moment, I'm using underscores _ to put high-priority views at the beginning of the list, as shown below:

(I've added the underscore to the default view, Comments, just for consistency with the other desired default displayed view, Group by Category.)

Thankfully, this is an internal list. It doesn't look the best and isn't something I'd want to present to a client unless necessary. Is there a way to manually change the order? I have only front-end access; that is, I don't have access to the server itself for its database or PowerShell.

Answer 1

Below is the javascript for JSLink(display template) file which does the custom sorting. You need to modify the 'viewNames' array to include the view names for your list. Add them to the array variable in the order you wish to see them on your page. You need to edit the webpart properties and add a link to this JSLink file for each view page if you want the order to show up in all the views.

    (function () {     
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
      'Templates': {
        'Header': renderHeaderTemplateForDocuments
      }
    }); 

    // enter all views here in the desired display order
    var viewNames = ['All items', 'Test', 'Dept View', 'HomePage', 'Modify this View', 'Create View'];

    function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
        var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
        // update with an integer to specify the number of displayed views
        ClientPivotControl.prototype.SurfacedPivotCount = viewData.length;   //display ALL available menu options
        viewData.sort(compareMenuOptions);  //sort menu options in order specified in the array
        renderCtx.ListSchema.ViewSelectorPivotMenuOptions = JSON.stringify(viewData);
        return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); //render Header template
    }

    function compareMenuOptions(a,b) {
        if(a.DisplayText != undefined && b.DisplayText != undefined){
               var x = viewNames.indexOf(a.DisplayText);
               var y = viewNames.indexOf(b.DisplayText)
              if (x > y)
                return 1;
              if (x < y)
                return -1;
        }
      return 0;
    }
})(); 

Answer 2

That order is alphabetical. I would put numerical prefixes. 01. Comments 02. Category grouped 03. Active Projects

Alternatively, I would abandon the views on the top nav and add a section in the left quick launch for important views, assuming this is the main list/library on the site. You can order that however you like. Last ditch would be a link list of views. You could add a sort order column and make links to your views.

Answer 3

Including a previous post which may be of some help to you. It shows how to add more than 3 views to the header. There's probably a way within this context to change the sort order as well. There are links in the comments on the below post which address the sorting issue and additional posts which offer some options.

How to display more than 3 views in document library?

Answer 4

Actually, what you can do:

1. Open Site Actions (wheel / settings icon) 
2. Click Edit Page
3. Add a Content Editor zone 
4. put JavaScript in there to re-arrange links
     JavaScript to re-arrange:
      var container = $("[id$='ViewSelectorMenu_Container']");
      var view1 =container.find("a[alt='View1']").detach();
      view1.insertBefore(container.find("a[alt='All Items']"));
5. Save the page.

Let me know if you need any help for this javascript to re-arrange anchors for views.