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:

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

	<div id="tabs-1">	
		<div id="accordion-1">	
			<H3><A href="#accordion-0">Tab 1 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-0"></table> </div>
			<H3><A href="#accordion-1">Tab 1 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-1"></table> </div>
			<H3><A href="#accordion-2">Tab 1 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-2"></table> </div>	
		</div>	
	</div>
	<div id="tabs-2">
		<div id="accordion-2">	
			<H3><A href="#accordion-3">Tab 2 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-3"></table> </div>
			<H3><A href="#accordion-4">Tab 2 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-4"></table> </div>
			<H3><A href="#accordion-5">Tab 2 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-5"></table> </div>	
		</div>
	</div>
	<div id="tabs-3">
		<div id="accordion-3">	
			<H3><A href="#accordion-6">Tab 3 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-6"></table> </div>
			<H3><A href="#accordion-7">Tab 3 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-7"></table> </div>
			<H3><A href="#accordion-8">Tab 3 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-8"></table> </div>	
		</div>
	</div>
</DIV>

<link type="text/css" href="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
// 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 "tabs" to the formtable
$("#tabs").insertAfter('.ms-formtable').tabs();
// Add accordion
$("#accordion-1").accordion({autoHeight: false,animated: false});
$("#accordion-2").accordion({autoHeight: false,animated: false});
$("#accordion-3").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
$(".ui-accordion-content").css({'zoom':1,'padding':'0px'});

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

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

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

	<div id="tabs-1">	
		<div id="accordion-1">	
			<H3><A href="#accordion-0">Tab 1 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-0"></table> </div>
			<H3><A href="#accordion-1">Tab 1 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-1"></table> </div>
			<H3><A href="#accordion-2">Tab 1 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-2"></table> </div>	
		</div>	
	</div>
	<div id="tabs-2">
	<table cellpadding="0" cellspacing="0" id="tabs-2-table"></table>
		<div id="accordion-2">	
			<H3><A href="#accordion-3">Tab 2 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-3"></table> </div>
			<H3><A href="#accordion-4">Tab 2 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-4"></table> </div>
			<H3><A href="#accordion-5">Tab 2 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-5"></table> </div>	
		</div>
	</div>
	<div id="tabs-3">
		<div id="accordion-3">	
			<H3><A href="#accordion-6">Tab 3 Accordion 1</A></H3>
			<div><table width="100%" id="accTable-6"></table> </div>
			<H3><A href="#accordion-7">Tab 3 Accordion 2</A></H3>
			<div><table width="100%" id="accTable-7"></table> </div>
			<H3><A href="#accordion-8">Tab 3 Accordion 3</A></H3>
			<div><table width="100%" id="accTable-8"></table> </div>	
		</div>
	</div>
</DIV>

<link type="text/css" href="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/jQueryUI/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
// 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 "tabs" to the formtable
$("#tabs").insertAfter('.ms-formtable').tabs();
// Add accordion
$("#accordion-1").accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$("#accordion-2").accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$("#accordion-3").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
$(".ui-accordion-content").css({'zoom':1,'padding':'0px'});

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

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

20 Comments on “SharePoint form – Accordion in Tabs”

  1. Alexander,

    This works great! You are a life safer! Thanks a ton for figuring this out. My final questions to wrap this job up (I hope) are 1. how do you collapse all the accordions to start, 2. is there a way to keep multiple open, and 3. I need to add a few lines without an accordion inside of the same tab (preferably above the accordion). I have added the $.each(arrTab,function(idx,item) function and put arrTab fields back in. They are invisible! Man you are a huge help and you probably saved me a ton of work this weekend! Cheers!

    1. The accordion and tabs are created using a jQuery UI widget. Read about it here: http://jqueryui.com

      Question 1 is answered like this (replace line 67-69):

      $("#accordion-1").accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$("#accordion-2").accordion({autoHeight: false,animated: false,collapsible: true,active: false});
$("#accordion-3").accordion({autoHeight: false,animated: false,collapsible: true,active: false});

      Alexander

    2. Thanks for the answer to question 1. I figured it was easy. I got confused the first time I looked through that site but it makes a little more sense now. I guess I am left with question 3. Thanks again!

  4. Alexander,

    I just want to thank you again for your help. You saved me a tremendous amount of time and it looks better than I could have imagined. It’s not over yet, but you have helped me jump over some major hurdles. I continue to scour your blog for other tips that will help me make this even better and I keep finding things that help. One thing I might be missing or I can suggest is how to translate some of the things on the jquery site to be useful in Sharepoint. For instance, the options on accordions (arrow icons specifically). How to I use the code on that site in the templates you give? I’ve tried to model something off of the collapsible code you provide above but I can’t get it to work. I’ve learned a lot in a short time and I keep learning. Thanks again!

    1. All the code from http://jqueryui.com/demos/accordion/ can be used in this example.

      The accordions are made in line 67-69 in the topmost codeblock, edit like this:

      var icons = {
	header: "ui-icon-circle-arrow-e",
	headerSelected: "ui-icon-circle-arrow-s"
};
$("#accordion-1").accordion({autoHeight: false,animated: false,collapsible: true,active: false,icons: icons});
$("#accordion-2").accordion({autoHeight: false,animated: false,collapsible: true,active: false,icons: icons});
$("#accordion-3").accordion({autoHeight: false,animated: false,collapsible: true,active: false,icons: icons});

      Alexander

    2. Alexander,

      Thanks for the response as always. It seems simple enough but I can’t get it to work. I added the var code and then the icons:icons part and nothing happens. Also the hardest part for me is going to that other site and then seeing what you give me and matching them up. I’m totally new at this kind of code so it’s probably some elementary concepts I’m still learning. Thanks a ton man! So far everyone likes what has come out of this project. It seems like I live on your site scouring for improvements and I keep finding things. Keep it up!

  5. Alexander,

    I saw in your post about tabs a few people ask about “duplicating” fields inside of other tabs. I didn’t see a definitive answer on how to do it. I looked on the site about cloning but that didn’t make any sense to me. I need certain duplicate columns inside of the accordions which are inside of the tabs. I tried to just put the FieldInternalName in again where I wanted it with the correct accordion number but it didn’t do anything. I need these for all three forms. Thanks in advance man!

    1. Hi,
      Duplicating fields in NewForm or EditForm is not possible because it will confuse SharePoint on save item (duplicated field id).

      You would have to move them between tabs/accordions with some custom code.

      In DispForm it is no problem, just clone the field and insert it in multiple tabs/accordions.

      Alexander

    2. Alexander,

      Thanks for the response. I understand how it could conflict if there were two places to enter. I guess I was hoping to just display the field in two places and just have it reflect once what has been entered. I kinda had it do this when I was having trouble getting the code you eventually came to in this tutorial. It was not by design of course but I was showing the same fields in two accordions. If I entered something in the one accordion and it would show what I had entered when I went to the next one. I’m not sure how I did it. It could have been a total fluke but that’s what I am hoping for. And by custom code I guess you mean it’s difficult to have a general rule or template that could accomplish this? Thanks a lot. Have a great day.

    3. Alexander,

      I know you’ve been busy. I was just wondering if you had any thoughts from my last post here. I’m presenting my site in the next couple of days and I would like to have this in the works if possible. Thanks as always!

    5. Hi,
      I have modified the code to allow cloned elements, but note: This is cloning a field and therefore you must test it’s behavior. My quick test shows that a cloned text field will concatenate the values from both inputs, but test it and expect problems…

      The bits changed are as follows (line numbers refers to the bottom code section):

      // Add after line 62
arrOfFieldsAdded = []; // For handling clone of already added elements

// Replace line 91 with this
if($.inArray(fieldName,arrOfFieldsAdded)==-1){
	arrOfFieldsAdded.push(fieldName);
	currField = $(fields[fieldName]);
}else{
	currField = $(fields[fieldName]).clone();
}

      You can now add a field to multiple tabs by referring it multiple times in the variable “arrTabAccordion”.

      Alexander

  6. Alexander,

    Thanks for the response! I have tried to manipulate what you said a few ways and can’t get it to work. Would you mind telling me where I’m going wrong? I apologize for the lengthy code. Thanks so much!!!!

    <!-- Date field text size -->
<style type="text/css">
.ms-dtinput,.ms-dttimeinput{
	font-size:0.7em;
}
ul {width:1000px}
</style>
<DIV id="tabs">
	<UL style="font-size:12px">
<LI><A href="#tabs-1">Customer/Prospect Information</A></LI>
<LI><A href="#tabs-2">Established DuBois Applications</A></LI>
<LI><A href="#tabs-3">Potential Applications</A></LI>
<LI><A href="#tabs-4">Comments</A></LI>		
<LI><A href="#tabs-5">Attachments</A></LI>
	</UL>

	<div><table cellpadding="0" cellspacing="0" id="tabs-1"></table></div>
<div id="tabs-2">
This section is for Customer Add-ons, Customers In Jeopardy, and Lost Accounts. <font size="2px">(Estimated annual sales.)</font>
	<div id="accordion-1" style="font-size:12px">
	<H3><A href="#accordion-1">Surface Finishing</A></H3>
	<div><table width="100%" id="accTable-1"></table>&nbsp;</div>
	<H3><A href="#accordion-2">Water Treatment</A></H3>
	<div><table width="100%" id="accTable-2"></table>&nbsp;</div>
	<H3><A href="#accordion-3">Food C&S</A></H3>
	<div><table width="100%" id="accTable-3"></table>&nbsp;</div>
	<H3><A href="#accordion-4">Paper</A></H3>
	<div><table width="100%" id="accTable-4"></table>&nbsp;</div>
	<H3><A href="#accordion-5">Industrial Wash</A></H3>
	<div><table width="100%" id="accTable-5"></table>&nbsp;</div>
	<H3><A href="#accordion-6">Auto Wash</A></H3>
	<div><table width="100%" id="accTable-6"></table>&nbsp;</div>
	</div>
<table cellpadding="0" cellspacing="0" id="tabs-2-table"></table>
</div>

	<div id="tabs-3">
This section is for Customer Add-ons and Prospects. <font size="2px">(Estimated annual sales.)</font>

	<div id="accordion-2" style="font-size:12px">
	<H3><A href="#accordion-7">Surface Finishing</A></H3>
	<div><table width="100%" id="accTable-7"></table>&nbsp;</div>
	<H3><A href="#accordion-8">Water Treatment</A></H3>
	<div><table width="100%" id="accTable-8"></table>&nbsp;</div>
	<H3><A href="#accordion-9">Food C&S</A></H3>
	<div><table width="100%" id="accTable-9"></table>&nbsp;</div>
	<H3><A href="#accordion-10">Paper</A></H3>
	<div><table width="100%" id="accTable-10"></table>&nbsp;</div>
	<H3><A href="#accordion-11">Industrial Wash</A></H3>
	<div><table width="100%" id="accTable-11"></table>&nbsp;</div>
	<H3><A href="#accordion-12">Auto Wash</A></H3>
	<div><table width="100%" id="accTable-12"></table>&nbsp;</div>
	</div>
<table cellpadding="0" cellspacing="0" id="tabs-3-table"></table>
</div>
	<div><table cellpadding="0" cellspacing="0" id="tabs-4"></table></div>
	<div><table cellpadding="0" cellspacing="0" id="tabs-5"></table></div>
	
</DIV>

<link type="text/css" href="javascript/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript" src="javascript/WrapChoiceField.js"></script>
<script type="text/javascript">


// Array of all fields - format: accordionID|FieldInternalName
arrTabAccordion = ['1|Established_x0020_Zirconization', '1|Zirconization_x0020_Competitor', '1|Established_x0020_In_x002d_Proce', '1|Zirconization_x0020_Competitor', '1|Established_x0020_Metal_x0020_Pr', '1|Established_x0020_Plastics', '1|Established_x0020_Paint_x0020_Bo', '1|Established_x0020_RPS', '1|Established_x0020_Metalworking', '1|Established_x0020_Maintenance_x0', '1|Established_x0020_Lubricants', '1|Established_x0020_Specialities','2|Established_x0020_Cooling_x0020_', '2|Established_x0020_Boiler', '2|Established_x0020_Closed_x0020_L', '2|Established_x0020_Dolphin', '2|Established_x0020_Wastewater', '3|Established_x0020_Thonhauser', '3|Established_x0020_Meat', '3|Established_x0020_Sanitizer', '3|Established_x0020_Snacks', '3|Established_x0020_Beverage', '4|Established_x0020_Felt_x0020_Cle', '4|Established_x0020_Dryer_x0020_Fa', '4|Established_x0020_Roll_x0020_Tre', '4|Established_x0020_Biocides', '4|Established_x0020_Defoamers', '4|Established_x0020_Wire_x0020_Cle', '4|Established_x0020_Pitch_x002f_St', '4|Established_x0020_Pulp_x0020_Mil', '4|Established_x0020_System_x0020_a', '5|Established_x0020_Industrial_x00', '5|Established_x0020_Rail_x0020_Was', '5|Established_x0020_Public_x0020_T', '6|Established_x0020_Self_x0020_Ser', '6|Established_x0020_Auto_x0020_Was0', '6|Established_x0020_Tunnel_x0020_W', '6|Established_x0020_Automatic_x002', '6|Established_x0020_Auto_x0020_Was', '7|Zirconization_x0020_Opportunity', '7|Zirconization_x0020_Competitor', '7|Metal_x0020_Pretreatment_x0020_O','7|Metal_x0020_Pretreatment_x0020_C', '7|In_x002d_Process_x0020_Cleaning_','7|In_x002d_Process_x0020_Cleaning_0', '7|Paint_x0020_Booth_x0020_Opportun','7|Paint_x0020_Booth_x0020_Competit', '7|Plastics_x0020_Opportunity','7|Plastics_x0020_Competitor', '7|RPS_x0020_Opportunity','7|Rust_x0020_Preventatives_x0020_C', '7|Metalworking_x0020_Opportunity','7|Metalworking_x0020_Competitor', '7|Maintenance_x0020_Cleaning_x0020','7|Maintenance_x0020_Cleaning_x00200', '7|Lubricants_x0020_Opportunity','7|Lubricants_x0020_Competitor', '7|Specialities_x0020_Opportunity','7|Specialties_x0020_Competitor', '8|Cooling_x0020_Tower_x0020_Opport', '8|Cooling_x0020_Tower_x0020_Compet', '8|Boiler_x0020_Opportunity', '8|Boiler_x0020_Competitor', '8|Closed_x0020_Loop_x0020_Opportun', '8|Closed_x0020_Loop_x0020_Competit', '8|Dolphin_x0020_Opportunity', '8|Dolphin_x0020_Competitor', '8|Wastewater_x0020_Opportunity', '8|Wastewater_x0020_Competitor', '9|Thonhauser_x0020_Opportunity', '9|CIP_x0020_Competitor', '9|Meat_x0020_Opportunity', '9|OPC_x0020_Competitor', '9|Sanitizer_x0020_Opportunity', '9|Sanitizer_x0020_Competitor', '9|Snacks_x0020_Opportunity', '9|Conveyor_x0020_Lube_x0020_Compet', '9|Beverage_x0020_Opportunity', '9|Thermal_x0020_Processing_x0020_H', '10|Felt_x0020_Cleaning_x0020_Opport', '10|Felt_x0020_Cleaning_x0020_Compet', '10|Dryer_x0020_Fabric_x0020_Cleanin', '10|Dryer_x0020_Fabric_x0020_Competi', '10|Roll_x0020_Treatment_x0020_Oppor', '10|Roll_x0020_Treatment_x0020_Compe', '10|Biocide_x0020_Competitor', '10|Biocide_x0020_Opportunity', '10|Defoamer_x0020_Opportunity', '10|Defoamer_x0020_Competitor', '10|Wire_x0020_Cleaning_x0020_Opport', '10|Wire_x0020_Cleaning_x0020_Compet', '10|Pitch_x002f_Stickies_x0020_Contr', '10|Pitch_x002f_Stickies_x0020_Compe', '10|Pulp_x0020_Mill_x0020_Cleaning_x', '10|Pulp_x0020_Mill_x0020_Competitor', '10|System_x0020_and_x0020_Downtime_', '10|System_x0020_and_x0020_Downtime_0', '11|Industrial_x0020_Wash_x0020_Oppo', '11|Industrial_x0020_Wash_x0020_Comp', '11|Rail_x0020_Wash_x0020_Opportunit', '11|Rail_x0020_Wash_x0020_Competitor', '11|Public_x0020_Transit_x0020_Oppor', '11|Public_x0020_Transit_x0020_Compe', '12|Auto_x0020_Wash_x0020_Distributo', '12|Auto_x0020_Wash_x0020_Distributo0', '12|Self_x0020_Service_x0020_Wash_x0', '12|Self_x0020_Service_x0020_Wash_x00', '12|Tunnel_x0020_Wash_x0020_Opportun', '12|Tunnel_x0020_Wash_x0020_Competit', '12|Automatic_x0020_Wash_x0020_Oppor', '12|Automatic_x0020_Wash_x0020_Compe', '12|Auto_x0020_Wash_x0020_Opportunit', '12|Auto_x0020_Wash_x0020_Competitor'];

arrTab = ['1|Title','1|Customer_x0020_Status','1|DSP_x0020_Level', '1|DSP_x0020_Level', '1|Sales_x0020_Representative', '1|Additional_x0020_Representative', '1|Manager', '1|SAE_x0020_Partner', '1|Primary_x0020_Sectors', '1|Customer_x0020_Number', '1|Is_x0020_this_x0020_part_x0020_o', '1|Does_x0020_this_x0020_account_x0', '1|Shipping_x0020_Address', '1|Billing_x0020_Name_x0020__x0028_', '1|Billing_x0020_Address_x0020__x00', '1|Contact_x0020_Name_x0020_and_x00', '1|Buying_x0020_Influence_x0020_Mod', '1|Phone_x0020_Number', '1|Email', '1|Contact_x0020_2_x0020_Name_x0020', '1|Contact_x0020_2_x0020_Phone_x002', '1|Contact_x0020_2_x0020_Email', '1|Contact_x0020_3_x0020_Name_x0020', '1|Contact_x0020_3_x0020_Phone_x002', '1|Contact_x0020_3_x0020_Email', '1|Fax', '1|MSDS_x0020_Email', '1|Internet_x0020_Address', '1|A_x002f_P_x0020_Contact_x0020_In', '1|Payment_x0020_Method', '1|Delivery_x0020_Method', '1|Price_x0020_Contract', '1|Service_x0020_Frequency', '4|Comments'];


arrTab2 = ['1|Established_x0020_DuBois_x0020_P', '1|Date_x0020_Account_x0020_Lost', '1|Reason_x0020_for_x0020_Lost_x002', '3|DuBois_x0020_Products_x0020_for_', '3|Close_x0020_Date_x0020_for_x0020', '3|Competitor_x0020_Products_x0020_'];

arrOfFieldsAdded = [];

arrTab3 = ['1|DuBois_x0020_Products_x0020_for_', '1|Close_x0020_Date_x0020_for_x0020', '1|Competitor_x0020_Products_x0020_'];



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


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

wrapChoiceField("Primary_x0020_Sectors",3);

// 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);
	}
});

$.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);
	}
});

$.each(arrTab2,function(idx,item){
	var split = item.split('|');
	var tabID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		
if($.inArray(fieldName,arrOfFieldsAdded)==-1){
	arrOfFieldsAdded.push(fieldName);
	currField = $(fields[fieldName]);
}else{currField = $(fields[fieldName]).clone();
}

		currField.appendTo('#tabs-2-table');
	}
});

$.each(arrTab3,function(idx,item){
	var split = item.split('|');
	var tabID = split[0];
	var fieldName = split[1];
	if(fields[fieldName]!=undefined){
		
if($.inArray(fieldName,arrOfFieldsAdded)==-1){
	arrOfFieldsAdded.push(fieldName);
	currField = $(fields[fieldName]);
}else{currField = $(fields[fieldName]).clone();
}


		currField.appendTo('#tabs-3-table');
	}
});

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

// 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("SPAN[ID*='_DateTimeField_']").length>0){
			if(currField.find('input:first').val()=='' && preSave){
				formvalidationTab = tabID;
			}
		}
		if(formvalidationTab == '' && currField.find('.ms-formbody span.ms-formvalidation').length>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
$("#idAttachmentsRow").appendTo('#tabs-5').find('.ms-formlabel').attr('width','165px');

// function - to make "object" of all tr's in the form
function init_fields(){
	var res = {};
	$("td.ms-formbody").each(function(){
	var myMatch = $(this).html().match(/FieldName="(.+)"s+FieldInternalName="(.+)"s+FieldType="(.+)"s+/);
		if(myMatch!=null){
			// Display name
			var disp = myMatch[1];
			// FieldInternalName
			var fin = myMatch[2];
			// FieldType
			var type = myMatch[3];
			// Build object
			res[fin] = this.parentNode;
			res[fin].FieldDispName = disp;
			res[fin].FieldType = type;
		}
	});
	return res;
}

</script>

    1. I am trying to duplicate Established Zirconization for this test. I accidentally posted it twice in slot 1 (now fixed in the code on my site). It currently shows in slot 7 once accepted but the clone will not show in slot 1. Thanks a bunch!

    4. Alexander,

      Thanks! That worked. I was putting it in the wrong place. Now that I tried it, I see why you say it won’t work. It duplicates the entries. It does accept them at least! But when you go to edit the item and the fields both have entries it duplicates it every time so you end up with a bunch of duplications. Thanks so much for your help. I knew you’d show me a way to get it to work. I just wanted to see what it would do and if it would help. Unfortunately it won’t. Thanks for making it work for me! You can see I’ve used a ton of what you’ve offered (even more than the above code). Keep it up!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.