« Making SharePoint look like a million bucks on a shoestring budget - Part II | Main | SharePoint and jQuery - Get the Authenticated User's Name and Modify Content Client-Side »

Using SPServices, jQuery and an $8 Tab Plugin to Create a Stunning SharePoint List Visualization

AKA: Making SharePoint look like a million bucks on a shoestring budget - Part I

I'd been wanting to spend some time getting familiar with the brilliant open source jQuery library for SharePoint's web services, SPServices, and had the opportunity this past week.  We had a SharePoint site under construction that needed to have a list of links and a little explanation to accompany them  and initially just hosted a standard grouping mechanism on the list view which looks terrible.  I thought that this might be a chance to offer a better way to visualize list data using an inexpensive tabbing control in my library.  The result is shown below, with each 'tab' here linking to 3 fields from a custom list, the title, the sub-title and the content.  This stays in our needed model of users interacting with the standard SP forms that they understand and is leaps and bounds a better user experience.  If this takes you more than a lunch break to implement you might need longer lunch breaks, this is an easy setup and looks great, even responding to mouse-wheel scrolling through the tabs.


To do this I used a stunning jQuery plugin called 'Sliding Tabs' that I bought from CodeCanyon.net for a dirt cheap 8 bucks (authored by 360north).  You can see/buy it here and it is one of the many ridiculous bargains on that site that I'll be extending in future posts.  That 8 dollars is all this costs and it looks like $1,000,008 when done.  You'll also need to grab the jQuery file and the SPServices file, we have these hosted on our farm and embedded in the master page for ease of use as seen in the includes in the code.  All includes that are needed but the core jQuery and SPServices files come with the Sliding Tabs package.

With the code in hand from them I created a new list with the aforementioned title, subtitle and content (being a rich content type) list and hooked it up.  Full code follows below.

Notice in the code that you have to specify your site and list names (lines 13 and 15) and if you name your columns something other than I did, you'll need to change the mappings to the 'ows_XXX' moniker that matches your fields (lines 26, 28 and 30).  If you are unsure of what your field's names are you can uncomment line 20 and see for yourself.

You can change the size, shape, orientation and other options with the tab control with the options section starting at line 58.  It does not handle overflow well (um, not at all really, it just gets clipped) but for what we needed it was perfect.


<script type="text/javascript" src="_layouts/1033/jquery.min.js"></script>
<script type="text/javascript" src="_layouts/1033/jquery.SPServices.min.js"></script>
<script type="text/javascript" src="_layouts/1033/jquery.mousewheel.js"></script>
<script type="text/javascript" src="_layouts/1033/jquery.slidingtabs.pack.js"></script>
<script type="text/javascript" src="_layouts/1033/jquery.easing.js"></script>

<link href="_layouts/1033/styles/slidingtabs-vertical.css" rel="stylesheet" type="text/css" media="screen"/>

<script language = "javascript">
$(document).ready(function() {
		operation: "GetListItems",
		async: false,
		listName: "SIMPLE DEMO LIST",
		completefunc: function (xData, Status) {

			//alert("Status of XML message reaching Sharepoint webservice: " + Status); // handy for debug
			//alert("Response from server: " + xData.responseText); // also handy for debug
			var output = "";
			var TabCounter = 0; // to keep track of tabs/containers

			$(xData.responseXML).find("[nodeName='z:row']").each(function() {

				var title = ($(this).attr("ows_Title"));
					if(title.length == 0) {title = ' ';}
				var subtitle = ($(this).attr("ows_Subtitle"));
					if(subtitle.length == 0) {subtitle = ' ';}
				var content = ($(this).attr("ows_Content"));
					if(content.length == 0) {content = ' ';}
				var TabClass = 'st_tab';
				var ContainerClass = 'st_tab_view';
				if(TabCounter==0) // our first items get special 'active' class styling
					TabClass = 'st_tab st_tab_active';
					ContainerClass = 'st_tab_view st_first_tab_view';
				// Create new tab element as <li>
				var TabHeader = '<li><a href="#stv_content_' + TabCounter + '" rel="v_tab_' + TabCounter + '" class="' + TabClass + '">'
					TabHeader += title + '<span>' + subtitle + '</span></a></li>';
				$("#tablisting").append(TabHeader); // insert into DOM

				// Create new lined content container as <div>
				var stv_content = '<div id="stv_content_' + TabCounter + '" class="' + ContainerClass + '" style="overflow:auto;">';
					stv_content +='<h2 class="sc_title">' + title + '</h2><div class="text"><p>' + content + '</p></div></div>';			
				$("#st_tabs_container").append(stv_content); // insert into DOM

				TabCounter++;  // increment counter
	// Instantiate Vertical Sliding Tabs
		// Options
		contentAnim: 'slideH',
		contentAnimTime: 600,
		contentEasing: 'easeInOutExpo',
		orientation: 'vertical',
		tabsAnimTime: 300,
		totalWidth: '660',		
		tabScroll: true				
<!-- Start HTML - Vertical tabs -->
<div id="st_vertical" class="st_vertical">
	<div class="st_tabs_container">   
		<a href="#prev" class="st_prev"></a>
		<a href="#next" class="st_next"></a>                                                                    
		<div class="st_slide_container">            
			<ul class="st_tabs" id="tablisting"></ul><!-- tabs inserted here -->               
		</div> <!-- /.st_slide_container -->
	</div> <!-- /.st_tabs_container -->                               
	<div class="st_view_container">        	            
		<div class="st_view" id="st_tabs_container"></div> <!-- content blocks inserted here -->                        
	</div> <!-- /.st_view_container -->
</div> <!-- /#st_vertical -->
<!-- End HTML - Vertical tabs -->
More jQuery visual enhancements to come...

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments (3)

Very nice effect and cool UX based on the interactivity with the mouse scroll. I'd love to know your decision process for using the web services instead of a DVWP. What were some of the advantages/disadvantages with going the route you took?

May 15, 2012 | Unregistered CommenterMatthew Bramer

Hi Matthew. The primary driver here for using SPS and jQuery over DVWP was to more easily snap the content into the UI control. I considered both approaches before I started but being JavaScript based, skipping the need for any XSLT and the extra jump seemed a cleaner way to populate than the DVWP approach.

If I were not dropping the content into the control I was (or if the list query were not so simple as this example) I'd probably advocate the use of the DVWP.

June 4, 2012 | Registered CommenterKevin

Hi I am really struggling to get this working I get a blank screen but the window box show, please assist

January 15, 2014 | Unregistered Commenterpdp

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>