CRM 4.0 Dynamic Forms

I have a client that has a “simple” request. He wants to re-arrange the form sections and fields according to a picklist selected value.

When I first heard his request I ruled out any possibility of satisfying his needs since crm forms are static and the form structure is defined at design time. Anyway I returned back to the office and wrote this piece of infrastructure that allows you to move any field or section at will.

If you have a similar requirement this will make your life very easy.

The SwitchF method is responsible for moving the field around. The first parameter is the name of the field to be moved. The second parameter is an anchor which specifies where to move the field to. The code actually swaps the fields so you also need to address the second parameter (field) positioning as well.

The SwitchS method is responsible for moving the sections. Use the FormOrganizer GetSection Method to retrieve a reference to each section and then pass the sections to the SwitchS method. The GetSection method receives the tab and section index in accordance to their position in the DOM structure. note that the indices are zero based so the first tab is at position 0 and the third section is at position 2.

The Infrastructure also takes care of hiding fields you don’t want to see.
The code relies on the fields being available on the form and does not build them for you.

The sample is taken from the contact entity.

function OnCrmPageLoad()
{
 //Create a FormOrganizer Object
 var frmOrg = new FormOrganizer();
 //Swap parentcustomerid lookup with salutation position
  frmOrg.SwitchF("parentcustomerid","salutation");
 //Swap middlename with lastname and so on...
  frmOrg.SwitchF("middlename","lastname");
  frmOrg.SwitchF("jobtitle","telephone1");
  frmOrg.SwitchF("telephone1","preferredcontactmethodcode");
 //Hide pager field
  frmOrg.Hide("pager");
 //Retrieve the the second section at the first tab
 var tab1Sec2 = frmOrg.GetSection( 0 , 1 );
 //Retrieve the third section at the second tab
 var tab2Sec3 = frmOrg.GetSection( 1 , 2 ); 
  frmOrg.SwitchS(tab1Sec2,tab2Sec3);  
} 

function FormOrganizer()
{
 this.GetSection = function( tabIndex , secIndex )
 {
  var sec = document.getElementById( "tab" + tabIndex );
  return sec.childNodes[0].rows[ secIndex ];
 }
  
 this.SwitchS = function( secA , secB )
 {
  if( !secA || !secB ) return;
  secA.swapNode(secB);
 }
 
 this.Hide    = function( controlId )
 {
  var getElem = document.getElementById;
  var A = getElem( controlId );
  var A_d = getElem( A.id + "_d" );
  var A_c = getElem( A.id + "_c" );
   A_d.style.visibility = "hidden";
   A_c.style.visibility = "hidden";
   A.style.visibility  = "hidden";
 } 
 
 this.SwitchF = function( controlA , controlB )
 {
  var getElem = document.getElementById;
  var A = getElem( controlA );
  var B = getElem( controlB );
  
  if( !A || !B ) return;
  
  var A_d = getElem( A.id + "_d" );
  var A_c = getElem( A.id + "_c" );
  
  var B_d = getElem( B.id + "_d" );
  var B_c = getElem( B.id + "_c" );
   
  var A_d_colSpan = A_d.colSpan;
  var B_d_colSpan = B_d.colSpan;
  
   A_d.colSpan = B_d_colSpan;
   B_d.colSpan = A_d_colSpan;
  
   A_d.swapNode(B_d);
   A_c.swapNode(B_c);   
 }
}

OnCrmPageLoad();