Customizing View Selector Menu In Sharepoint 2013 Using Client-Side Rendering

The Problem with the Default View Selector

The default out-of-the-box view selector menu in SharePoint 2013 provides limited options for customization to match specific branding or site styles. The available views are predefined and cannot be easily modified without coding solutions. This presents challenges when designing branded SharePoint sites.

With only using out-of-the-box features, SharePoint designers are constrained to the default blue color scheme links and list structure of the view menu. The text colors, styles, and item organization cannot be changed.

Using Client-Side Rendering to Customize the View Selector

Client-side rendering (CSR) provides a method for modifying the user interface and behaviors of SharePoint components using JavaScript and HTML. By leveraging CSR, the view selector can be highly customized to match specific design needs.

Table of Contents

Some key benefits of customizing the view selector menu using client-side rendering include:

Fully customizable colors, fonts, borders, and icons
Ability to rename, hide, disable, or reorder view links
Adding custom functionality with JavaScript
Improved performance over server-side customization

Utilizing client-side rendering enables the view menu to be changed to match unique branding and style requirements for SharePoint sites. Anything displayed in the default view selector can be customized and adjusted.

Example Code for Customizing the View Selector

The first step is instructing SharePoint to use custom rendering for the view selector menu. This example code shows hooking up a client-side view selector rendering template:

function registerViewSelectorOverride() {

  var viewSelectorContext = {};
  viewSelectorContext.Templates = {};
  viewSelectorContext.Templates.Fields = {
    // Apply custom rendering for ViewSelector
    "ViewSelector": { "View": customViewSelectorTemplate }
  };

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewSelectorContext);

}

This overrides the default OOTB view selector web part and applies a custom template. Next, a rendering template is defined in HTML:

function customViewSelectorTemplate(ctx) {
   
  var viewsHtml = "";
   
  // Build HTML for custom view list
  ctx.view.choices.forEach(function(view){
    
    viewsHtml += "<li><a href='" + view.url + "'>" + view.displayText + "</a></li>";
    
  });

  return "<ul>" + viewsHtml + "</ul>";

}

Some key aspects:

Builds list item HTML for each available view
view.url links to the view
view.displayText shows the text

This can be expanded to fully customize any aspect of the rendered selector.

Customizing the View Selector Appearance

The custom view selector template allows changing visual styles. Some examples include:

"<ul class='custom-selector'></ul>"

"<li style='background: #c0c0c0'></li>" 

"<img src='icon.png'><a href='#'>View</a>"

Custom CSS can also be used by adding a reference in the master page:

<link rel="stylesheet" href="viewSelectorStyles.css" />

Then style the custom view selector:

.custom-selector li {

  background: #c0c0c0;
  border: 1px solid #777;

}

.custom-selector img {
  
  padding: 5px;
  border: none;
  
}

This allows full control over fonts, colors, borders, spacing, icons, and more.

Customizing View Selector Behavior

Client-side logic can customize behaviors like showing, hiding, disabling, reordering, and renaming views:

function isAdminUser() {

  // Code to check if current user has admin permissions

}

viewsHtml += "<li>";

if(isAdminUser()) {
  // Show admin view
  viewsHtml += "<a href='adminView'>Admin View</a>";
}

viewsHtml += "</li>";

Reorder views:

var viewOrder = ["All Documents", "Recent", "Admin"];

viewOrder.forEach(function(viewName) {

  // Render links based on order
});

Rename a view:

if(view.displayText == "My Custom Name") {

  viewsHtml += "<a ...">Documents</a>";  

}

Any custom JavaScript logic can be executed to build custom behaviors.

Considerations When Customizing the View Selector

When customizing the view selector, keep these considerations in mind:

Performance – Minify JavaScript and CSS assets, efficient selectors
Cross-browser testing – Support various browsers, Responsive design
Accessibility – Keyboard navigation, ARIA roles

Conduct testing across viewports and devices to ensure full functionality for all users. Follow web standards best practices.

Additional Tips for Advanced Customizations

For further customizations, explore options like:

Animations and slide-out menus
Integrate client charting libraries
Custom view filtering and logic
Alternative controls like sliders or knobs

See Microsoft’s documentation and references like Stack Overflow to push customizations beyond standard branding needs. Possibilities are expansive when manipulating view menus directly through code.