10

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:

enter image description here

(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.

2

4 Answers 4

7

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;
    }
})(); 
3
  • This is excellent; thank you. I added a couple of comments to help others use the code.
    – nikodaemus
    Jan 22, 2016 at 16:13
  • 1
    fRenderHeaderColumnNames is undefined , what is it supposed to do? Mar 5, 2016 at 8:51
  • It works with dropped fRenderHeaderColumnNames
    – Gennady G
    Nov 16, 2018 at 13:51
3

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.

0

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?

0

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.

1
  • So, in this case, I want to move the view "Group by Category" so that it displays after "Comments". I changed view1's find statement parameter from 'View1' to 'Group by Category', then changed insertBefore to insertAfter, then changed the 'All Items' parameter to 'Comments', but nothing happened. I tried a few different things and none of them worked.
    – nikodaemus
    Jan 21, 2016 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.