Thursday, December 29, 2016

SharePoint 2013 Quick Launch Customization

One of recent requirement I am working is creating custom quick launch menu on SharePoint 2013 that would have an accordion view plus searchable text box that would essentially search the contents of quick launch menu. The end result would be as you enter each key the results gets refined.

Below is the snapshot of final quick launch menu. As you can see in the image on default page load all the menus are collapsed and while in the 2nd image  user enters text in the search box(for example user types 'r') the results get expanded and displays the appropriate results that has character 'r'.Similarly user types 're' results get further simplified.

Search is implemented using Jquery and it displays results from child menus.

  

Accordion view of SharePoint 2013 quick launch:

For creating the accordion view, I had used below reference post from max.

http://yakovenkomax.com/converting-sharepoint-2013-quick-launch-to-accordion-menu/

Navigation is based on out of the site settings navigation. Although term store driven navigation can also be used.

Setting up the search on quick launch accordion menu:

Using custom jquery code, I had injected the text box appended it to the header section of the page.

Below is the complete custom Jquery code with the comments. Some portion of below code also contains the code for renaming the suitebar title of the SharePoint page.