Category Archives: Tabs

Dynamic Forms for SharePoint v3

Change log
Always test a new version to see that it works as expected before adding it to a production environment.

June 19. 2014
v3.352 has these changes:
Fixed the following that went missing in v3.350:

  • Added back the content type choice as trigger and selectable field.
  • Added back the file name field as trigger and selectable field.
  • Added back the additional lookup column fields to the DispForm configuration.

June 10. 2014
v3.351 has these changes:

  • fixQuirkyLookup: Added title attribute to the select for compatibility with SPServices
  • Added back the Attachment field as this had disappeared from the field select in the tabs in v3.350.

June 7. 2014
v3.350 has these changes:

  • The method for reading the fields for the list in the configuration GUI has changed. I now query the list schema for the fields rather than finding them from the current form. This means that you can now configure DFFS for a form with content types without having to add all fields to the default content type. Please note that only the fields in the active content type will be available to the script when NewForm, DispForm or EditForm is rendered.
  • Lookup columns containing more than 20 items in SP 2007 / 2010 using Internet Explorer (quirky lookup columns) can now be used as triggeres. If you are NOT using SPServices cascading dropdown you must tick “Fix quirky lookup columns” in the Misc tab.
  • Triggers are now organized in more “optgroups” to clarify how they trigger (on load, on save etc.)
  • The “doSetFieldValue” function have been changed to support setting Cascading dropdown value using the “Set field value” action in the rules. Please update the cascading dropdown plugin to v3.24 or above.
  • You can now manually specify the location of the DFFS configuration list. This may come in handy when using DFFS in a list template. See separate heading in the bottom of this article.

May 8. 2014
v3.343 has these changes:

  • Changed how the plugin tabs are shown if the plugin is not loaded: the tab will contain a link to download it.
  • Changed how the configuration is done for the resource management plugin.
    Setup is now done in a separate tab and you must remove any configuration from the Custom JS section in the Misc tab.

May 1. 2014
v3.342 has these changes:

  • Changed how the SPFieldMultiChoice events are triggered. It was initially on “click” and now it is on “change”.
  • Added “is changed” trigger on SPFieldChoice, SPFieldMultiChoice and SPFieldBoolean.
  • Changed a little bit on the “is changed” comparison to catch change BACK TO what was the initial value when the form was loaded.

April 25. 2014
v3.341 has these changes:

  • Navtabs now operates in a circular motion: When passing the last tab, it will start from the first tab again.
  • Added check to see if the attachment field in not part of any tab. If so, the attachments will show in all tab.
  • Added option to disable individual rules by a checkbox in the top right corner of each rule.

Only “dffs_min.js” is updated.

April 20. 2014
v3.340 has these changes:

  • Fixed setQuirkyLookup so that getFieldValue will pick up the correct selection if you use it in PreSaveAction.
  • Added support for the new version of SPJS Resource Management: http://wp.me/p3eibN-1sv
  • Moved password to Misc tab.
  • Displayed the plugin version used for the various plugins like vLookup, Cascading Dropdowns etc.

April 7. 2014
v3.336 has these changes:
Changed the offset of the custom edit item image in the ribbon for SP2013 as Microsoft uses different image maps in 365 and on premises install of SharePoint – resulting in the wrong image being displayed.

April 3. 2014
v3.335 has these changes:
Fixed bug related to “orphans tab” not working after update in v3.333. Please note that the id of the tab <lt> has changed from “tab_orphans” to “dffs_tab_999”. This affects any custom code you may have used to style or attach events to this tab.

March 22. 2014
v3.334 has these changes:
Changed an alert for when you are trying to hide the active tag by a rule.

March 21. 2014
v3.333 has these changes:

  • Fixed compatibility with SP 2007 and IE8 running on Windows XP.
  • Changed / fixed tab selection by url (?sTab=X), by cookie or when one or more tabs are hidden by rules.
  • Fixed a bug in showing field description with readonly fields when the field description has a trailing <br>.
  • Fixed a bug with using “selected tab index” as trigger in rules (the selected tab index was not always updated on click.

March 17. 2014
v3.330 has these changes:
Fixed a bug from v3.329 where the form was hidden if you had not configured tabs.

March 16. 2014
v3.329 has these changes:
Fixed initial tab selection if the primary tab is hidden by a rule. In this scenario you would have no selected tab, but the form would still be visible. The code will now try to select the next visible tab. If no tabs can be selected, the form i hidden.

March 15. 2014
v3.328 has these changes:

  • Fixed “Selected tab index” in Misc tab. This was disabled by the cookie introduced in v3.320. The selection will still be remembered by the cookie, but on the first visit to this tab in this browser session it will preselect the tab from the Misc tab.
  • Added option in the Misc tab to control the use of cookie for remembering the selected tab.
  • Disabled the “selected tab” cookie for NewForm.

v3.326 has these changes:
Changed dffs_PreSaveAction() to be able to return false to abort the save process. Returning true or nothing will proceed with the save.

v3.325 has these changes:

  • If there is a function “dffs_Ready()” in the CEWP or in the Custom JS, this will be called when the DFFS solution has finished loading.
  • Added “is changed from initial value” trigger to choice columns as this was missing.
  • Added MUI support to the tab navigation buttons.

March 5. 2014
v3.323 has these changes:
Fixed a random error message: [DFFS: spjs.dffs.loadAndApplyRules]: Configuration error.

March 4. 2014
v3.322 has these changes:
Added back the missing “extra” edit item button to the left of the “Cancel” button. This had disappeared in v3.20.

v3.321 has these changes:
Removed a trailing comma in an object (introduced in v 3.32) that broke the script in IE8.

March 1. 2014
v3.32 has these changes:
Fixed

  • Error in description for the trigger “If logged in user is in group with ID”.
  • Duplicated edit button in some situations.

Enhancements

  • Added alert to catch use of “And these rule indexes are true” looking at a rule that has a higher index than the current rule.
  • Added option to turn on/off the “Fix quirky lookups” feature introduced in v3.3. You find the option in the Misc tab.

New features

  • Added a cookie to remember selected tab trough page refresh.
  • Added new trigger “is changed” for text / number fields. This triggers on any change in the field. The existing trigger with the same name has been renamed to “is changed from initial value” (existing configurations will be automatically updated).
  • New config options for cascading dropdowns: Autofill and Clear invalid. Please note that you must update the cascading dropdown solution separately for the new features to be supported.
  • Added options to show navigation buttons to switch tabs. You find the setting in the Misc tab.

February 17. 2014
v3.315 has these changes:

  • Added “Run these functions” feature to DispForm.

February 13. 2014
v3.314 has these changes:
Attempted to fix an issue with having multiple triggers on “Selected tab index”, where only the last rule applied.

January 29. 2014
v3.313 has these changes:
Fixed a bug in “setQuirkyLookup” for SP2007 as the id of the hidden input field contained characters that needed to be escaped.

January 25. 2014
v3.312 has these changes:

  • Small fix for dialog size when adding attachments.
  • Triggering on date fields now properly supports “Equal to” = [empty string].
  • Fixed bug that halted the script when using ID as trigger in EditForm.
  • Fix for timing issue in SP 2013 that resulted in triggers not picking up the correct value.
  • Added a handful of missing semicolons and minified the code using packer by Dean Edwards.

You can now use the minified version of dffs.js. Pick it up in the download section.

January 21. 2014
v3.311 has these changes:

  • Removed check for fields that were set as required in the list settings as this produced an error in “spjs.dffs.clear_Mandatory”.
  • Fix for SP 2007 compatibility for the “Fixes the quirky dropdown select” added in v3.30.
  • Attempted to fix the randomly missing scrollbar issue in dialog boxes.

January 4. 2014
v3.31 has these changes:

  • Added option to fix the dialog to the top of the screen to prevent it from jumping around when you change tabs. This applies to SP 2010 / 2013 and can be found in the Misc tab.
  • Addressed an issue with spjs.dffs.clear_Mandatory and fields set as requires in the list settings.

December 21. 2013
v3.3 has these changes:

  • Added operator “is changed”. This is used to trigger a rule if the field value has changed after the form was loaded.
  • Added trigger “Compare logged in user with people picker field”. This can be used to trigger a rule if the logged in user is or is not selected in a given people picker field.
  • Fixed tooltip left adjustment to prevent the text form rendering outside the screen when using side-by-side.
  • Added z-index:1001 to the tooltip container to fix a rendering issue in SP2013 where some elements shined trough the container.
  • Tried to fix an issue with setting a people picker to readonly in SP2013 and getting a “field is not ready” error. I could not reproduce this error and therefore cannot promise this will fix it.
  • Fixes the quirky dropdown select in Internet Exploree used for a single lookup column when there are more than 20 items in the lookup source list (SP2007 and SP2010).

You must update both the “DynamicFormsForSharePoint_v3.js” and the “default.css”.

Please note
I no longer have access to a SP 2007 environment and therefore I cannot guarantee compatibility with SP 2007. If you use this solution with SP 2007 you must add this variable to the page for compatibility with v3.3+:

var _spPageContextInfo = {"pageListId":"{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"};

You must change the string “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx” with the list GUID of the current list. You should be able to find it by viewing the page source and searching for “ctx.Listname” (SP 2007).

November 28. 2013
v3.262 has these changes:
Fixed bug with attachments due to a function changing the id “idAttachmentsRow”.

v3.261 has these changes:
Fixed a bug in v3.26 regarding L_Menu_BaseUrl.

November 24. 2013
v3.26 has these changes:
Added a check for a function named “dffs_PreSaveAction” when saving the form. Use this function to add “pre save code” like this (the function must NOT return anything):
function dffs_PreSaveAction(){
// do stuff before saving
}
November 21. 2013
v3.25 has these changes:
Yet another fix for detecting folder content types and summary tasks in a tasks list.

November 17. 2013
v3.23 has these changes:

  • Better detection of “New folder” to prevent the DFFS code from triggering.
  • Tooltip now supports vLookup columns that use “Hide form label”.
  • Set field value now updates the value in readonly fields.

November 3. 2013
v3.222 has these changes:

  • Removed the paperclip in front of the “Attachments” formlabel as adding attachments is not possible in DispForm.
  • Fixed undefined variable “isNewForm” > “spjs.dffs.data.isNewForm”.
  • Added description to the tooltip section: If you use HTML code, do not add line feeds using Enter, add HTML code as a continuous string.
  • Hide save item btn now works both ways: No = show button.
  • Added option to hide edit item btn in DispForm. This works like the “Hide save item button”.

October 31. 2013
v3.221 has these changes:

  • Fixed unnecessary escaping og double quotes in object formatted strings (bug introduced in 3.22).
  • Fixed missing tabs in SP2013 Document library.
  • Fixed bug where sometimes the config is not recognized due to wrong case in the URL.

October 28. 2013
v3.22 has these changes:
Replaced a custom stringify method with the standard JSON.stringify. This because the custom method failed in some rare cases. This change will affect SP2007 when using IE. Because the master page forces Document Mode: Quirks, you must use another browser, or force the Document mode to IE8 using the developer console.

October 27. 2013
v3.21 has these changes:

  • Edit item button will not show in DispForm if the user does not have edit access.
  • Set Field Value now supports all available properties from the user list in SharePoint (not the user profile service). Use it like this: {currentUser:Prop}.

October 21. 2013
v3.20 has these changes:

  • Side-by-side: Label position can now be set to “Hidden”, “Top” or “Left”.
  • You can add attachments by clicking the paperclip in front of the Attachments label.
  • Added id attribute to the table row in this format: dffs_[FieldInternalName]. You can use this to address individual fields using custom code.
  • Comparing field values against other fields in the form is now supported for number columns (and text columns containing numbers)
  • Fixed an issue with “Set field value” using a value pulled from another field when the first character is not “{“.
  • “Set field value”: {timestamp} – see details below.
  • “Set field value”: {currentUser} and {currentUserEmail} – see details below.
  • “Set field value”: Prepend or append to existing text – see details below.
  • Creating a new folder now bypasses the DFFS solution.
New features in the “Set field value” section

Timestamp:
Use {timestamp} to add a timestamp to a field.

Current user
Use {currentUser} or {currentUserEmail} to add the user name or the email (malito link) in a field.

Prepend or append to existing text in a multi line text field:
Prefix the string with “prepend:” or “append:”. Here is an example:

prepend:{timestamp} - {currentUser}: {Log}\n************\n

September 18. 2013
I have updated to v3.15 with these changes:

  • Initially hidden field can not be made visible by including them in a tab – you must use a rule.
  • Fixed set field value for multiline textfield

September 13. 2013
I have updated to v3.14 with these changes:

  • Fixed bug in clearing / reversing rules for unselected choice columns. This bug would incorrectly trigger the rule when clicking another option in the choice columns.

September 12. 2013
I have updated to v3.13 with these changes:

  • Fixed typo “dropdodwns”
  • Changed the CSS file to make the form look the same in DispForm and EditForm when using side-by-side.
  • Added trigger for “Selected tab index.
CSS when using side-by-side

Insert this CSS in the Custom CSS section in the Misc tab if you want to:

stretch the outer table for all rows of side-by-side fields

.sbs_OuterTable{
   width:100%;
}

stretch the outer table for a specific row of side-by-side fields

#sbs_OuterTR_1 .sbs_OuterTable{
   width:100%;
}

sbs_OuterTR_1 the highlighted number represents the side-by-side index used in the setup.

control each field when using side-by-side

.sbs_OuterTable{
   width:auto;
}
#sbs_Field_YourFieldInternalName{
width:300px;
}
Trigger “Selected tab index”

This trigger is used for triggering rules when clicking on a tab. Please note that the rule will be reversed when it does NOT match.
IMG

Tip

Lets say you want a field to trigger a rule for one tab only. To achieve this, first create a rule using “Selected tab index”, but leave all “actions” empty (no required fields etc.).

Now create the rule for the trigger field and insert the rule index of the “Selected tab index rule” in the “And these rule indexes are true”.

You now have a rule that triggers on a field, but only applies for this specific tab.

August 19. 2013
I have updated this solution to v3.1 withe these changes:
New features:

  • Added support for Cascading dropdowns – see separate article for detail.
  • Added option to enter a license code to remove the PayPal-logo in the top of the GUI.

Bugfixes:

  • Removed “Set field value” from the DispForm configuration.
  • Fixed a bug preventing “Set field value” using [Today].
  • Fixed a bug when triggering a function in a rule on load.

You must update both the *.js, the *.css file and spjs-utility.js.


August 13. 2013
Second attempt with v3.02: fixes a bug preventing the user from saving the first time the configuration is added.

How to remove the text “Unlicensed version” from the GUI?

To obtain a license code, please go to this page: Obtain License Code, select the license type and pay using PayPal. I will send you a license code as soon as i receive the receipt from PayPal.

Overview

This is a solution for creating dynamic forms from out of the box SharePoint forms (preferably without content types). You can create rules that control whether fields are required or optional, visible or hidden, editable or read-only. You can also create tabs that you can target specific SharePoint users or groups, and you can add headings and rich tooltips for fields in the form.

You can link directly to a specific tab using this URL format:
…/NewForm.aspx?sTab=2
…/DispForm.aspx?ID=[an existing id from your list]&sTab=2
…/EditForm.aspx?ID=[an existing id from your list]&sTab=2

The GUI:
IMG

Previously articles in this series
New in v3

I have done a major overhaul of the code, fixed some bugs and added new features:

  • Radio buttons can now be arranged vertical.
  • When arranging multichoice or radio buttons vertical, the “fill in” will line up correctly.
  • Fixed width of select when using “Arrange multi lookup columns vertical” in SP 2007.
  • Custom CSS and JS: Small fix to try to avoid occasional errors.
  • Export and import of settings are now in place.
  • A copy of the last good configuration is automatically kept, and can be restored by a click of a button if you “break” it.
  • Backwards compatibility is now better. Please note that downgrading to an older version will require you to restore a backup of the original setup.
  • Changed the rule builder and added more fine grain controls of:
    • Optional fields and required fields
    • Visible fields and hidden fields
    • Editable fields and read-only fields
    • Visible tabs and hidden tabs
    • Visible headings and hidden headings
  • “Display this message” and “Alert this message” is now present in DispForm.
  • You can now control who sees the enter setup button.
  • You can now control who sees the orphan fields tab.
  • You can now distribute tabs over multiple lines and not only 2 as before.
Manually specify the location of the DFFS configuration list

Why do it:
If you want to use DFFS in a site template and share the configuration between all the sites created from that template.

The configuation is stored using the list name from the URL in lower case letters as “unique identifier” like this:
/lists/tasks/newform.aspx
This means you cannot configure DFFS for a list with the same URL name in a different site without them sharing this configuration.

How is it done:
Add this variable to the CEWP or HTML Form Web Part code (above the script tag that loads the DFFS script):

var dffs_configListBaseUrl = "/RelativeUrlToTheSite";

Tip:
You don’t have to put the shared configuration in the root site, you can add a new, empty subsite to hold the configuration list, but you must ensure all users have read access to this site.

Repetition of how to set up this solution

Step one
Download the latest version of the DFFS solution files from here. This includes the *.js file, *.css file and the gradient.zip. This last one should be unzipped before uploading to the file location (see below).

Step two
Download the latest version of spjs-utility.js from here.

Step three
Download v1.10.x or BELOW of jQuery here. Please note that version 2.x of jQuery does NOT support Internet Explorer 8 or below.

Step four
Put all these files in a standard document library or a folder created using SharePoint designer. Ensure all users have read access to the file location. Do NOT refer these files from spjsfiles.com as this server is not rigged to serve these files “live”.

Step five
Download the files “CEWP_example.txt” and “CEWP_Overlay_Example.txt” from here. Edit the script links (src) in “CEWP_example.txt” to point to the files stored locally. I repeat that you should NOT refer these files from spjsfiles.com.

Add the code to NewForm, DispForm and EditForm of the lists where you want this solution activated. The “CEWP_Overlay_Example.txt” must be placed ABOVE the form web part, and the “CEWP_example.txt” code must be placed BELOW the form web part.

How to add a webpart to the form page
SharePoint 2007
Go to NewForm, DispForm and EditForm and insert toolpaneview=2 behind the URL in this format:
…/NewForm.aspx?toolpaneview=2
…/DispForm.aspx?ID=[an existing id from your list]&toolpaneview=2
…/EditForm.aspx?ID=[an existing id from your list]&toolpaneview=2

Press Enter and you should be able to add a CEWP to the page. Repeat for all three forms.

SharePoint 2010 / 2013
In the list view, click “List” on the List Tools menu. Then select “Form Web Parts” and pick NewForm, DispForm or Editform from there and add a CEWP to the page. Repeat for all three forms.

I recommend using the Content link option in the CEWP to refer the code. The CEWP code should be put in a text file (txt) or an aspx file and put in the same location as the other files.

If you plan to put the code directly into the CEWP, you should choose the HTML Form Web Part in stead.

Step six
Go to the list and click “Add new item”. Click the little dot in the bottom left corner of the form to enter setup. When entering setup for the first time, the script will create a list to store the configuration. For help in the GUI, hover over the question marks.

Upgrading from a previous version?

You will have to upgrade both the *.js, the *.css file and spjs-utility.js.

As this is a major overhaul of the code, you might have to do some reconfiguring of the rules. In general, all settings are kept, but you now have more fine-grain control of the various settings so some rules might have to be changed.

Make a backup
When entering the setup after loading the new version, go to the “Misc” tab and export the settings by copying the text to a file. This is your backup in case something goes wrong and you have to downgrade to an earlier version. If you must do this, use the backup file and restore it by pasting the text in the text area under “Import settings”. When you have done this, you can load the older version of the script.

Please support the development of this solution by hitting the “beer button” in the top right corner of this page to buy me a few beers.

Use the comment section below let me know if you find find a bug, or you have a question.

Alexander

Dynamic Forms for SharePoint – Now with Tabs

Change log
May 06. 2013
I have released v2.95 – you find it here
February 20, 2013 Updated to v2.70 with these changes:

  • Fixed bug where the tab setup link is missing in initial setup.
  • Added “show field description when readonly” switch under “Misc” section.
  • Added support for SP 2013.
  • Small change to the file default.css to remove form background color in SP 2013 (goes better with the SP 2013 look).
  • Added error handling when using invalid characters in the custom css setup in the heading configuration and including.
  • Added support for rules comparing date columns against other date columns in the form, or validation of empty / not empty date columns.

Read more here


January 13, 2013 Updated to v2.65 with these changes:

Fixes:

  • Validation text was shown multiple times if the rule was triggered repeatedly.
  • When saving the GUI the input values for visible or hidden tabs / headings got the previous rule value if the fields were left blank.
  • Error message in DispForm due to “customValidationMsg” being triggered.
  • Update the css file (note the text “Dynamic Forms for SharePoint v2.65” in the top) to help wrap the tabs better when not using the “Break tabs at index” option.

New features

  • It’s now possible to have a rule check other rules before triggering.

January 4, 2013 Updated to v2.61 BETA with these changes:

  • Set field value had a bug preventing choice fields from being set correctly.
  • Added MUI support for the validation message / alert.

January 1, 2013 Updated to v2.6 BETA with these new features:

  • Option to bypass all rules for selected users or groups (Misc tab).
  • Set date column value like [today], [today]-14 or [today]+14.
  • Tabs now support MUI.
  • Added support for headings (MUI).
  • Changed boolean column behavior to fix issue with hiding tabs.

You must update these files: “DynamicFormsForSharePoint.js” and “default.css”.

Regarding setting a date column to [today]
Not all reginal settings are supported. You will get an alert with instructions if your LCID is not supported.

Headings
You find the headings in the tabs section, and you add them as you do with the fields. Hover over the help icon in the GUI to learn how to set up MUI

Please note that you must update spjs-utility.js to v1.13.


04.11.2012 Updated to v2.51 with these changes:

  1. The form was hidden when no settings were found (first setup) – thus hiding the link to initiate the setup. It was still possible to use ?dfsetup=1 to initialte the setup.
  2. Whan not using TABS in SP2007, you go a javascript error:
    “The value of the property ‘ExecuteOrDelayUntilScriptLoaded’ is null or undefined, not a Function object”

01.11.2012 Updated to v2.5 with these changes:

  • Finally, you can rearrange the order of RTE fields in the tabs.
  • Initial form visibility set to hidden to prevent flashing all fields before applying rules / tabs (display:none is not used because the dialog size would be distorted).

NOTE: You must update both “DynamicFormsForSharePoint_v2.js” and “default.css”.

19.10.2012 Updated to v2.41 with these changes:

  • The action “Set field value” can now pull values from other columns in the current form (in addition to item ID) – as requested by Morten. To include a value from another field, enter the FieldInternalName like this: {Title}.
  • Added trigger “The form is saved”. This trigger will affect the action “Set field value” only.
  • Added password obfuscation as requested by Matthias.

15.10.2012 Updated to v2.4 with these changes:

  • Minimum dialog width (SP2010) set to 700px in default.css.
  • The variable “_spUserId” is changed to “_spPageContextInfo.userId” in SP2010 as some users are missing the “_spUserId” variable in their master page.
  • The edit link was previously only visible for the person who first set up the solution. It is now visible for all users. Protect the settings with the built in password functionality.
  • Added a fix to handle multiple single item lookup columns with more than 20 items in different tabs (in IE). The problem was that the options “dropdown” sometimes did not render.
  • To fix the problem when adding more than 2 rich text or enhanced rich text columns (in SP2007 only) broke the script, I have disabled the ordering of those field types completely. Put them in the top or bottom of the form (using list settings).
  • Added “Is in group trigger”.
  • Added single choice lookup columns as trigger.
  • Added show or hide tabs by rule option.

The changes are in the files “DynamicFormsForSharePoint_v2.js” and “default.css”.


18.08.2012 in v2.3:

  • Added option to show a tab only for members in selected SharePoint groups.
  • Fixed a bug in date columns when you type in the value, in combination with the “alert validation message option”.

15.08.2012 in v2.2:

  • Added option to alert the validation message.
  • Added support for “All fields tab” – to enable, add a tab with no fields.
  • Enabled solid color table background – same color as the selected tab. To disable, remove line 51-63 in the default.css file.

14.08.2012 In v2.1: Changed the “Orphan fields” handling by adding a checkbox “Show orphan fields in a separate tab” in the tabs configuration, ensured compatibility with Christophe’s Easy Tabs and changed the tab position in non-dialog forms in SP2010.


This is a follow up on Dynamic Forms for SharePoint: Production, and describes the new features – including the integration with Tabs for SharePoint forms. Please refer the previous article for an introduction to the solution.

IMG

Some of the changes:

  • Integrated with the Tabs for SharePoint forms solution. You can now rearrange the order of the fields in the tabs (not true for rich text fields).
  • Added option to hide save item button based on a rule.
  • Added option to apply a rule if the current user is not the author of the item.
  • Added option to set a field value based on a rule.
  • Added support for handling the content type selector (hide, read only, set value).
  • Added option to hide the attachments, or set them as read only (hide the “delete link”).
  • Added option to show a validation message when applying a rule.
  • Setting a field as read only now shows the field description as well.
  • Some bugfixes

The solution is still compatible with both SharePoint 2007 and 2010.

Some screenshots

Rule configuration
IMG

Tab configuration
IMG
IMG

DueDate rule
IMG
I have entered a date in the past to demonstrate the validation. Note that the save item button has disappeared.

Complete task rule
IMG
When clicking the “Completed” checkbox, the “FinalNotes” field is set as required, and the label “You must enter a brief statement in the field below.” is shown.

Tabs or Rules – or both

You can decide whether you want to use both features, or just one of them. Simply delete the last rule or tab configuration to disable that module.

Setup

Please refer this article for setup details.

There are one change to the CEWP code as you now have to refer a css-file. You also have to add an image to the same folder as the css file. This is used to add a gradient color to the tabs.

Download the files
Get jQuery here.
Get the Dynamic Forms For SharePoint files here.

Ensure you pick v2.0 or above. The image “gradient.png” must be placed in the same location as the file “default.css”.

You must also upgrade spjs-utility.js. Get spjs-utility.js v1.11 or above here.

The CEWP code:
You must change the “script src” and the “css href” to reflect your locale files.

<link type="text/css" href="https://files.spjsworks.com/files/DynamicFormsForSharePoint/v2.1/default.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://files.spjsworks.com/files/spjs-utility/v1.11/spjs-utility.js"></script>
<script type="text/javascript" src="https://files.spjsworks.com/files/DynamicFormsForSharePoint/v2.1/DynamicFormsForSharePoint_v2.js"></script>
Do you use this solution?

I spend a lot of time developing these solutions. Hit the PayPal button to keep me motivated!

PayPal

Post any bugs or comments below.

Alexander

Tabs for SharePoint forms v2.0

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


This solution is used to “tab” SharePoint forms. If you have a long form, you can group fields together and present them in tabs for a better overview.
IMG

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
  • 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)
  • 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, modify 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

IMG

Add this code block to the CEWP:

&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/Tabs/TabsForSharePointForms.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

var tabConstructor = {tabs:[{name:'First Tab',fields:['InMultipleTabs','Column1','Column2'],mouseOver:'This is the first tab',tabStyle:'',clickFunction:''},
							{name:'Second Tab',fields:['InMultipleTabs','Column3','Column4','Lookup1','MyMultiLookup'],mouseOver:'This is the second tab',tabStyle:'',clickFunction:'secondTabClick(this)'},
							{name:'Third Tab',fields:['InMultipleTabs','Title'],mouseOver:'This is the third tab',tabStyle:'',clickFunction:''},
							{name:'Forth Tab',fields:['Column5','Column6','MyPeoplePicker'],mouseOver:'This is the forth tab',tabStyle:'',clickFunction:''}],
					  settings:{viewAllFields:{show:true,name:'All fields',mouseOver:'This tab shows all fields',tabStyle:'',clickFunction:''},
					  orphanFields:{show:true,name:'...',mouseOver:'All orphan fields',tabStyle:'',clickFunction:''},
					  breakTabRowAt:null,
					  baseTabColor:'#F5F5F5',
					  hoverTabColor:'#FFF68F',
					  selectedTabColor:'#B9D3EE',
					  formBgColor:'#C6E2FF'},
					  clickFunctionShared:'clickFunctionShared(this)'};

function clickFunctionShared(elm){
	var tab = $(elm);
	// This code is run on click on any tab
}

function secondTabClick(elm){
	var tab = $(elm);
	var arrOfFields = tab.attr('fields').split(',');
	alert(&quot;The fields included in the second tab is these:n&quot;+arrOfFields);
}

init_buildTabbedForm(tabConstructor);
&lt;/script&gt;

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:

IMG

New in v2.4:

baseTabColor: Set the default background color for the tabs. See CEWP code for example.

Attachments

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

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:
IMG

Link directly to a tab:

Specify the tab to preselect in the URL like this:
http://*************/Lists/Tabs/NewForm.aspx?sTab=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:
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 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

SharePoint form – Accordion in Tabs

This is a draft/example to keep Steve busy over the weekend 🙂 (see his request here).

To get anything out of this code, you have to read the following articles: Tabs in SharePoint form and Accordion in SharePoint form


Here is the code:

&lt;!-- Date field text size --&gt;
&lt;style type=&quot;text/css&quot;&gt;
.ms-dtinput,.ms-dttimeinput{
	font-size:0.7em;
}
&lt;/style&gt;
&lt;DIV id=&quot;tabs&quot;&gt;
	&lt;UL style=&quot;font-size:12px&quot;&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-1&quot;&gt;Tab 1&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-2&quot;&gt;Tab 2&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-3&quot;&gt;Tab 3&lt;/A&gt;&lt;/LI&gt;
	&lt;/UL&gt;

	&lt;div id=&quot;tabs-1&quot;&gt;	
		&lt;div id=&quot;accordion-1&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-0&quot;&gt;Tab 1 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-0&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-1&quot;&gt;Tab 1 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-1&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-2&quot;&gt;Tab 1 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-2&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;	
	&lt;/div&gt;
	&lt;div id=&quot;tabs-2&quot;&gt;
		&lt;div id=&quot;accordion-2&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-3&quot;&gt;Tab 2 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-3&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-4&quot;&gt;Tab 2 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-4&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-5&quot;&gt;Tab 2 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-5&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;tabs-3&quot;&gt;
		&lt;div id=&quot;accordion-3&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-6&quot;&gt;Tab 3 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-6&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-7&quot;&gt;Tab 3 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-7&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-8&quot;&gt;Tab 3 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-8&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/DIV&gt;

&lt;link type=&quot;text/css&quot; href=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// Array of all fields - format: accordionID|FieldInternalName
arrTabAccordion = ['0|Title','0|Dummyfield1','0|Dummyfield2',
			'1|Dummyfield3','1|Dummyfield4','1|Dummyfield5',
			'2|Dummyfield6','2|Dummyfield7','2|Dummyfield8',
			'3|Dummyfield9','3|Dummyfield10','3|Dummyfield11',
			'4|Dummyfield12','4|Dummyfield13','4|Dummyfield14',
			'5|Dummyfield15','5|Dummyfield16','5|Dummyfield17',
			'6|Dummyfield18','6|Dummyfield19','6|Dummyfield20',
			'7|Dummyfield21','7|Dummyfield22','7|Dummyfield23',
			'8|Dummyfield24','8|Dummyfield25','8|Dummyfield26'];

// Initiate all the fields
fields = init_fields();

// Add the &quot;tabs&quot; to the formtable
$(&quot;#tabs&quot;).insertAfter('.ms-formtable').tabs();
// Add accordion
$(&quot;#accordion-1&quot;).accordion({autoHeight: false,animated: false});
$(&quot;#accordion-2&quot;).accordion({autoHeight: false,animated: false});
$(&quot;#accordion-3&quot;).accordion({autoHeight: false,animated: false});

// Loop trough all fields and move them to the right accordion section
$.each(arrTabAccordion,function(idx,item){
	var split = item.split('|');
	var accID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		currField = $(fields[fieldName]);
		currField.appendTo('#accTable-'+accID);
	}
});

// Fix IE8 issue with zoom
$(&quot;.ui-accordion-content&quot;).css({'zoom':1,'padding':'0px'});

// function - to make &quot;object&quot; of all tr's in the form
function init_fields(){
  var res = {};
  $(&quot;td.ms-formbody&quot;).each(function(){
	  if($(this).html().indexOf('FieldInternalName=&quot;')&lt;0) return;
	  var start = $(this).html().indexOf('FieldInternalName=&quot;')+19;
	  var stopp = $(this).html().indexOf('FieldType=&quot;')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
&lt;/script&gt;

This is the same code, but added two fields to tab-2, outside the accordion:

&lt;!-- Date field text size --&gt;
&lt;style type=&quot;text/css&quot;&gt;
.ms-dtinput,.ms-dttimeinput{
	font-size:0.7em;
}
&lt;/style&gt;
&lt;DIV id=&quot;tabs&quot;&gt;
	&lt;UL style=&quot;font-size:12px&quot;&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-1&quot;&gt;Tab 1&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-2&quot;&gt;Tab 2&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-3&quot;&gt;Tab 3&lt;/A&gt;&lt;/LI&gt;
	&lt;/UL&gt;

	&lt;div id=&quot;tabs-1&quot;&gt;	
		&lt;div id=&quot;accordion-1&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-0&quot;&gt;Tab 1 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-0&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-1&quot;&gt;Tab 1 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-1&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-2&quot;&gt;Tab 1 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-2&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;	
	&lt;/div&gt;
	&lt;div id=&quot;tabs-2&quot;&gt;
	&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tabs-2-table&quot;&gt;&lt;/table&gt;
		&lt;div id=&quot;accordion-2&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-3&quot;&gt;Tab 2 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-3&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-4&quot;&gt;Tab 2 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-4&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-5&quot;&gt;Tab 2 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-5&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div id=&quot;tabs-3&quot;&gt;
		&lt;div id=&quot;accordion-3&quot;&gt;	
			&lt;H3&gt;&lt;A href=&quot;#accordion-6&quot;&gt;Tab 3 Accordion 1&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-6&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-7&quot;&gt;Tab 3 Accordion 2&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-7&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;
			&lt;H3&gt;&lt;A href=&quot;#accordion-8&quot;&gt;Tab 3 Accordion 3&lt;/A&gt;&lt;/H3&gt;
			&lt;div&gt;&lt;table width=&quot;100%&quot; id=&quot;accTable-8&quot;&gt;&lt;/table&gt;&amp;nbsp;&lt;/div&gt;	
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/DIV&gt;

&lt;link type=&quot;text/css&quot; href=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// Array of all fields - format: accordionID|FieldInternalName
arrTabAccordion = ['0|Title','0|Dummyfield1','0|Dummyfield2',
			'1|Dummyfield3','1|Dummyfield4','1|Dummyfield5',
			'2|Dummyfield6','2|Dummyfield7','2|Dummyfield8',
			'3|Dummyfield9','3|Dummyfield10','3|Dummyfield11',
			'4|Dummyfield12','4|Dummyfield13','4|Dummyfield14',
			'5|Dummyfield15','5|Dummyfield16','5|Dummyfield17',
			'6|Dummyfield18','6|Dummyfield19','6|Dummyfield20',
			'7|Dummyfield21','7|Dummyfield22','7|Dummyfield23',
			'8|Dummyfield24','8|Dummyfield25','8|Dummyfield26'];

arrTab = ['1|FieldInTab1','1|FieldInTab2'];

// Initiate all the fields
fields = init_fields();

// Add the &quot;tabs&quot; to the formtable
$(&quot;#tabs&quot;).insertAfter('.ms-formtable').tabs();
// Add accordion
$(&quot;#accordion-1&quot;).accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$(&quot;#accordion-2&quot;).accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$(&quot;#accordion-3&quot;).accordion({autoHeight: false,animated: false,collapsible: true,active: false});

// Loop trough all fields and move them to the right accordion section
$.each(arrTabAccordion,function(idx,item){
	var split = item.split('|');
	var accID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		currField = $(fields[fieldName]);
		currField.appendTo('#accTable-'+accID);
	}
});

// Loop trough all fields and move them to the right tab
$.each(arrTab,function(idx,item){
	var split = item.split('|');
	var tabID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		currField = $(fields[fieldName]);
		currField.appendTo('#tabs-2-table');		
	}
});

// Fix IE8 issue with zoom
$(&quot;.ui-accordion-content&quot;).css({'zoom':1,'padding':'0px'});

// function - to make &quot;object&quot; of all tr's in the form
function init_fields(){
  var res = {};
  $(&quot;td.ms-formbody&quot;).each(function(){
	  if($(this).html().indexOf('FieldInternalName=&quot;')&lt;0) return;
	  var start = $(this).html().indexOf('FieldInternalName=&quot;')+19;
	  var stopp = $(this).html().indexOf('FieldType=&quot;')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
&lt;/script&gt;

This example is setup in a custom list with 26 single line text fields (Dummyfield1-26).

I have stripped off everything related to selecting the correct tab or accordion on form validation.

I may update this code later.

Regards
Alexander

Arrange webparts in tabs in webpart page

04.07.2010 Updated the code for the file “WebpartTabs.js” to fix an issue with grouped webparts being expanded by default. Thanks to Bullvan for noticing.

02.02.2010 Update to add possibility to set the tab titles in an array. Useful when viewing multiple views of the same list in a list view.

12.01.2010: Updated the function “getWPTitle” in the code for the file “WebpartTabs.js”.

11.01.2010: Updated the code to allow multiple instances in one page. Please read trough the article as the approach has changed from the code posted two days ago.


In this article i will describe a method for adding webparts in a webpart page as tabs somewhere in the page.

Christophe at PathToSharePoint has already made a solution like this, but i got a request for a method a bit different than his solution:

tecrms Says:
I really like your Tabs in SharePoint form you posted. Is there any chance that you might create a tab container that places webparts on the page into it? For maximum user could they be selected by webpart ID and not by the zone. This way more than one tab container could be placed anywhere are the page.

Alexander Says:
Hi,
Take a look at “Easy Tabs” from Christophe at PathToSharepoint.

No need to invent it again if his solution does what you want…

If this is not what you need, let me know and i will look at it.

Alexander

tecrms Says:
Christophe’s Easy Tabs is an excellent webpart but it grabs everything within a webpart zone. What would be nice is to allow the selection of which webparts are to be placed in the tabs from the webpart zone. This will give one more ability to have more than one “Eays Tab” type webpart within a webpart zone.

I decided to make my own solution:

  • Multiple instances in one page.
  • Optional arrays to specify which webpart’s to include and which to exclude from being “tabbed”.
  • If there are no titles specified in the array’s, the code “consumes” all webparts rendered before the CEWP containing the script
  • Preserves selected tab on page load – for filtering columns etc.
  • Works in webpartpages and in list views
  • …requests anyone?

Images:
IMG

IMG

IMG


As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

A folder named “jQueryUI” containing the scripts and the “images”-folder for the selected theme:
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The jQuery UI-library is found here. Find the theme of your choice – mine is “smootness” – and download the files (the only necessary files are “UI Core” and “Tabs”).

The file “sessvars.js” is found here.

The code for the file “WebpartTabs.js” is provided below.

The way this script works is that you put a CEWP containing the code below the webparts you want to add to the tabs. If you want to add four webparts to the top of a webpart-page, you add the webparts from the top down, and places the CEWP with the script as webpart number five.

The code then (if the webparts has not been excluded) consumes all the webparts stacked above, and adds them as tabs in the order of appearance.

Add a CEWP below the webparts you want to “tab”, and insert this code

&lt;link type=&quot;text/css&quot; href=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/sessvars.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/WebpartTabs.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// In a webpart-page: Specify whether to hide the title - it must be present initially to use as &quot;tab title&quot;
hideWPHeader = true;
// Specify webparts to exclude
arrOfTitlesToExclude = ['Announcements'];
// Specify webparts to include - if empty it consumes all webparts rendered before this CEWP
arrOfTitlesToInclude = [];
// Specify tab title - useful in a view of a list where webpart titles cannot be used
arrOfTabHeadings = [];
// Call the script with an unique identifier of the &quot;tabs-collection&quot;
initBuildTabs('one');
&lt;/script&gt;

If you want another instance in the same page, modify the code like this (this webpart must be placed after the “primary” CEWP):

&lt;script type=&quot;text/javascript&quot;&gt;
// In a webpart-page: Specify whether to hide the title - it must be present initially to use as &quot;tab title&quot;
hideWPHeader = true;
// Specify webparts to exclude
arrOfTitlesToExclude = ['Announcements'];
// Specify webparts to include - if empty it consumes all webparts rendered before this CEWP
arrOfTitlesToInclude = [];
// Specify tab title - useful in a view of a list where webpart titles cannot be used
arrOfTabHeadings = [];
// Call the script with an unique identifier of the &quot;tabs-collection&quot;
initBuildTabs('two');
&lt;/script&gt;

Parameters explained:

  • hideWPHeader: If in a webpart-page – true – hides the webpart title
  • arrOfTitlesToExclude: Array of webpart-titles to exclude from tabs
  • arrOfTitlesToInclude: Array of webpart-titles to include in tabs. If left empty, it consumes all visible webparts rendered before this CEWP (that are not actively excluded)
  • arrOfTabHeadings: Array of webpart titles. If this array contains a value for the current tabID, it is used in stead of the default title pulled from the webpart. To specify the title for tabID 2 you must set the array like this: [”,”,’This is the new title’]. Note that tabID 0 and 1 is not altered as the value for those are empty strings.

The code for the file “WebpartTabs.js” looks like this:

/* Add webparts to tabs
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * https://spjsblog.com
 * Copyright (c) 2010 Alexander Bautz (Licensed under the MIT X11 License)
 * v1.4
 * LastMod: 04.07.2010
 * ---------------------------------------------
 * Include reference to:
 *  jQuery - http://jquery.com
 *  jQuery UI - http://jqueryui.com
 *  sessvars.js - http://www.thomasfrank.se/sessionvars.html
 * ---------------------------------------------
 * See this blog post for instructions:
   
Arrange webparts in tabs in webpart page
*/ function initBuildTabs(uniqueID){ if(typeof(arrOfTitlesToExclude)=='undefined')arrOfTitlesToExclude = []; if(typeof(arrOfTitlesToInclude)=='undefined')arrOfTitlesToInclude = []; if(typeof(arrOfTabHeadings)=='undefined')arrOfTabHeadings = []; // Insert the tabs placeholder document.write(&quot;&lt;div id='skipThisCEWP'&gt;&lt;/div&gt;&lt;div style='padding:5px;width:100%' id='MyTabs_&quot; + uniqueID + &quot;'&gt;&lt;ul&gt;&lt;/ul&gt;&lt;/div&gt;&quot;); var myDiv = $(&quot;#MyTabs_&quot;+uniqueID); // Code inactive in &quot;edit page mode&quot; if($(&quot;.ms-WPAddButton&quot;).length==0){ var tabID = 0; // Loop trough all webparts on the page $(&quot;.ms-bodyareaframe td[id^='MSOZoneCell_WebPartWPQ']&quot;).each(function(){ var thisWP = $(this); if(!thisWP.data('done')){ thisWP.data('done',true) // Is it hidden or skipped? tabTitle = includeThisWP(thisWP,tabID); if(tabTitle!=false){ // Hide the webpart title? if(hideWPHeader){ thisWP.find(&quot;.ms-WPHeader&quot;).hide(); } // Build the tabs myDiv.find('ul').append(&quot;&lt;li&gt;&lt;a href='#tabContent-&quot; + uniqueID + tabID + &quot;' onclick='preserveTab(&quot; + tabID + &quot;,&quot;&quot; + uniqueID + &quot;&quot;)'&gt;&quot; + tabTitle + &quot;&lt;/a&gt;&lt;/li&gt;&quot;); var wrappedDiv = $(&quot;&lt;div id='tabContent-&quot; + uniqueID + tabID+&quot;'&gt;&lt;/div&gt;&quot;); wrappedDiv.append(thisWP.find('table:first')); myDiv.append(wrappedDiv); tabID+=1; // Remove the empty placeholders to prevent them from taking up space if(thisWP.parents('table:first').find('tr').length&gt;1){ thisWP.parents('tr:first').remove(); }else{ thisWP.parents('table:first').remove(); } } } }); // Make tabs myDiv.tabs(); // Fix CSS $(&quot;.ui-tabs-panel&quot;).css({'padding':'0px','text-align':'left','margin':'0 auto'}); // Select the active tab on page reload if(sessvars[uniqueID]!='undefined'){ myDiv.tabs('select', sessvars[uniqueID]); } }else{ document.write(&quot;&lt;div style='height:75px;background-color:#FFCC11;text-align:center;font-size:16px;padding-top:30px'&gt;This is the Tabs CEWP&lt;/div&gt;&quot;); } } function includeThisWP(obj,tID){ // Is it skipped or hidden? if(obj.find(&quot;#skipThisCEWP&quot;).length&gt;0 || obj.find('table:first').css('display')=='none'){ return false; } if(arrOfTabHeadings[tID]!=undefined &amp;&amp; arrOfTabHeadings[tID]!=''){ wpT = arrOfTabHeadings[tID]; }else{ wpT = getWPTitle(obj); } // Is it excluded if($.inArray(wpT,arrOfTitlesToExclude)&gt;-1){ return false; }else if(arrOfTitlesToInclude=='' || $.inArray(wpT,arrOfTitlesToInclude)&gt;-1){ return wpT; }else{ return false; } } function getWPTitle(obj){ // Lists and librarys if(obj.html().match(/ctx.ListTitle = &quot;(.+)&quot;/)!=null){ var tRaw = obj.html().match(/ctx.ListTitle = &quot;(.+)&quot;/)[1]; return unescape(tRaw.replace(/\u/g,'%u')) } // Other webparts if(obj.find(&quot;.ms-WPHeader h3&quot;).length&gt;0){ return obj.find(&quot;.ms-WPHeader h3&quot;).text(); }else{ return &quot;&lt;span title='Webpart title must be visible under &quot;Chrome Type&quot; in webpart settings.' style='color:red'&gt;No title&lt;/span&gt;&quot;; } } // Used to preserve the current tab when page loads (column filtering etc.) function preserveTab(tabID,parentID){ sessvars[parentID]=tabID; }

Save as “WebpartTabs.js” – mind the file extension, and upload to the scriptlibrary as shown above.

This script may need a bit more testing so please let me know if you have some comments or finds a bug.

Regards
Alexander

Tabs in SharePoint form

18.01.2011 I have posted a new solution compatible with both SP2007 and SP2010 and fixes the problems with rich text fields and “single lookup with more than 20 items under Internet Explorer – problem”. You find it her


23.01.2010 Updated the code to fix two issues regarding date and time columns. I added a <style> tag to set the font size of “.ms-dtinput” and “.ms-dttimeinput” to 0.7em.

I also added a custom handler to select the right tab on “empty field validation” on a date and time field. These are validated without page reload, and therefore did not work in the previous version.

Thank you all for the feedback and the testing.

15.12.2009 Update to support form validation. On submit – if there are required fields not filled – the tab containing the first required field is selected.


I got this request:

We have a custom list with a lot of fields. I need to divide it into sections and then easily show/hide those sections. I am going to try dividing the form into div tags and then use jQuery to display the sections in either Tabs or an accordion…

And made this demo based on the jQuery UI Widget “Tabs”.

NewForm:
IMG
DispForm:
IMG
DispForm with attachment:
IMG

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

A folder named “jQueryUI” containing the scripts and the “images”-folder for the selected theme:
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

The jQuery UI-library is found here. Find the theme of your choice – mine is “smootness” – and download the files (i have plucked only the necessary files – “UI Core” and “Tabs”).

Add a CEWP below your NewForm, DispForm and EditForm.

Add this code:

&lt;!-- Date field text size --&gt;
&lt;style type=&quot;text/css&quot;&gt;
.ms-dtinput,.ms-dttimeinput{
	font-size:0.7em;
}
&lt;/style&gt;
&lt;DIV id=&quot;tabs&quot;&gt;
	&lt;UL style=&quot;font-size:12px&quot;&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-1&quot;&gt;Tab 1&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-2&quot;&gt;Tab 2&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-3&quot;&gt;Tab 3&lt;/A&gt;&lt;/LI&gt;
		&lt;LI&gt;&lt;A href=&quot;#tabs-4&quot;&gt;Attachments&lt;/A&gt;&lt;/LI&gt;
	&lt;/UL&gt;

	&lt;div&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tabs-1&quot;&gt;&lt;/table&gt;&lt;/div&gt;
	&lt;div&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tabs-2&quot;&gt;&lt;/table&gt;&lt;/div&gt;
	&lt;div&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tabs-3&quot;&gt;&lt;/table&gt;&lt;/div&gt;
	&lt;div&gt;&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;tabs-4&quot;&gt;&lt;/table&gt;&lt;/div&gt;
&lt;/DIV&gt;

&lt;link type=&quot;text/css&quot; href=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// Array of all fields - format: tabID|FieldInternalName
arrTab = ['1|Title','1|Tab1Text','1|Tab1Choice',
		  '2|Responsible','2|Tab2Text','2|Tab2Choice','2|Date',
		  '3|Tab3Text','3|Tab3Choice','3|Tab3MultilinePlain'];

// Initiate all the fields
fields = init_fields();

// Add the &quot;tabs&quot; to the formtable
$(&quot;#tabs&quot;).insertAfter('.ms-formtable').tabs();
// Loop trough all fields and move them to the right tab
$.each(arrTab,function(idx,item){
	var split = item.split('|');
	var tabID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		currField = $(fields[fieldName]);
		currField.appendTo('#tabs-'+tabID);		
	}
});

// Are there any required fields not filled? - select the tab containing the first field
selectTabOnFormValidation(false);
function selectTabOnFormValidation(preSave){
var formvalidationTab = '';
// Formvalidation - find the first tab with empty required fields
	$.each(arrTab,function(idx,item){
		var split = item.split('|');
		var tabID = split[0];
		var fieldName = split[1];
		currField = $(fields[fieldName]);
		// Handles DateTimeField (empty field validation is performed without page reload)
		if(currField.find(&quot;SPAN[ID*='_DateTimeField_']&quot;).length&gt;0){
			if(currField.find('input:first').val()=='' &amp;&amp; preSave){
				formvalidationTab = tabID;
			}
		}
		if(formvalidationTab == '' &amp;&amp; currField.find('.ms-formbody span.ms-formvalidation').length&gt;0){
			formvalidationTab = tabID;
		}
	});
	// Select the first tab containing an empty required field
	if(formvalidationTab!=''){
		$('#tabs').tabs('select', formvalidationTab);
	}
}

// Move the Attachment's to the last tab
$(&quot;#idAttachmentsRow&quot;).appendTo('#tabs-4').find('.ms-formlabel').attr('width','165px');

// function - to make &quot;object&quot; of all tr's in the form
function init_fields(){
  var res = {};
  $(&quot;td.ms-formbody&quot;).each(function(){
	  if($(this).html().indexOf('FieldInternalName=&quot;')&lt;0) return;
	  var start = $(this).html().indexOf('FieldInternalName=&quot;')+19;
	  var stopp = $(this).html().indexOf('FieldType=&quot;')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}

// Catch &quot;empty field validation&quot; on date and time columns
function PreSaveAction(){
selectTabOnFormValidation(true);
return true;
}
&lt;/script&gt;

The only parameters you need to edit in the script is the array of FieldInternalNames. The format of the variable “arrTab” is tabID|FieldInternalName.

In the html above the script, adapt the number’s of tabs – and the tab’s display name. The tabID corresponds with the number in the id attribute of the table to insert the tab content in.

All fields must be added to a tab – if not it looks ugly….

Note: By now i have tested and found that columns of type “Multiple lines of text (Rich text or Enhanced rich text) do not work. What happens is that the tabs script shows some of the fields hidden parts.

I have not done any testing on how to prevent this issue, so feel free to notify me if you find a workaround.

Regards
Alexander