19.03.2011 v2.1 adds the ability to call a function after the section has expanded. You can specify a shared function that will be called on every section, and/or a function that is called on one specific section.
The CEWP code must be updated from v2.0 to include the new parameters.
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
Download the code for the file “AccordionForSharePointForms.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, 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
For SharePoint 2010
Add this code block to the CEWP:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/Accordion/v2.0/AccordionForSharePointForms.js"></script>
<script type="text/javascript">
var accConstructor = {sections:[{name:'First section',fields:['InMultipleSections','Column1','Column2'],mouseOver:'This is the first section',sectionStyle:'',clickFunction:''},
{name:'Second section',fields:['InMultipleSections','Column3','Column4','Lookup1','MyMultiLookup'],mouseOver:'This is the second section',sectionStyle:'',clickFunction:'secondSectionClick(this)'},
{name:'Third section',fields:['InMultipleSections','Title'],mouseOver:'This is the third section',sectionStyle:'',clickFunction:''},
{name:'Forth section',fields:['Column5','Column6','MyPeoplePicker'],mouseOver:'This is the forth section',sectionStyle:'',clickFunction:''},
{name:'Attachments',fields:['attachments'],mouseOver:'',sectionStyle:'',clickFunction:''}],
settings:{viewAllFields:{show:true,position:'bottom',name:'All fields',mouseOver:'This section shows all fields',sectionStyle:'',clickFunction:''},
orphanFields:{show:true,name:'Orphans',mouseOver:'All orphan fields',sectionStyle:'',clickFunction:''},
bgColor:'#8EB4E8',
hoverColor:'#FFF68F',
selectedColor:'#C6E2FF',
formBgColor:'#C6E2FF'},
clickFunctionShared:'clickFunctionShared(this)'};
function clickFunctionShared(elm){
var acc = $(elm);
// This code is run on click on any section
}
function secondSectionClick(elm){
var acc = $(elm);
var arrOfFields = acc.attr('fields').split(',');
alert("The fields included in the second section is these:n"+arrOfFields);
}
init_buildAccordionForm(accConstructor,'1');
</script>
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 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.
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);
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();
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 find the license agreement by clicking the little (c) to the left of the lower button row.
I have set the initial release to v2.0 as I have previously posted a similar solution.
Ask if anything is unclear
Alexander
