Create an Alphabetical SharePoint Menu Using jQuery

By: Shishir Bhandari | Comments | Related: > Sharepoint Design

Problem

For site navigation, SharePoint provides a Top navigation menu and a Left navigation menu, but sometimes this is not sufficient. If you have 100 sites or pages underneath your Site Collection and you want to look at it alphabetically, anything out of the box is not going to work. You need something custom, but you don’t want to write complex C# code or spend a lot of time coding and deploying it, so what can you do?

Solution

The solution is to use JQuery!

To start, let’s have a look at what you are trying to achieve:

Figure 1

(inspired from http://www.songs-lyrics.net/browse-lyrics/A.html )

The following steps will lead you towards creating the alphabetical menu:

1. For testing purposes, create a few sites and pages under your site collection based on the United States Presidents (dummy data from Wikipedia)

2. Create a custom list "Site URL Repository" at the site collection level. Add a hyperlink column ‘SITEURL’ for storing all Site URLs. This will be a Required field

3. Create a calculated column "Index" with the formula as shown below. This column will store the first character of the item’s title. It will be used to sort sites alphabetically.

Figure 2

4. Let’s have a look at the list of columns below:

Figure 3

5. The list, which will store our site URL’s is ready. Let's create an item and link it to the appropriate site

Figure 4

6. This way, you will create an item for each site in this list. For testing, let us create 6 items and link them to their respective site URLs.

Figure 5

7. Let us write a simple JQuery and HTML to create our Menu.

For querying our list, we are going to use SPAPI_lists.js and SPAPI_Core.js. Please refer to "5. Querying the list using the lists web service" section on Darren Johnstone’s blog. You can download these API files from here.

Let’s store these two SPAPI libraries at our LAYOUTS folder and refer to them as shown below:

<script language="javascript" type="text/javascript" src="/_layouts/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/_layouts/jquery/SPAPI_Lists.js"></script>
<script type="text/javascript" src="/_layouts/jquery/SPAPI_Core.js"></script>

Write some HTML and CSS to create Figure 1:

<style type="text/css">

#Tabs ul.TabsRow{
	text-align: left;
	margin: 0.5em 0 0 0;
	font: 14px arial;
	list-style-type: none;
	padding: 6px 4px 6px 4px;
        	background-color:#fed965;
}
#Tabs ul.TabsRow li{
	display: inline;
}

#Tabs ul.TabsRow a {
	font-family: arial;
	font-size: 11px;
	font-weight: bold;
}
#Tabs ul.TabsRow a.selected{
	color: #C0C0C0;
}
.List {
	border: none;
	padding: 0;
}
.ListItem {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 12px;
}
.ListItem li {

	margin-right: 0px;
	margin-left:0px;
	margin-bottom:7px;
	margin-top:7px;
}
</style>

<div id="Tabs">
	 <ul class="TabsRow">
	 	 <li>| <a href="#A" class="selected"><span>A</span></a> | </li>
	 	 <li><a href="#B"><span>B</span></a> | </li>
	 	 <li><a href="#C"><span>C</span></a> | </li>
	 	 <li><a href="#D"><span>D</span></a> | </li>
	 	 <li><a href="#E"><span>E</span></a> | </li>
	 	 <li><a href="#F"><span>F</span></a> | </li>
	 	 <li><a href="#G"><span>G</span></a> | </li>
	 	 <li><a href="#H"><span>H</span></a> | </li>
	 	 <li><a href="#I"><span>I</span></a> | </li>
	 	 <li><a href="#J"><span>J</span></a> | </li>
	 	 <li><a href="#K"><span>K</span></a> | </li>
	 	 <li><a href="#L"><span>L</span></a> | </li>
	 	 <li><a href="#M"><span>M</span></a> | </li>
	 	 <li><a href="#N"><span>N</span></a> | </li>
	 	 <li><a href="#O"><span>O</span></a> | </li>
	 	 <li><a href="#P"><span>P</span></a> | </li>
	 	 <li><a href="#Q"><span>Q</span></a> | </li>
	 	 <li><a href="#R"><span>R</span></a> | </li>
	 	 <li><a href="#S"><span>S</span></a> | </li>
	 	 <li><a href="#T"><span>T</span></a> | </li>
	 	 <li><a href="#U"><span>U</span></a> | </li>
	 	 <li><a href="#V"><span>V</span></a> | </li>
	 	 <li><a href="#W"><span>W</span></a> | </li>
	 	 <li><a href="#X"><span>X</span></a> | </li>
	 	 <li><a href="#Y"><span>Y</span></a> | </li>
	 	 <li><a href="#Z"><span>Z</span></a> | </li>
    </ul>
</div>

<div id="Tabs" width="100%" height="100%" >
<div class="tabbedWindow" id="A"  style="border: none !important;"></div>
<div class="tabbedWindow" id="B"  style="border: none !important;"></div>
<div class="tabbedWindow" id="C"  style="border: none !important;"></div>
<div class="tabbedWindow" id="D"  style="border: none !important;"></div>
<div class="tabbedWindow" id="E"  style="border: none !important;"></div>
<div class="tabbedWindow" id="F"  style="border: none !important;"></div>
<div class="tabbedWindow" id="G"  style="border: none !important;"></div>
<div class="tabbedWindow" id="H"  style="border: none !important;"></div>
<div class="tabbedWindow" id="I"  style="border: none !important;"></div>
<div class="tabbedWindow" id="J"  style="border: none !important;"></div>
<div class="tabbedWindow" id="K"  style="border: none !important;"></div>
<div class="tabbedWindow" id="L"  style="border: none !important;"></div>
<div class="tabbedWindow" id="M"  style="border: none !important;"></div>
<div class="tabbedWindow" id="N"  style="border: none !important;"></div>
<div class="tabbedWindow" id="O"  style="border: none !important;"></div>
<div class="tabbedWindow" id="P"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Q"  style="border: none !important;"></div>
<div class="tabbedWindow" id="R"  style="border: none !important;"></div>
<div class="tabbedWindow" id="S"  style="border: none !important;"></div>
<div class="tabbedWindow" id="T"  style="border: none !important;"></div>
<div class="tabbedWindow" id="U"  style="border: none !important;"></div>
<div class="tabbedWindow" id="V"  style="border: none !important;"></div>
<div class="tabbedWindow" id="W"  style="border: none !important;"></div>
<div class="tabbedWindow" id="X"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Y"  style="border: none !important;"></div>
<div class="tabbedWindow" id="Z"  style="border: none !important;"></div>
<div class="waste"></div>
</div>

Write a simple JQuery function to add a click event:

$(function () {
	var tabContainers = $('div#Tabs > .tabbedWindow');
	tabContainers.hide().filter('#A').show();
	FilterData("#A");

	$('div#Tabs ul.TabsRow a').click(function () {
	     tabContainers.hide();
	     tabContainers.filter(this.hash).show();
	     $('div#Tabs ul.TabsRow a').removeClass('selected');
	     FilterData(this.hash);
	     $(this).addClass('selected');
	     return false;
	     }).filter('#A').click();
});

Write a FilterData() function to:

Get the required list of the site URLs from the List using SPAPI_Lists JS API.
Write logic to keep only 5 links in one column. Also put the results in an appropriate HTML table.

function FilterData(hash){

    listname = Config.ListGUID;

    var indexValue=hash;
    var index=indexValue.split("#");
    var SiteURL=window.location.protocol + "//" + window.location.host + Config.SiteRelativeURL;
    var lists = new SPAPI_Lists(SiteURL);

    //Create your CAML query to get siteURLs

    QAMLQuery = "<Query><Where><Eq><FieldRef Name='Index' /><Value Type='Calculated'>"+index[1]

                +"</Value></Eq></Where><OrderBy><FieldRef Name='Title'/></OrderBy></Query>"

    var items=lists.getListItems(
        listname,             // Name/ GUID of your list
        '',                           // view, here nothing
        QAMLQuery,      // query
        '<ViewFields/>',
        '',                           // row limit
        ''                            // Query option
        );

  	var targetDivIndex = $("div"+hash);
  	targetDivIndex.html("");

  	if (items.status == 200)
   	{
	var rows = items.responseXML.getElementsByTagName('z:row');

	//Got the required results//
	//Now let’s write some logic to wrap our results in HTML//
	//and to keep only 5 site URLs in one column. This way our UI won’t suck!//

	var html="<table class='List'>";
	html=html+"<tr>";
    var Counter=rows.length;
    var noofColumns=0;
    var noOfRows=5;

    for (var i = 0; i < Counter; i += 5)
    {
        noofColumns++;
    }

	for (var irow=0; irow<noofColumns*noOfRows; irow+=noOfRows)
    {
        html=html+"<td class='ListColumn'>";
        var html=html+"<ul class='ListItem'>";
        for (var irows=0; irows<noOfRows && irows<(Counter-irow) ; irows++)
        {
        var count=irows+irow;
		var row1=rows[count];
        var fullname = row1.getAttribute('ows_Title');

	    if(fullname!=null)
         {
          //Get value of column SiteURL

	      var UrlwithName=row1.getAttribute('ows_SiteURL');
          var UrlOnly=UrlwithName.split(",");
          html=html+"<li><a href='"+UrlOnly[0]+"'>"+fullname+"</a></li>";
         }
	}
       html=html+"</ul>";
       html=html+"</td>";
    }
    html=html+"</tr>";
    html=html+"</table>";
    targetDivIndex.append(html);
   }
   else
   {
   targetDivIndex.append('No Presidents');
   }
 }

That’s it! Let’s put this script in a Content Editor web part to see the results.

Voila! You have your Alphabetical Menu ready!

Pretty cool and straightforward, right!

For your convenience, you can download the source code here.

Before using, just change the list GUID and the site relative URL of your list as shown below:

<script type="text/javascript">
     // *** Customizable parameters ***//

     var Config = {
         // LIST GUID of our Custom list 'Site URL Repository'//
         ListGUID: '{862A85A0-6CF7-4ED1-A9C4-5376E569C0EB}',

         //Sharepoint relative url where 'Site URL Repository' resides//
         SiteRelativeURL: '/test',
     };
</script>