Tabs in SharePoint form

18.01.2011 I have posted a new solution compatible with both SP2007 and SP2010 and fixes the problems with rich text fields and “single lookup with more than 20 items under Internet Explorer – problem”. You find it her

---

23.01.2010 Updated the code to fix two issues regarding date and time columns. I added a <style> tag to set the font size of “.ms-dtinput” and “.ms-dttimeinput” to 0.7em.

I also added a custom handler to select the right tab on “empty field validation” on a date and time field. These are validated without page reload, and therefore did not work in the previous version.

Thank you all for the feedback and the testing.

15.12.2009 Update to support form validation. On submit – if there are required fields not filled – the tab containing the first required field is selected.

---

I got this request:

We have a custom list with a lot of fields. I need to divide it into sections and then easily show/hide those sections. I am going to try dividing the form into div tags and then use jQuery to display the sections in either Tabs or an accordion…

And made this demo based on the jQuery UI Widget “Tabs”.

NewForm:

DispForm:

DispForm with attachment:

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):

A folder named “jQueryUI” containing the scripts and the “images”-folder for the selected theme:

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The jQuery UI-library is found here. Find the theme of your choice – mine is “smootness” – and download the files (i have plucked only the necessary files – “UI Core” and “Tabs”).

Add a CEWP below your NewForm, DispForm and EditForm.

Add this code:

<!-- Date field text size -->
<style type="text/css">
.ms-dtinput,.ms-dttimeinput{
	font-size:0.7em;
}
</style>
<DIV id="tabs">
	<UL style="font-size:12px">
		<LI><A href="#tabs-1">Tab 1</A></LI>
		<LI><A href="#tabs-2">Tab 2</A></LI>
		<LI><A href="#tabs-3">Tab 3</A></LI>
		<LI><A href="#tabs-4">Attachments</A></LI>
	</UL>

	<div><table cellpadding="0" cellspacing="0" id="tabs-1"></table></div>
	<div><table cellpadding="0" cellspacing="0" id="tabs-2"></table></div>
	<div><table cellpadding="0" cellspacing="0" id="tabs-3"></table></div>
	<div><table cellpadding="0" cellspacing="0" id="tabs-4"></table></div>
</DIV>

<link type="text/css" href="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
// Array of all fields - format: tabID|FieldInternalName
arrTab = ['1|Title','1|Tab1Text','1|Tab1Choice',
		  '2|Responsible','2|Tab2Text','2|Tab2Choice','2|Date',
		  '3|Tab3Text','3|Tab3Choice','3|Tab3MultilinePlain'];

// Initiate all the fields
fields = init_fields();

// Add the "tabs" to the formtable
$("#tabs").insertAfter('.ms-formtable').tabs();
// Loop trough all fields and move them to the right tab
$.each(arrTab,function(idx,item){
	var split = item.split('|');
	var tabID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		currField = $(fields[fieldName]);
		currField.appendTo('#tabs-'+tabID);		
	}
});

// Are there any required fields not filled? - select the tab containing the first field
selectTabOnFormValidation(false);
function selectTabOnFormValidation(preSave){
var formvalidationTab = '';
// Formvalidation - find the first tab with empty required fields
	$.each(arrTab,function(idx,item){
		var split = item.split('|');
		var tabID = split[0];
		var fieldName = split[1];
		currField = $(fields[fieldName]);
		// Handles DateTimeField (empty field validation is performed without page reload)
		if(currField.find("SPAN[ID*='_DateTimeField_']").length>0){
			if(currField.find('input:first').val()=='' && preSave){
				formvalidationTab = tabID;
			}
		}
		if(formvalidationTab == '' && currField.find('.ms-formbody span.ms-formvalidation').length>0){
			formvalidationTab = tabID;
		}
	});
	// Select the first tab containing an empty required field
	if(formvalidationTab!=''){
		$('#tabs').tabs('select', formvalidationTab);
	}
}

// Move the Attachment's to the last tab
$("#idAttachmentsRow").appendTo('#tabs-4').find('.ms-formlabel').attr('width','165px');

// function - to make "object" of all tr's in the form
function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}

// Catch "empty field validation" on date and time columns
function PreSaveAction(){
selectTabOnFormValidation(true);
return true;
}
</script>

The only parameters you need to edit in the script is the array of FieldInternalNames. The format of the variable “arrTab” is tabID|FieldInternalName.

In the html above the script, adapt the number’s of tabs – and the tab’s display name. The tabID corresponds with the number in the id attribute of the table to insert the tab content in.

All fields must be added to a tab – if not it looks ugly….

Note: By now i have tested and found that columns of type “Multiple lines of text (Rich text or Enhanced rich text) do not work. What happens is that the tabs script shows some of the fields hidden parts.

I have not done any testing on how to prevent this issue, so feel free to notify me if you find a workaround.

Regards
Alexander