Combing SPJS-Lookup with Cascading Dropdowns

[avala]

Alex,

Scenario: Select a value from SPJS-Lookup field 1. Based off of value in field 1 , SPJS-Lookup field 2 filters available selections. We also need to give users the option of adding a unique value in field 2 (not add to external list). Both fields point to the same list.

As two separate SPJS-lookup fields they do not cascade (our code and CAML is below), as using the Cascading Dropdown field in DFFS does not give us the option to add a unique value. Any suggestions?

spjs.lookup.init({
	"fieldToConvertToDropdown":["Task_x0020_Force"],	
	"listName":"Task Forces",
	"listBaseUrl":"/Sites/XXXXXX",
	"optTextFieldInternalName":"Title",
	"sortFieldName":"Title",
	"filterObj":{
		"on":false,
		"folder":"", // Leave empty to search in all folders
		"CAML":null, // If used, the rest of the filterObj settings are disregarded
		"fin":"Completed",
		"isLookup":false,
		"operator":"Neq",
		"filterVal":"1"
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":false,
		"linkText":"Write your own value"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});
spjs.lookup.setValue("Task_x0020_Force","[currentItem:Task_x0020_Force]");

spjs.lookup.init({
	"fieldToConvertToDropdown":["Location"],	
	"listName":"Task Forces",
	"listBaseUrl":"/Sites/XXXXXXXXXX",
	"optTextFieldInternalName":"DefaultLocation",
	"sortFieldName":"DefaultLocation",
	"filterObj":{
		"on":true,
		"folder":"", // Leave empty to search in all folders
		"CAML":"<Where><Eq><FieldRef Name='Title'/><Value Type='Text'>[currentItem:Task_x0020_Force]</Value></Eq></Where>", // If used, the rest of the filterObj settings are disregarded
		"fin":"Completed",
		"isLookup":false,
		"operator":"Neq",
		"filterVal":"1"
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":true,
		"linkText":"Write your own value"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});

[Alexander Bautz]

This can be done by adding some custom js to add a change event to the first dropdown, and then calling a function to build the next dropdown that uses the value from the first.

Something like this:

// Build the first dropdown
spjs.lookup.init({
	"fieldToConvertToDropdown":["Task_x0020_Force"],	
	"listName":"Task Forces",
	"listBaseUrl":"/Sites/XXXXXX",
	"optTextFieldInternalName":"Title",
	"sortFieldName":"Title",
	"filterObj":{
		"on":false,
		"folder":"", // Leave empty to search in all folders
		"CAML":null, // If used, the rest of the filterObj settings are disregarded
		"fin":"Completed",
		"isLookup":false,
		"operator":"Neq",
		"filterVal":"1"
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":false,
		"linkText":"Write your own value"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});
// Add change event
$("#Task_x0020_Force_spjs_lookup").change(function(){
	buildNextDropdown($(this).find("option:selected").text());
});

function buildNextDropdown(fVal){
	// you must remove the dropdown to ensure you don't end up with multiple
	spjs.lookup.kill("AddTheFieldInternalNameHere");
	// build the next dropdown using "filterObj" to pick up the fVal argument from the previous dropdown.
}

Hope this helps you on the way.

Alexander

• This reply was modified 5 years, 8 months ago by Alexander Bautz. Reason: Changed function call to buildNextDropdown to use text value and not the ID

[avala]

Thanks, Alexander. Just to confirm. This solution is only using the Custom JS SPJS-Lookup and not combining with the Cascading Dropdown tab correct?

[avala]

You can ignore the previous post. The first dropdown and kill script work fine, but that dynamic component continues to elude me. We’ve tried using the CAML and filterValue with the fVal, but I think we’re just inserting the text fVal.

Current config for second dropdown (using what Alexander listed above):

spjs.lookup.init({
	"fieldToConvertToDropdown":["Location"],	
	"listName":"Task Forces",
	"listBaseUrl":"/Sites/XXXXXXX",
	"optTextFieldInternalName":"DefaultLocation",
	"sortFieldName":"DefaultLocation",
	"filterObj":{
		"on":true,
		"folder":"", // Leave empty to search in all folders
		"CAML":"<Where><Eq><FieldRef Name='Title'/><Value Type='Text'>[currentItem:fVal]</Value></Eq></Where>", // If used, the rest of the filterObj settings are disregarded
		"fin":"Title",
		"isLookup":false,
		"operator":"Eq",
		"filterVal":"fVal",
	},
	"dropDownDefaultvalue":"...",
	"addYouOwnValue":{
		"on":true,
		"linkText":"Enter a temporary location"
	},
	"addToExternalList":{
		"on":false,
		"customFunction":null, // Function name as a string. If a function name is supplied, this will be used in stead of the default function. The function will be passed the argument object as a parameter.
		"linkText":"Add new item",
		"saveNewItemText":"Save new item"
	},
	"debug":false
});

[Alexander Bautz]

Hi,
Sorry for the delay.

From my example, the second “dropdown” is configured inside “buildNextDropdown” function. This function is passed the value from the first dropdown in the “add change event” part of my example.

In your second dropdown CAML you must use the variable passed to the function like this:

"CAML":"<Where><Eq><FieldRef Name='Title'/><Value Type='Text'>"+fVal+"</Value></Eq></Where>

Hope this helps.

Alexander

[Brent Caudill]

Hi Alexander,
I was working on getting this working and was hitting a wall initially. The problem I was running into was that the change event was returning the value of the initial dropdown as an ID, not the text value. This was preventing the filter from working correctly.

I found the solution in another one of your blog posts Issues with creating multiple Cascading rules tied to same lookup list.

I modified the change event to the following and it works correctly now.

$("#Title_spjs_lookup").change(function(){
	buildNextDropdown($(this).find("option:selected").text());
});

Thanks for another great solution!!
Brent

[Author]

Posts