Tabs for SharePoint forms

 

This solution is used to “tab” SharePoint forms.

2011-01-17-TabsForSPForms-01.png

Features:

  • Full SP2007 and SP2010 support for both lists and document libraries
  • Works for all standard field types (Custom field types are not guaranteed to work)
  • A field can be used in multiple tabs
  • You can have a tab displaying all fields
  • You can have a tab catching all orphans (fields that are not displayed in any other tab). Useful if one adds columns to a list without updating the script call.
  • Highlights tab if a field fails validation upon save

Browser compatibility tested in:

  • IE6 (Works in SP2007 only due to SP2010 incompatibility with IE6)
  • IE7
  • IE8
  • Firefox 3.6.13
  • Google Chrome 8.0.552.237
  • Safari 5.0.2

How to use this solution

Download the code for the file “TabsForSharePointForms.js” from this location

Upload the file to your script repository. This can be a shared document library in the site where you will be using the solution (ensure ALL users have read access).

For each of the forms (NewForm.aspx, DispForm.aspx and EditForm.aspx) add a Content Editor Web Part (CEWP) below the form.

For SharePoint 2007

To put the page in edit mode, add “toolpaneview=2” after the URL like this:

/Lists/Tabs/NewForm.aspx?toolpaneview=2
/Lists/Tabs/DispForm.aspx?ID=1&toolpaneview=2
/Lists/Tabs/EditForm.aspx?ID=1&toolpaneview=2

For SharePoint 2010

2011-01-17-TabsForSPForms-02.png

Add this code block to the CEWP:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/Javascript/TabsForSharePointForms.js"></script>
<script type="text/javascript">
var tabConstructor = {tabs:[{name:'First Tab',fields:['Title','MyPeoplePicker','MyRichText'],mouseOver:'This is the first tab',tabStyle:''},
							{name:'Second Tab',fields:['MyDateTime','MyMultiLookup'],mouseOver:'This is the second tab',tabStyle:''},
							{name:'Third Tab',fields:['MySingleLookup','MyTextField'],mouseOver:'This is the third tab',tabStyle:''},
							{name:'Attachments',fields:['attachments'],mouseOver:'',tabStyle:''}],
					  settings:{
						viewAllFields:{show:true,name:'All fields',mouseOver:'This tab shows all fields',tabStyle:''},
						orphanFields:{show:true,name:'...',mouseOver:'All orphan fields',tabStyle:''},
						breakTabRowAt:null,
						hoverTabColor:'#FFF68F',
						selectedTabColor:'#B9D3EE'}};
						
init_buildTabbedForm(tabConstructor,1);
</script>

This is explained in detail below.

You must change the “src” to “TabsForSharePointForms.js” to match your locale file. If you like to use a locale instance of jQuery, change that as well.

You must also change this example to match your columns FieldInternalName.

The call to the function “init_buildTabbedForm” takes two parameters:

tabConstructor: The object constructed in “var tabConstructor”.
selectedTab: Integer that specifies which tab so preselect.

Variable “tabConstructor” explained:

2011-01-17-TabsForSPForms-04.png

Attachments

I have added the attachment row as a “field” you can insert in a selected tab. It is named “attachments”. Look at the example CEWP code and the image.

How to find the FieldInternalName

Go to your list. Open one existing list element in DispForm.aspx. Right click and select “View source”. Search for “FieldInternalName”. All fields should be found in this format:

2011-01-17-TabsForSPForms-03.png

Note:
This is true only for unmodified forms. If you have modified the form in SharePoint designer, you will have to look at the function “init_fields_v2()” in the code to adapt it to your custom form. You will find a bit more information here.

Overriding native SharePoint functions

To overcome some issues with rich text fields I had to override one function: RTE_OnFocus.

I have added one line to the bottom of the function:
g_elemRTELastTextAreaConverted=document.getElementById(strBaseElementID);

To catch “empty field validation” on date and time columns “pre save”, I had to override the function “PreSaveItem”. I have added one line to the top of the function:
preSaveHighlightTabOnValidation();

This will not interfere with the use of the function “PreSaveAction” often used to “do stuff” before save.

Finale notes

The solution is licensed under the MIT X11 license. You will find the license agreement by clicking the little (c) to the right of the tabs.

I have set the initial release to v2.0 as I have previously posted a similar solution .

Ask if anything is unclear
Alexander