Subscribe:      
 

Create an Alphabetical SharePoint Menu Using jQuery

Written By: Shishir Bhandari -- 3/22/2011 -- join -- contribute -- (3607) comments -- printer friendly version

Rating: Rate --

Categories: Design, MOSS 2007, Navigation, WSS3

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:
  1. Get the required list of the site URLs from the List using SPAPI_Lists JS API.
  2. 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>	


Next Steps

  • For creating an Alphabetical jQuery Menu download the code here!
  • Return to MSSharepointTips to read about other topics and ideas.
  • Check out MSSQLTips.com for great information about Microsoft SQL Server.




Learn more about SharePoint



Sponsor Information




Copyright (c) 2010-2017 Edgewood Solutions, LLC All rights reserved
privacy | disclaimer | copyright | advertise | contribute | feedback | about
Some names and products listed are the registered trademarks of their respective owners.


MSSharePointTips.com | MSSQLTips.com