Combing SPJS-Lookup with Cascading Dropdowns

Forums SPJS-Lookup Combing SPJS-Lookup with Cascading Dropdowns

This topic contains 5 replies, has 3 voices, and was last updated by  Brent Caudill 1 year, 4 months ago.

  • Author
    Posts
  • #9398

    avala
    Participant

    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
    });
  • #9408

    Alexander Bautz
    Keymaster

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

  • #9429

    avala
    Participant

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

  • #9431

    avala
    Participant

    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
    });
  • #9463

    Alexander Bautz
    Keymaster

    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

  • #10086

    Brent Caudill
    Participant

    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

You must be logged in to reply to this topic.