Supporters of End User
Web

Tabs for SharePoint forms

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:MOSS; WSS; 2007; 2010; Site Manager/Power User; Content Editor Web Part; Tabs; Javascript and jQuery

 

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

Comments

Etienne

CEWP

What and where is the CEWP?

Posted 20-Jan-2011 by Etienne
Alexander Bautz

CEWP

Cut from the article text:
For each of the forms (NewForm.aspx, DispForm.aspx and EditForm.aspx) add a Content Editor Web Part (CEWP) below the form.
 
Alexander

Posted 20-Jan-2011 by Alexander Bautz
Ian (ians) S.

XSLT Tables inside tabs

Hi again :)
 
Glad that you have released new version! Looks everything changed :)
 
But about new release : on my site im moving into tabs not only fields, but splitters and xslt tables. Is there any way perform this in new version in more simply way?
 
( splitters - tables which was inserted after defined fields. Very useful thing btw; they can contain som links or something like that - anyway users are happy )
 
( xslt table - i've used WebPartWPQx to move table to tab table, but in this case i've manually added tr and td to tabs table )
 
Thanks))
Will try new version in action tomorrow!
 

Posted 20-Jan-2011 by Ian (ians) S.
Ian (ians) S.

XSLT Tables inside tabs

Hi again :)
 
Glad that you have released new version! Looks everything changed :)
 
But about new release : on my site im moving into tabs not only fields, but splitters and xslt tables. Is there any way perform this in new version in more simply way?
 
( splitters - tables which was inserted after defined fields. Very useful thing btw; they can contain som links or something like that - anyway users are happy )
 
( xslt table - i've used WebPartWPQx to move table to tab table, but in this case i've manually added tr and td to tabs table )
 
Thanks))
Will try new version in action tomorrow!
 

Posted 20-Jan-2011 by Ian (ians) S.
Ian (ians) S.

XSLT Tables inside tabs

Hi again :)
 
Glad that you have released new version! Looks everything changed :)
 
But about new release : on my site im moving into tabs not only fields, but splitters and xslt tables. Is there any way perform this in new version in more simply way?
 
( splitters - tables which was inserted after defined fields. Very useful thing btw; they can contain som links or something like that - anyway users are happy )
 
( xslt table - i've used WebPartWPQx to move table to tab table, but in this case i've manually added tr and td to tabs table )
 
Thanks))
Will try new version in action tomorrow!
 

Posted 20-Jan-2011 by Ian (ians) S.
Rach

Hide/Unhide fields

Hi Alex, Thanks a lot for this code. This helps me lot. We are hiding and unhiding some fields on the form depending on radio button selected value(yes/no). But this fails when we add this Tab code. Scenario: By default field should be hidden(radio button value No)so we did not added that field name into tab array. The field should appear on select event of radio button(yes value) which works but when we go to other tab ,but when we come back to this tab again, the fields are not visible though radio button value is "yes".

Posted 20-Jan-2011 by Rach
Spuser

Tabs doesnt work if we have cascading

Hi Alex,
First thanks for the wonderful tabs !.
 
The problem i am having is I have cascading dropdowns in my page- which uses SPCascade service. Thsi code doesnt work if we have cascade code :-( .... Also as the previous post hiding/unhiding through javascript doesn't work !!!
 
can you pelase let us know what can be done here.
 
Thanks !

Posted 20-Jan-2011 by Spuser
Mike

More than 1 title

What do you need to do if the code to cater for fields that is not just 1 word?
 
Say My Color Picker in stead of MyColorPicker??

Posted 21-Jan-2011 by Mike
Alexander Bautz

FieldInternalName

Look at the article under How to find the FieldInternalName.
 
FieldInternalName will never have blank spaces. My Color Picker will - if created with that name - result in a FieldInternalName of My_x0020_Color_x0020_Picker
 
Alexander

Posted 21-Jan-2011 by Alexander Bautz
Alexander Bautz

Regarding XSLT Tables inside tabs

You could modify the function init_fields_v2() to add those new "bits and pieces" to the fields object and then use them as if they were regular fields in the construction of the tabs.
 
Was this clear enough?

Alexander
 

Posted 21-Jan-2011 by Alexander Bautz
spuser

hide/unhide

Hi Alex,
 
I am still not able to figure out why hide/unhide doesnt work when we add teh above tabs.js as another CEWP to our page.
Can you please help em with it !

Posted 24-Jan-2011 by spuser
Alexander Bautz

Regarding hide/unhide

For any hide/unhide action to work, this action must be triggered after the tab is selected. The reason for this is the fact that this solution works in the way that it hides all fields NOT in the array for the selected tab and shows all fields in the array.
 
When selecting a tab, all "custom" hide/unhide will be overridden.
 
For now, add a call to your function at the bottome of the function "selectTab", and i will try to post an updated version that can "carry" a function to execute for each tab.
 
Alexander

Posted 25-Jan-2011 by Alexander Bautz
Marilyn

Only four tabs?

Alex,
 
GREAT solution!  It solved an ongoing problem for me.  The only questions I have is that I cannot get it to do more than four tabs.  Am I doing something wrong?
 
Thanks!

Posted 27-Jan-2011 by Marilyn
Alexander Bautz

Only four tabs?

Hi,
Short answer: Yes :-)
 
Look over the syntax on the "tabConstructor" and ensure the FieldInternalNames of your fields are correct.
 
Alexander

Posted 28-Jan-2011 by Alexander Bautz
Marilyn

Only four tabs?

Thanks.  I thought it was all correct, but apparently not.  Working now. (and it's AWESOME!) :-)
 
 

Posted 28-Jan-2011 by Marilyn
OlegO

Tabs from Web UI

I can offer better solutions for tabs http://www.virtosoftware.com/sharepoint-list-form-extender.aspx 1. Creating own Forms (View, Edit, New Item) for Custom, Task, Calendar, Contact and Issue Tracking Lists, Document Library from Web UI. 2. Grouping fields into particular tabs. 3. Quick switching between tabs with no delays. 4. Ability to add as many tabs as you need on each form. 5. Cool and dynamic JQuery Date Picker. 6. Auto complete option (using values of the same or any other List). 7. Using default values (coming in future versions). 8. Optional Tooltip containing hint and field description information (text, links etc.) 9. Autosuggestion settings option enables to auto complete fields when entered text is contained in tabs. 10. Client Validators

Posted 02-Feb-2011 by OlegO
i:0e.t|liveid|0003bffd8f1b5631@live.com

Link broken ?

Can I get the file from another address ?
Alexandre

SP

All fields as first tab

Hi Alex, what if I want to get the All fields as teh first tab?
Thanks for all your help.
 
SP-

Posted 24-Feb-2011 by SP
SP

All fields as first tab

Hi Alex, what if I want to get the All fields as teh first tab?
Thanks for all your help.
 
SP-

Posted 24-Feb-2011 by SP
Alexander Bautz

All fields as first tab

Hi,
This solution will append the "All fields tab" to the rigth - it is no biggie to change this, but you know you can specify which tab to preselect useing the paramenter "selectedTab" in the function call:
 
function init_buildTabbedForm(argObj,selectedTab)
 
Alexander

Posted 27-Feb-2011 by Alexander Bautz
will266

Love It!

Alexander,
 
Your solution is awesome, and eerily timely.  I have a client who wants to have large multi-line text boxes, plenty of them, and doesn't want a long form.  Tabbed forms to the rescue.
 
Works like a charm!
 
Thanks!

Posted 03-Mar-2011 by will266
ians

error

Hi, i've got error :

Message: Unable to get value of the property 'substring': object is null or undefined
Line: 77
Char: 2
 
On this line :
tId = $(elm).attr('id').substring(4);
 
Sharepoint Server 2010 Ent

Posted 09-Mar-2011 by ians
Ian (ians) S.

"Custom fields"

Hi, i've done as You say to add my splitters in fields but seems like i do something wrong.
 
in cwep ( before script ) i've added table with my splitters.
 
in code i've added ( in init_20 ) :
 
                if (fin === 'Title') { // if current field is title, then add my splitter before.
                    $("#_cat1").insertBefore(this.parentNode);
// now adding to fields
                    res["cat"] = $("#_cat1"); // _cat1 is row in my table
                    res["cat"].FieldType = "SPFieldUser";
                    res["cat"].FieldDisplayName = "_cat1";
                }
 
my row becomes hidden and never shows up again :(

Posted 14-Mar-2011 by Ian (ians) S.
Ian (ians) S.

"Custom fields"

Hi, i've done as You say to add my splitters in fields but seems like i do something wrong.
 
in cwep ( before script ) i've added table with my splitters.
 
in code i've added ( in init_20 ) :
 
                if (fin === 'Title') { // if current field is title, then add my splitter before.
                    $("#_cat1").insertBefore(this.parentNode);
// now adding to fields
                    res["cat"] = $("#_cat1"); // _cat1 is row in my table
                    res["cat"].FieldType = "SPFieldUser";
                    res["cat"].FieldDisplayName = "_cat1";
                }
 
my row becomes hidden and never shows up again :(

Posted 14-Mar-2011 by Ian (ians) S.
Ian (ians) S.

+

... But shows in "all fields" page
 
p.s.
And i really dont know why my messages posted twice :(

Posted 14-Mar-2011 by Ian (ians) S.

+

... But shows in "all fields" page
 
p.s.
And i really dont know why my messages posted twice :(

Posted 15-Mar-2011 by
Alexander Bautz

Answer: "Custom fields"

Hi,
This example shows how to add a custom &lt;TR&gt; before the Title-column and "use" it in a tab.
 
Insert this code in the top of the CEWP code.
[sourcecode language="javascript" ]
fields=init_fields_v2();
var buffer = [];
 buffer.push("<TR id='MyCustomTR' FieldType='SPFieldUser' FieldDispName='MyCustomTR'>");
 buffer.push("<TD class='ms-formlabe'l vAlign='top' width='190' noWrap>");
 buffer.push("<H3 class='ms-standardheader'><NOBR>My custom splitter</NOBR></H3>");
 buffer.push("</TD>");
 buffer.push("<TD class=ms-formbody vAlign=top width=400>");
 buffer.push("My custom value");
 buffer.push("</TD>");
 buffer.push("</TR>");
$(fields['Title']).before(buffer.join(''));
fields['MyCustomTR']=$("#MyCustomTR");
[/sourcecode]
 
Add "MyCustomTR" as a FieldInternalName in the tabConstructor for your preferres tab(s).
 
Ask again if you have any questions
 
Alexander

Posted 15-Mar-2011 by Alexander Bautz
Ian (ians) S.

Thanks for help :)

I've added your code exactly as it is before cwep with tabs. "Fake" field appears before title field, but still not hiding on tab change, no errors appears and 'MyCustomTR' was added to tabConstructor.

Posted 17-Mar-2011 by Ian (ians) S.
Ian (ians) S.

fields object

I've added watch to fields object, and MyCustomTR does not appear there.

Posted 17-Mar-2011 by Ian (ians) S.
Alexander Bautz

Answer: "Custom fields"

You should put it in the same CEWP as the tabs-code. Put it in between line 03 and 04 in the CEWP code above.
 
Alexander

Posted 17-Mar-2011 by Alexander Bautz
Ian (ians) S.

Its working!

Thank You so much! :)

Posted 18-Mar-2011 by Ian (ians) S.
Mario

TabStyle

Hello Alexander,
 
Can you give a guick example how to add TabStyle.
Can I add a Class?
 
Kind regards,
Mario

Posted 12-Apr-2011 by Mario
Rafael

The link appears to be broken

I get an error when trying to download the TabsForSharePointForms.js file.  Is there any way to get an updated link?
 

Posted 14-Apr-2011 by Rafael
Mark Miller

The link appears to be broken

Rafael - The link works for me. Are you sure it's not blocked on your end by corp because it's a javascript file? -- Mark

Posted 14-Apr-2011 by Mark Miller
Alexander Bautz

RE: TabStyle

Hi,
Sorry for the late reply, but until this friday there was no alerts sendt out for new replies - i have subscribed and will now follow up on all my articles :-)
 
The answer:
The "tabStyle" parameters must be passed as "inline css". There should not be much of a problem to include a "tabClass" paramenter if you look at the code and search for "tabStyle" to see how it works.
 
Alexander
 
 
 
 

Posted 15-May-2011 by Alexander Bautz
Brian

tabs for forms in different lists..

Alexander,
 
This is an awesome tool.  Just wondering, can you use this for forms that are contained in separate lists?  for example, i have 3 lists; a client list, product list, and a calendar list.  I want to create one form that i can use to add information to all three lists..   Can this be done?

Posted 09-Jun-2011 by Brian
Alexander Bautz

RE: tabs for forms in different lists..

Hi,
This is not possible using this tool, sorry.

Alexander

Posted 09-Jun-2011 by Alexander Bautz
Brian

tabs for forms in different lists..

Alexander,
 
This is an awesome tool.  Just wondering, can you use this for forms that are contained in separate lists?  for example, i have 3 lists; a client list, product list, and a calendar list.  I want to create one form that i can use to add information to all three lists..   Can this be done?

Posted 09-Jun-2011 by Brian
Brian

oops.. sorry..

hit refresh by accident..  Do you know of anyway of doing this?

Posted 09-Jun-2011 by Brian
Alexander Bautz

RE: tabs for forms in different lists..

No, sorry. The only way i see is to "crete" a custom form in HTML an javascript, but I can't see any quick fixes.
 
Alexander

Posted 09-Jun-2011 by Alexander Bautz
Tom

Jquery not loading and no errors

I am attempting to use this code in a meeting workspace, and for about 6 hours have debugged everything and it does not load.
Any help would be great
Script is at the bottom of the form
jquery-1.4.4.min.js is is accessible via a browser from all locations I have uploaded.
It just will not load I do have it running in another site with no issues.
its like its being blocaked even though there is no other scripts being loaded.
 
Help

Posted 16-Jun-2011 by Tom
Marc

Will this work with a custom list form

I have a custom list form that I created in SP Designer 2007 and want to apply these tabs to. Is that possible. If I add the CEWP to the web part page containing the custom form, I dont see any tabs.

Posted 29-Jun-2011 by Marc
Alexander Bautz

RE: Jquery not loading and no errors

Hi,
Sorry, but i missed your comment. Are you still having trouble?
 
Alexander

Posted 30-Jun-2011 by Alexander Bautz
Alexander Bautz

RE: Will this work with a custom list form

It could work, but requires some customization. Look at this post for some input: <a href="http://sharepointjavascript.wordpress.com/2010/01/25/how-to-use-these-scripts-in-a-customized-form/">How to use these scripts in a customized form</a>
 
Alexander

Posted 30-Jun-2011 by Alexander Bautz
Matt Guiden

Form Validation

Hi Alex, This works great and I thank you for the time and effort you put into it. I do have a question though. It seems that highlighting tabs with required fields only works on the first 2 tabs. I was just wondering if there was something I missed in the CEWP code, or if there is something I can change in the javascript file itself. Once again, thanks for the excellent code.

Posted 28-Sep-2011 by Matt Guiden
Matt Guiden

Form Validation Edit

Hi Alex, About my previous comment, it seems it's only for required SPFieldUser fields that it's not highlighting the tabs. Thanks.

Posted 28-Sep-2011 by Matt Guiden
Mario

Combining BuildHeadingsFromArray.js

Hello Alex,
 
We like to combine TabsForSharePointForms with BuildHeadingsFromArray.
But including the last one breaks the hiding of the fields onload and hides the headings on tabselected.
 
Please advise.
Kind regards,
Mario

Posted 12-Oct-2011 by Mario
Alexander Bautz

RE: Form Validation Edit

Hi,
Sorry for the delay. It should be fixed now. Please test the latest version (v2.3).
 
Alexander

Posted 12-Oct-2011 by Alexander Bautz
Alexander Bautz

RE: Combining BuildHeadingsFromArray.js

Hi,
Unfortunately there were a bug in the description for the "BuildHeadingsFromArray-script".
 
The correct name of the headings in the fields-object is like this:
For a field added above a column:
headingBefore_FieldInternalName
For a field added below a column:
headingAfter_FieldInternalName
 
Replace the text "FieldInternalName" with the correct internal name for your field.
 
Use these names in the array of fields in your tabs and you should be good to go.
 
Alexander

Posted 12-Oct-2011 by Alexander Bautz
Mario

Hide tabs on permission or NO fields

Hello Alexander,
 
We use this script in combination with sharepointboost's column permissions. This makes it possible to hide certain columns for certain person/groups.
Do you think it is possible to get the tab hidden when NO fields are present within the tab (for a person/group)?
 
Kind regards,
Mario

Posted 13-Oct-2011 by Mario
Alexander Bautz

RE: Hide tabs on permission or NO fields

Hi,
Sorry, but i do not know sharepointboost's solution and do not know how to check the permission to integrate it here.
 
Alexander

Posted 13-Oct-2011 by Alexander Bautz
Mario

Hide tabs on permission or NO fields

Hello Alexander,
 
My thought was not to check the permissions but to see if the fields are available (present). And if no field in a tab is present don't show the tab.
 
Would this be a way to go?
 
Kind regards,
Mario

Posted 14-Oct-2011 by Mario
Alexander Bautz

RE: Hide tabs on permission or NO fields

Hi,
Yes, this is possible. Append this to the CEWP
 
var found;
$.each(tabConstructor.tabs,function(i,obj){
 found = false;
 $.each(obj.fields,function(j,fin){
  if($(fields[fin]).length===1){
   found = true;
  }
 });
 if(!found){
  $("span[title='"+obj.mouseOver+"']").remove();
 }
});
I did not build in any ID in the tabs so we must identify it by the text in the attribute "mouseover". Though this works if the mouseover is unique, you should modify the code to add an ID to the tab-span and use the ID to identify the span.
 
Aløexander

Posted 14-Oct-2011 by Alexander Bautz
Alexander Bautz

A better solution

Hi,
I revised the function - this one goes BEFORE the call to init_buildTabbedForm
 
var found;
var trimmedArr = [];
$.each(tabConstructor.tabs,function(i,obj){
 found = false;
 $.each(obj.fields,function(j,fin){
  if($(fields[fin]).length===1){
   found = true;
  }
 });
 if(found){
  trimmedArr.push(tabConstructor.tabs[i]);
 }
});
tabConstructor.tabs = trimmedArr;
 
 
It removes the tab before it is drawn.
 
Alexander

Posted 14-Oct-2011 by Alexander Bautz
Mario

Re: Hide tabs on permission or NO fields

Hello Alexander,
 
When I put the first option after the call to init_buildTabbedForm
The tabs are still shown.
When I put either before the call to init_buildTabbedForm I get an error:

Message: 'fields' is undefined
Line: 1136
Char: 3
Code: 0
Which is the following line:   if($(fields[fin]).length===1){
 
Please advise,
Kind regards,
Mario

Posted 16-Oct-2011 by Mario
Alexander Bautz

RE: Re: Hide tabs on permission or NO fields

Hi,
Sorry, I forgot one line... Add this line at the top of the script tag - before the new section and the call to "init_buildTabbedForm":
fields = init_fields_v2();
 
Alexander

Posted 17-Oct-2011 by Alexander Bautz
Mario

Hide tabs on permission or NO fields

Hello Alexander,
 
Works like a charm. Thanks a lot.
 
Kind regards,
Mario

Posted 17-Oct-2011 by Mario
Mario

Combining Dynamic expand/collapse fields or array of fields

Hello Alexander,
 
We want to combine Tabs with the "Dynamic expand/collapse fields or array of fields". Either the multi select or the single choice version.
But the onload function where the script needs to hide the Target fields is not working:
// Hide all onload
var arrToHide = [];
arrToHide = arrToHide.concat(arrRed,arrBlue);
toggleArr(arrToHide,true);
 
Probably because the function is conflicting with the Tab script that wants to show the fields in the tabs.
 
Can you advise how to overcome this?
 
Kind regards,
Mario

Posted 18-Oct-2011 by Mario
Vandana

Workflows

Will workflows work normally on Tabbed SharePoint forms?

Posted 19-Oct-2011 by Vandana
Alexander Bautz

RE: Combining Dynamic expand/collapse fields or array of fields

Hi,
These two solutions will conflict as both of them are showing and hiding fields without consern for the other solution. For this to work i guess you will have to modify both scripts to learn them to play together.
 
You must see what you can make out of it, but i guess you could make use of the "clickFunction" introduced in v2.1 - you find details here.
 
Alexander

Posted 20-Oct-2011 by Alexander Bautz
Alexander Bautz

RE: Workflows

Hi,
This is pure cosmetics and does not alter the form in any way. Workflows will not be affected.

Alexander

Posted 20-Oct-2011 by Alexander Bautz
Djamel

Can we use this for WebPart List ?

Hi
 
Is it possible to use this solution with webpart page ?
 
Thanks again.
 
Djamel

Posted 16-Nov-2011 by Djamel
Mario

Hide tabs on permission or NO fields: Attachments

Hello Alexander,
 
As replied earlier the "Hide tabs on permission or NO fields" code works OK.
But it always hides the "Attachments" tab.
Maybe the "attachment" field is not recognized as a field in the code?
 
Kind regards,
Mario

Posted 07-Jan-2012 by Mario
Surya

Download links is broken : the code for the file “TabsForSharePointForms.js” from this location

The below link is broken
 
Download the code for the file “TabsForSharePointForms.js” from this location
 
 

Posted 16-Feb-2012 by Surya
Mario

Hide tabs on permission or NO fields: Attachments

Hello Alexander,
 
Sorry to ask you again.
The "Hide tabs on permission or NO fields" code works OK.
But it always hides the "Attachments" tab.
Maybe the "attachment" field is not recognized as a field in the code?
 
Kind regards,
Mario

Posted 17-Feb-2012 by Mario
Chad

Tabs do not appear

No matter what I do, nothing will appear. I've added the code in to a CEWP after the form. The form is unmodified. I've followed all the directions about internalFieldNames. I did notice that there's a '[' next to "tabConstructor = tabs:" that doesn't appear to be closed off. I tried closing it but it only gave me more errors. Using Sharepoint 2010 Foundation but I'm assuming that doesn't matter. Thankyou for developing this but please help before I put my foot through something.

Posted 22-Mar-2012 by Chad
Earl Libby

Problems rendering with IPAD

While Safari renders corrently with Apple products other than IPAD,   with the IPAD the edit and new form render correctly but the display form does not.  The display form renders with the copyright at the top of the form and the rest is all white space with no scrolling -- this is with the dialog box-- have not tested without using the dialog box.

Posted 07-May-2012 by Earl Libby
Mario

bautz.homeserver not available

Hello Alexander,
 
Your server is not available.
 
Kind regards,
Mario

Posted 01-Oct-2012 by Mario
Alexander Bautz

RE: bautz.homeserver not available

Hi, You find all files here: http://spjsfiles.com/index.php?dir=SharePoint+JavaScripts%2F Alexander Bautz

Posted 04-Oct-2012 by Alexander Bautz
Brian

Forms Designer

We use SHarepoint Forms Designer (spform.com) in our solutions. It allows to create rich dynamic forms with tabs also

Posted 07-Oct-2012 by Brian
Mario

Autocomplete for SharePoint people picker only works on first tab

Hello Alexander,
 
We want to use this togetether with "Autocomplete for SharePoint people picker"
But the autocomplete only works on the first tab.
 
Please advise.
 
Kind regards,
Mario

Posted 08-Oct-2012 by Mario
Hank Kh

Little bit easier way

This is great, but when you need to implement this frequently on integration projects or developing your own system it becomes quite boring. Becouse of that we developed SharePoint Forms Designer. Spend few minutes to look http://plumsail.blogspot.ru/2012/11/customization-sharepoint-forms-with.html http://spform.com/

Posted 21-Nov-2012 by Hank Kh
Alexander Bautz

RE: Little bit easier way

Hi, This solution is intended for those without access to the server side. Your solution looks nice, but it must be installed on the server, and thus it's not accessible for everyone. You find another client side solution here: http://sharepointjavascript.wordpress.com/2012/08/13/dynamic-forms-for-sharepoint-now-with-tabs/ Alexander

Posted 21-Nov-2012 by Alexander Bautz
Hank Kh

RE: RE: Little bit easier way

We have Sharepoint Forms Designer Online, it is sandbox solution, you don't need to install it as full trust, you just need to be Site collection administrator. So any user with permissions not less than site collection admin can use it. Anyway, when it is installed, any user with manage lists permissions can customize form just by drag and drop. http://spform.com you can install and try it in few minutes.

Posted 21-Nov-2012 by Hank Kh
neeraj

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

hi alex, i am neeraj and i want built the same functionality in my form but unfortunately this link "Download the code for the file “TabsForSharePointForms.js” " is not working for me. Can you please provide me any other location for where i can download this file. thanks in advance.. :) Neeraj

Posted 12-Mar-2013 by neeraj
neeraj

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

hi alex, i am neeraj and i want built the same functionality in my form but unfortunately this link "Download the code for the file “TabsForSharePointForms.js” " is not working for me. Can you please provide me any other location for where i can download this file. thanks in advance.. :) Neeraj

Posted 12-Mar-2013 by neeraj
Panoone

Download link is broken

Unable to load destination page or domain.

Posted 07-Apr-2013 by Panoone
chakradhar

Fields are not hiding after clicking the tab

HI Alex,
 
I followed the same steps .if i click on any tag its showing all the fields.only mentioned fields are not enable after clicking the tag
 
Here is my code
 
 <script type="text/javascript"> 
 var tabConstructor = {tabs:[{name:'First Tab',fields:['Title','field1','field2'],mouseOver:'This is the first tab',tabStyle:''}, 
                             {name:'Second Tab',fields:['field3','field4'],mouseOver:'This is the second tab',tabStyle:''}, 
                             {name:'Third Tab',fields:['field5','field6'],mouseOver:'This is the third tab',tabStyle:''}, 
                             {name:'Attachments',fields:['attachments'],mouseOver:'',tabStyle:''}], 
                       settings:{ 
                         viewAllFields:{show:false,name:'All fields',mouseOver:'This tab shows all fields',tabStyle:''}, 
                         orphanFields:{show:false,name:'...',mouseOver:'All orphan fields',tabStyle:''}, 
                         breakTabRowAt:5, 
                         hoverTabColor:'#FFF68F', 
                         selectedTabColor:'#B9D3EE'}}; 
                           
 init_buildTabbedForm(tabConstructor,1); 
 </script>
 
 
Its burning to me.urgent
Need help on this!
 

Posted 18-Jun-2013 by chakradhar
tabbing

People Picker

when I add the tabs code the people picker no longer works properly.  I can open the select person dialog box and select the person but when I hit add or save it doesnt populate the field any longer...Ideas?

Posted 24-Jul-2013 by tabbing

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: