Two Dependent Picklists On One Page

[Patrick83]

Hello. I am using JavaScript to customize Microsoft Dynamics CRM 4.0, and I am having a problem creating two dependent picklists on the same form. This is not a problem with the CRM. It is a coding problem. Please allow me to explain.

The CRM package allows for many customizations, and they can be enhanced with JavaScript in the form of OnLoad and OnChange events. OnLoads fire when a CRM form is opened. OnChange events fire when a field or any other attribute is changed.

The dependent picklist allows users to narrow down information based on a previous picklist selection. For example, if someone selects a brand of product in the primary picklist, only relevant products to that brand are displayed in the dependent picklist. I have been successful putting one of these on a form, but issues arise when trying to place two.

In CRM 4.0, JavaScript is inserted into a customization window for a specific entity (ie. "account"). The CRM forms have one OnLoad script area that the entire entity form uses, and the fields/attributes within the forms use OnChange to call an OnLoad function.

Below is the code that works perfectly. The case and array values call on a picklist item numbers that I already created in CRM.

At the beginning of the script, my primary and related (dependent) picklists are assigned variables as you can see below. I think this is partly where I'm running into problems when I duplicate this code and swap out "new_crimperbrand" with "new_crimperbrand2" and swap "new_crimpermodel" with "new_crimpermodel2" (The "new_" things are what the picklist fields are names on the CRM form). Also, I think the OnChange call conflicts when it is used exactly the same twice (once for "new_crimperbrand" and also for "new_crimperbrand2").

Code Snippet:

	var oPrimaryPicklist = crmForm.all.new_crimperbrand;
	var oRealatedPicklist = crmForm.all.new_crimpermodel;

Code Snippet: The OnChange event (references main script below) for "new_crimperbrand" is

crmForm.FilterPicklist();

Entire Working Script:

//  Used to help search the picklist items
Array.prototype.Contains = function(o) 
{
	var iLength = this.length;
	
	for (var i = 0; i < iLength; i++)
	{
		if (o == this[i])
		{
			return true;
		}
	}
	
	return false;
};

// This is the main function that will filter the picklists
crmForm.FilterPicklist = function x()
{
	var oPrimaryPicklist = crmForm.all.new_crimperbrand;
	var oRealatedPicklist = crmForm.all.new_crimpermodel;
	
	if (oPrimaryPicklist.DataValue == null)
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;	
		
		
		return;
	}
	
	
	var oTempArray = new Array();
	
	var iLength = oRealatedPicklist.originalPicklistOptions.length;
	
	var aCurrentType = new Array();		
	
	
switch (oPrimaryPicklist.DataValue)
{
case "1":
aCurrentType = new Array(1,2,3,4,5,6,7,8,9,10);
break;
case "2":
aCurrentType = new Array(11,12,13,14,15,16,17,18,19,20,21,22,23,24);
break;
case "3":
aCurrentType = new Array(25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41);
break;
case "4":
aCurrentType = new Array(42,43,44);
break;
case "5":
aCurrentType = new Array(45,46,47,48);
break;
case "6":
aCurrentType = new Array(49,50,51,52,53,54,55);
break;
case "7":
aCurrentType = new Array(56,57,58,59,60,61,62,63,64);
break;
case "8":
aCurrentType = new Array(65,66,67,68,69);
break;
}

	
	for (var i = 0; i < iLength; i++)
	{		
		if (aCurrentType.Contains(oRealatedPicklist.originalPicklistOptions[i].DataValue))
		{
			oTempArray.push(oRealatedPicklist.originalPicklistOptions[i]);
		}
	}
	
	oRealatedPicklist.Options = oTempArray;
	
	if (oTempArray.length > 0)
	{		
		oRealatedPicklist.Disabled = false;		
	}		
	else
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;
	}	
}

var CRM_FORM_TYPE_CREATE = 1;
var CRM_FORM_TYPE_UPDATE = 2;

switch (crmForm.FormType)
{	
	case CRM_FORM_TYPE_CREATE://CREATE_FORM - try these and blow away the vars above
	case CRM_FORM_TYPE_UPDATE:	//UPDATE_FORM
		
		var oRealatedPicklist = crmForm.all.new_crimpermodel;
		
		oRealatedPicklist.originalPicklistOptions = oRealatedPicklist.Options;		

		if (crmForm.all.new_crimperbrand.DataValue == null)
		{
			oRealatedPicklist.Disabled = true;
		}
		else
		{					
			var iPicklistValue = oRealatedPicklist.DataValue;
			crmForm.FilterPicklist();
			oRealatedPicklist.DataValue = iPicklistValue;					
		}

	break;
}

My question is, how do I duplicate this code for a duplicate picklist set? The duplicate picklist would need to use

	var oPrimaryPicklist = crmForm.all.new_crimperbrand2;
	var oRealatedPicklist = crmForm.all.new_crimpermodel2;

and it needs an OnChange to call the duplicate code for OnLoad.
I already have the cases and arrays set up for the duplicate dependent picklist, but I cannot make the code work.

I tried to explain this well. If you can help, I would be so greatful.

[Patrick83]

Here's both the scripts as they go on the OnLoad:

First one is green, and the second one is blue. How can I make the second one different so it works on the same page, too?

The OnChange that references this is currently: crmForm.FilterPicklist();

[COLOR="Green"]//  Used to help search the picklist items
Array.prototype.Contains = function(o) 
{
	var iLength = this.length;
	
	for (var i = 0; i < iLength; i++)
	{
		if (o == this[i])
		{
			return true;
		}
	}
	
	return false;
};

// This is the main function that will filter the picklists
crmForm.FilterPicklist = function x()
{
	var oPrimaryPicklist = crmForm.all.new_crimperbrand;
	var oRealatedPicklist = crmForm.all.new_crimpermodel;
	
	if (oPrimaryPicklist.DataValue == null)
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;	
		
		
		return;
	}
	
	
	var oTempArray = new Array();
	
	var iLength = oRealatedPicklist.originalPicklistOptions.length;
	
	var aCurrentType = new Array();		
	
	
switch (oPrimaryPicklist.DataValue)
{
case "1":
aCurrentType = new Array(1,2,3,4,5,6,7,8,9,10);
break;
case "2":
aCurrentType = new Array(11,12,13,14,15,16,17,18,19,20,21,22,23,24);
break;
case "3":
aCurrentType = new Array(25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41);
break;
case "4":
aCurrentType = new Array(42,43,44);
break;
case "5":
aCurrentType = new Array(45,46,47,48);
break;
case "6":
aCurrentType = new Array(49,50,51,52,53,54,55);
break;
case "7":
aCurrentType = new Array(56,57,58,59,60,61,62,63,64);
break;
case "8":
aCurrentType = new Array(65,66,67,68,69);
break;
}

	
	for (var i = 0; i < iLength; i++)
	{		
		if (aCurrentType.Contains(oRealatedPicklist.originalPicklistOptions[i].DataValue))
		{
			oTempArray.push(oRealatedPicklist.originalPicklistOptions[i]);
		}
	}
	
	oRealatedPicklist.Options = oTempArray;
	
	if (oTempArray.length > 0)
	{		
		oRealatedPicklist.Disabled = false;		
	}		
	else
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;
	}	
}

var CRM_FORM_TYPE_CREATE = 1;
var CRM_FORM_TYPE_UPDATE = 2;

switch (crmForm.FormType)
{	
	case CRM_FORM_TYPE_CREATE://CREATE_FORM - try these and blow away the vars above
	case CRM_FORM_TYPE_UPDATE:	//UPDATE_FORM
		
		var oRealatedPicklist = crmForm.all.new_crimpermodel;
		
		oRealatedPicklist.originalPicklistOptions = oRealatedPicklist.Options;		

		if (crmForm.all.new_crimperbrand.DataValue == null)
		{
			oRealatedPicklist.Disabled = true;
		}
		else
		{					
			var iPicklistValue = oRealatedPicklist.DataValue;
			crmForm.FilterPicklist();
			oRealatedPicklist.DataValue = iPicklistValue;					
		}

	break;
}[/COLOR]

The OnChange that references this is ALSO currently: crmForm.FilterPicklist();

[COLOR="Blue"]//  Used to help search the picklist items
Array.prototype.Contains = function(o) 
{
	var iLength = this.length;
	
	for (var i = 0; i < iLength; i++)
	{
		if (o == this[i])
		{
			return true;
		}
	}
	
	return false;
};

// This is the main function that will filter the picklists
crmForm.FilterPicklist = function x()
{
	var oPrimaryPicklist = crmForm.all.new_crimperbrand2;
	var oRealatedPicklist = crmForm.all.new_crimpermodel2;
	
	if (oPrimaryPicklist.DataValue == null)
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;	
		
		
		return;
	}
	
	
	var oTempArray = new Array();
	
	var iLength = oRealatedPicklist.originalPicklistOptions.length;
	
	var aCurrentType = new Array();		
	
	
switch (oPrimaryPicklist.DataValue)
{
case "1":
aCurrentType = new Array(1,2,3);
break;
case "2":
aCurrentType = new Array(4,5);
break;
case "3":

break;
case "4":

break;
case "5":

break;
case "6":

break;
case "7":

break;
case "8":

break;
case "9":

break;
}

	
	for (var i = 0; i < iLength; i++)
	{		
		if (aCurrentType.Contains(oRealatedPicklist.originalPicklistOptions[i].DataValue))
		{
			oTempArray.push(oRealatedPicklist.originalPicklistOptions[i]);
		}
	}
	
	oRealatedPicklist.Options = oTempArray;
	
	if (oTempArray.length > 0)
	{		
		oRealatedPicklist.Disabled = false;		
	}		
	else
	{
		oRealatedPicklist.DataValue = null;
		oRealatedPicklist.ForceSubmit = true;		
		oRealatedPicklist.Disabled = true;
	}	
}

var CRM_FORM_TYPE_CREATE = 1;
var CRM_FORM_TYPE_UPDATE = 2;

switch (crmForm.FormType)
{	
	case CRM_FORM_TYPE_CREATE://CREATE_FORM - try these and blow away the vars above
	case CRM_FORM_TYPE_UPDATE:	//UPDATE_FORM
		
		var oRealatedPicklist = crmForm.all.new_crimpermodel2;
		
		oRealatedPicklist.originalPicklistOptions = oRealatedPicklist.Options;		

		if (crmForm.all.new_crimperbrand2.DataValue == null)
		{
			oRealatedPicklist.Disabled = true;
		}
		else
		{					
			var iPicklistValue = oRealatedPicklist.DataValue;
			crmForm.FilterPicklist();
			oRealatedPicklist.DataValue = iPicklistValue;					
		}

	break;
}[/COLOR]

[Philip M]

You cannot have multiple scripts on the same page with identical function and/or variable names, as the second overwrites the first.

You will need to rename all the functions and variables in the second script with (say) a suffix such as 2.

e.g.

var oPrimaryPicklist2 = crmForm.all.new_crimperbrand2;
var oRealatedPicklist2 = crmForm.all.new_crimpermodel2;

See also http://www.javascriptkit.com/javatut...iplejava.shtml
for running multiple scripts.


"Knowledge is of no value unless you put it into practice.”
Anton Chekhov quotes (Russian playwright and master of the modern short story, 1860-1904)

[Patrick83]

Thanks for the reply. I changed what you said, and it works now. Much appreciated!