Source: http://sharepointjavascript.wordpress.com by Alexander ( An expert in JavaScript please follow his blog for cool stuff).
This solution is used to break up a SharePoint form into sections – like in an accordion.
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 section
- You can have a section displaying all fields
- You can have a section catching all orphans (fields that are not displayed in any other section). Useful if one adds columns to a list without updating the script call.
- Highlights section if a field fails validation upon save
- Use a URL query string parameter to expand a specific section
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
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, modify the URL like this:
/Lists/Accordion/NewForm.aspx?toolpaneview=2
/Lists/Accordion/DispForm.aspx?ID=1&toolpaneview=2
/Lists/Accordion/EditForm.aspx?ID=1&toolpaneview=2
/Lists/Accordion/NewForm.aspx?toolpaneview=2
/Lists/Accordion/DispForm.aspx?ID=1&toolpaneview=2
/Lists/Accordion/EditForm.aspx?ID=1&toolpaneview=2
For SharePoint 2010
Add this code block to the CEWP:
This is explained in detail below.
You must change the “src” to “AccordionForSharePointForms.js” to match your local file. If you like to use a local instance of jQuery, change that as well.
You must change the “src” to “AccordionForSharePointForms.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_buildAccordionForm” takes two parameters:
accConstructor: The object constructed in “var accConstructor”.
selectedAcc: Integer that specifies which section to preselect.
accConstructor: The object constructed in “var accConstructor”.
selectedAcc: Integer that specifies which section to preselect.
Variable “accConstructor” explained:
Attachments
I have added the attachment row as a “field” you can insert in a selected section. 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:
Link directly to a section:
Specify the section to preselect in the URL like this:
http://*************/Lists/Accordion/NewForm.aspx?sAcc=3
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);
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:
preSaveHighlightAccOnValidation();
preSaveHighlightAccOnValidation();
This will not interfere with the use of the function “PreSaveAction” often used to “do stuff” before save.