- Browser compatibility tested in:
- How to use this solution
- For SharePoint 2007
- For SharePoint 2010
- Add this code block to the CEWP:
- Variable “tabConstructor” explained:
- New in v2.4:
- How to find the FieldInternalName
- Link directly to a tab:
- Overriding native SharePoint functions
- Finale notes
- Like this:
26.11.2011 I have updated the script to v2.4 to attempt to fix some problems withe overlapping tabs in IE7. I have moved the files to another server. Follow the link under the “How to use this solution” section below. I have added one new “attibute” under the settings section in the CEWP code: “baseTabColor”. See below for details.
24.03.2011 Updated the script to fix an issue with the attachments. They now appear at the bottom of every tab – like in a unmodified form. If there are no attachments, the field is hidden.
In the CEWP-code the example-tab containing the attachments has been removed.
19.03.2011 v2.1 adds the ability to call a function after the tab has expanded. You can specify a shared function that will be called on every tab, and/or a function that is called on one specific tab.
This solution has previously been published over at NothingButSharePoint
- 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
- Use a URL query string parameter to expand a specific tab
Browser compatibility tested in:
- IE6 (Works in SP2007 only due to SP2010 incompatibility with IE6)
- Firefox 3.6.13
- Google Chrome 8.0.552.237
- Safari 5.0.2
How to use this solution
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.
To put the page in edit mode, modify the URL like this:
Add this code block to the CEWP:
This is explained in detail below.
You must change the “src” to “TabsForSharePointForms.js” to match your local file. If you like to use a local 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 to preselect.
Variable “tabConstructor” explained:
New in v2.4:
baseTabColor: Set the default background color for the tabs. See CEWP code for example.
I have changed the attachment handling in v2.2. Now attachments are left untouched and they will display at the bottom of all tabs. If there are no attachments, the field is hidden.
How to find the FieldInternalName
Link directly to a tab:
Specify the tab to preselect in the URL like this:
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.
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:
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:
This will not interfere with the use of the function “PreSaveAction” often used to “do stuff” before save.
The solution is licensed under the MIT X11 license. You 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