Learn more about SQL Server tools

mssqltips logo
 

Tutorials          DBA          Dev          BI          Career          Categories          Webcasts          Whitepapers          Today's Tip          Join

Tutorials      DBA      Dev      BI      Categories      Webcasts

DBA    Dev    BI    Categories

 

Create an Alphabetical SharePoint Menu Using jQuery


By:   |   Read Comments   |   Related Tips: > Sharepoint

Attend this free live MSSQLTips webcast

Tips and Tricks to Growing Your SQL Server Estate from SMB to Enterprise Scale
Thursday, June 28, 2018 - click here to learn more


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:

starchick
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.

index
Figure 2

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

columns
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

new item
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.

site url repository
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.

test

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!


Last Update:


next webcast button


next tip button



About the author
MSSQLTips author Shishir Bhandari Shishir Bhandari

View all my tips





Post a comment or let the author know this tip helped.

All comments are reviewed, so stay on subject or we may delete your comment. Note: your email address is not published. Required fields are marked with an asterisk (*).

*Name    *Email    Email me updates 


Signup for our newsletter
 I agree by submitting my data to receive communications, account updates and/or special offers about SQL Server from MSSQLTips and/or its Sponsors. I have read the privacy statement and understand I may unsubscribe at any time.



    



Learn more about SQL Server tools