Re-order SP2013 views

Question

How do I re-order the views? E.g. "To be invoiced" to appear where "Current invoice" appears

Answer 1

The following CSR template demonstrates how to customize the appearance of menu options in list view, in particular in the example menu options are displayed sorted by title in descending order:

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


function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
    var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
    ClientPivotControl.prototype.SurfacedPivotCount = viewData.length - 3;   //display ALL available menu options
    viewData.sort(compareMenuOptions);  //sort menu options in descending order
    renderCtx.ListSchema.ViewSelectorPivotMenuOptions = JSON.stringify(viewData);
    return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); //render Header template
}


function compareMenuOptions(a,b) {
  if (a.DisplayText < b.DisplayText)
    return 1;
  if (a.DisplayText > b.DisplayText)
    return -1;
  return 0;
}

Before

Original Tasks list view

After

In the customized Tasks list view:

• view menu options are displayed sorted by title in descending order
• all available view menu options are displayed

Answer 2

You cannot sort them easily, they're always sorted by creation date of the view.

You can either delete them and recreate them manually in the order you with them to appear, or do it programmatically. With few views only, I'd use the manual way.

First create the new views by taking copy of the existing view (in the correct order). You will save a lot of time as you don't need to reconfigure the new views. Finally just delete the old views and you're left with same views, but in correct order.

This is how you would sort them alphabetically using PowerShell, please test this first in DEV/TEST environment. This script also may have issues if you have large number of views:

#Make the Script will Stop on errors
$ErrorActionPreference = "Stop"

#Get the variables needed by the following prompts
$TeamSitePrompt = Read-Host "What is the Team Site URL (i.e. http://test.com/teamsite)"
$ListNamePrompt = Read-Host "What is the List Name you want to sort" 

#Create a Sorted List to store the Views you want to Sort
$SortedList = New-Object System.Collections.SortedList

$Web = Get-SPWeb $TeamSitePrompt
$List = $Web.Lists[$ListNamePrompt]
$Views = $List.Views

#Loop through the Views on the List and Save then on the Sorted List 
#This will be automatically sorted as the Object is System.Collections.SortedList
Write-Host "Saving the List " $ListNamePrompt " to a Sorted Collection"
foreach ($CurrentViewItem in $List.Views)
{
   $SortedList.Add($CurrentViewItem.Title, $CurrentViewItem.Title)
}
Write-Host "---------------------------------------"

#Now the List is Sorted we Delete the View Item and Create it Again
#This makes it look like the Views are listed
#alphabetically but they are still listed by Creation Date
#We're just recreating them in alphabetical manner
foreach ($CurrentKeyItem in $SortedList.Keys)
{
   Write-Host "Processing Current View " $ViewToDelete.Title
   $ViewToDelete = $List.Views[$CurrentKeyItem]

   #Duplicate the Current View
   Write-Host "Duplicating Please wait ..."
   $NewVew = $ViewToDelete.Clone($ViewToDelete.Title, 
               $ViewToDelete.RowLimit, $ViewToDelete.Paged, 
               $ViewToDelete.DefaultView)

   #Delete the Old View, the New View will have a New ID so we use ID to Delete
   Write-Host "Deleting the old View"
   $List.Views.Delete($ViewToDelete.ID)

   Write-Host "---------------------------------------"
 }

#Set $ErrorActionPreference back to "Continue"
$ErrorActionPreference = "Continue"
Write-Host "------- F I N I S H E D --------"

Source

Answer 3

Using JSLink, you can create JavaScript file if you're familiar with it, and add it as JSLink property on the webpart in that view page.

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


    function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames) {
    var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);


     //now in the function renderHeaderTemplateForDocuments do a for loop for each viewdata item and get menuoptiontype, for other options do a console.log on viewdata.

    var customSort = [];

        for (var vi in viewData)
        {
            if (viewData[vi].MenuOptionType == 1)
            {
                if (viewData[vi].DisplayText == "To be Invoiced")
                {
                    customSort[0] = viewData[vi];
                }

                 // add other if conditions for other items you want to display as custom sorted order
                if (viewData[vi].DisplayText == "Modify this View")
                {
                    customSort[/*position index to second last*/ ] = viewData[vi];
                }
                 if (viewData[vi].DisplayText == "Create View")
            {
                customSort[/*position index last*/] = viewData[vi];
            }
             }
             else{
                customSort[/*position index third last*/] = viewData[vi];
             }
         }
viewData = customSort