locked
Sharepoint parent child drop down lists without coding and infopath RRS feed

  • Question

  •    Hi,  

        Please let me know if we can create parent child drop down lists in sharepoint without using coding and infopath.

        ex:-- City and State are two lists  and we want to create parent child relation between these two lists.

        I want the easy way to resolve this parent child issue without using coding ( javascript , .net etc ) and infopath forms...just 

        want this to be resolved using Sharepoint ....Please assist on this query ASAP.   

       Thanks in advance

        Mohit Vij


    Vij

    Tuesday, December 10, 2013 12:59 PM

Answers

  • There is no functionality built in to SharePoint that covers this.  There are some projects available in CodePlex that implement it.  So although they use custom code, you don't have to do any coding.  Here's info on how to use one of the CodePlex solutions in 2010.

    http://cascddlistwithfilter.codeplex.com/discussions/218850


    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    • Proposed as answer by croute1 Tuesday, December 10, 2013 1:11 PM
    • Marked as answer by Pratik Vyas Friday, December 20, 2013 9:41 PM
    Tuesday, December 10, 2013 1:07 PM

All replies

  • There is no functionality built in to SharePoint that covers this.  There are some projects available in CodePlex that implement it.  So although they use custom code, you don't have to do any coding.  Here's info on how to use one of the CodePlex solutions in 2010.

    http://cascddlistwithfilter.codeplex.com/discussions/218850


    Paul Stork SharePoint Server MVP
    Principal Architect: Blue Chip Consulting Group
    Blog: http://dontpapanic.com/blog
    Twitter: Follow @pstork
    Please remember to mark your question as "answered" if this solves your problem.

    • Proposed as answer by croute1 Tuesday, December 10, 2013 1:11 PM
    • Marked as answer by Pratik Vyas Friday, December 20, 2013 9:41 PM
    Tuesday, December 10, 2013 1:07 PM
  • Here's a trick. There's a tiny bit of JavaScript coding required on your part, but I've done most of the work for you. All you need to do is set some parameters.

    The instructions are in the comments in the code below, but I'll lay them out here too in case Courier font hurts your eyes.

    This solution allows you to create a cascading lookup, whereby selecting a value in the first dropdown box limits the values available in the second dropdown box. This is only meant for 'New Item' forms.

    To use:

    1. Create a list with two columns: one for the options you want to appear in the first dropdown, and one column for the options to appear in the second. Only the values from the second will be saved, the first are just for filtering.
    2. Update the lines of code below with the correct details to reference your list.
    3. Upload this script to a document library on the site where it will be used. Make sure users have access to READ this document.
    4. Open the "New Item" form for the list you want in its own window (not a modal dialog) and click Site Actions > Edit Page
    5. Add a content editor web part to the page
    6. Set the Content Link property of the content editor web part to the URL path to the document you uploaded with this script

    <script>var  LookupCascader = (function(){function LookupCascader(targetField){this.containerCell;this.target = targetField;this.target_type;this.targetcontrol;this.longlookup = false;this.dropdownImg;var fieldControls = document.querySelectorAll("table.ms-formtable tbody tr td.ms-formbody");for (var i=0; i<fieldControls.length; i++){if(fieldControls[i].innerHTML.indexOf('FieldName="'+this.target+'"') != -1){this.containerCell = fieldControls[i];var selects = fieldControls[i].querySelectorAll("span select");if(selects.length > 0){this.targetcontrol = selects[0]; this.targetcontrol.disabled = true;this.target_type = "lookup"; }else{this.targetcontrol = fieldControls[i].querySelector("span input");this.targetcontrol.disabled = true;this.targetcontrol.value = "Loading...";var dropdown_img = fieldControls[i].querySelector("span img");if(dropdown_img != null){dropdown_img.style.display="none";this.dropdownImg = dropdown_img;this.longlookup = true}this.target_type = "text"}}}this.allowBlanks = true;this.showOriginal = false;this.firstoptions = [];this.secondoptions = [];this.targetcontrol;this.sourceList;this.innerColumn;this.outerColumn;this.outerColumnDisp = null;this.innerColumnDisp = this.target;this.outerColumn_field;this.filterField;this.filterValue;this.filterComparison = "Eq";this.filterType = "Text";this.Apply = Apply;this.onOuterSelectChange = onOuterSelectChange;this.onInnerSelectChange = onInnerSelectChange;this.containsString = containsString;this.getIndexOf = getIndexOf}function Apply(){if(typeof(this.dropdownImg) != "undefined"){this.allowBlanks = true;this.dropdownImg.click();this.containerCell.querySelector("span select.ms-lookuptypeindropdown").style.display = "none"}var sourcelist_outersort = this.outerColumn;var sourcelist_innersort = this.innerColumn;var clientContext = SP.ClientContext.get_current();var sourcelist = clientContext.get_web().get_lists().getByTitle(this.sourceList);var camlQuery = new SP.CamlQuery();var filtertext = "";if(null != this.filterField){if(null != this.filterValue){var filtertext = '<Where><'+this.filterComparison +'><FieldRef Name=\''+this.filterField+'\' />'+'<Value Type=\''+this.filterType+'\'>'+this.filterValue+'</Value></'+this.filterComparison +'></Where>'}}var camlString = '<View><Query>'+filtertext+'<OrderBy><FieldRef Name=\''+sourcelist_outersort + '\' />'+'<FieldRef Name=\'' + sourcelist_innersort + '\' /></OrderBy></Query></View>';camlQuery.set_viewXml(camlString);var sourcelist_items = sourcelist.getItems(camlQuery);var outerColumn_field = sourcelist.get_fields().getByInternalNameOrTitle(this.outerColumn);clientContext.load(sourcelist_items, "Include("+this.outerColumn+","+this.innerColumn+")");clientContext.load(outerColumn_field);clientContext.executeQueryAsync(Function.createDelegate(this, function(){if(this.allowBlanks){this.firstoptions.push("(None)");var tempArr = [];tempArr.push("(None)");this.secondoptions.push(tempArr)}var itemEnumerator = sourcelist_items.getEnumerator();while(itemEnumerator.moveNext()){var item = itemEnumerator.get_current();var category = item.get_item(this.outerColumn);if(null == category){ category = "(None)"}if(category.get_lookupValue){category = category.get_lookupValue()}if(containsString(this.firstoptions,category)){var value = item.get_item(this.innerColumn);var valIsNull = false;if(null == value){value = "(None)"; valIsNull = true}else if(value.get_lookupValue){value = value.get_lookupValue()}if(!valIsNull){this.secondoptions[getIndexOf(this.firstoptions,category)].push(value)}}else{var value = item.get_item(this.innerColumn);var valIsNull = false;if(null == value){value = "(None)";valIsNull=true}else if(value.get_lookupValue){value = value.get_lookupValue()}var arr = []; if(this.allowBlanks){arr.push("(None)")}if(!valIsNull){this.firstoptions.push(category);arr.push(value);this.secondoptions.push(arr)}}}var innerOptions = ""; var divToWrite = document.createElement("div");divToWrite.style.display="inline-block";var divFirstCell = document.createElement("div");divFirstCell.style.display="inline-block";if(null == this.outerColumnDisp){ this.outerColumnDisp = outerColumn_field.get_title(); }divFirstCell.innerHTML = this.outerColumnDisp + ":";var divSecondCell = document.createElement("div");divSecondCell.style.display="inline-block";if(null == this.innerColumnDisp){ this.innerColumnDisp = this.target; }divSecondCell.innerHTML = "&nbsp; "+this.innerColumnDisp + ":";divToWrite.appendChild(divFirstCell);divToWrite.appendChild(divSecondCell);var outerSelect = document.createElement("select");var i = 0;var outerId = "OuterValueSelector0";while(document.getElementById(outerId) != null){i += 1;outerId = "OuterValueSelector"+i}var innerSelect = document.createElement("select");innerSelect.disabled = this.allowBlanks;i = 0;var innerId = "InnerValueSelector0";while(document.getElementById(innerId) != null){i += 1;innerId = "InnerValueSelector"+i}innerSelect.id = innerId;outerSelect.id = outerId;for(var i=0; i< this.firstoptions.length; i++){var newOption = document.createElement("option");newOption.value = this.firstoptions[i];newOption.innerHTML = this.firstoptions[i];outerSelect.appendChild(newOption);if(0==i){for(var j=0; j < this.secondoptions[i].length; j++){var innerOption = document.createElement("option");innerOption.value = this.secondoptions[i][j];innerOption.innerHTML = this.secondoptions[i][j];innerSelect.appendChild(innerOption)}}}var parent = this;if(outerSelect.addEventListener){outerSelect.addEventListener("change",function(element){ parent.onOuterSelectChange(element, parent, innerId, outerId)})}else{outerSelect.attachEvent("onchange",function(element){ parent.onOuterSelectChange(element, parent, innerId, outerId)})}if(innerSelect.addEventListener){innerSelect.addEventListener("change",function(element){ parent.onInnerSelectChange(element, parent, innerId)})}else{innerSelect.attachEvent("onchange",function(element){ parent.onInnerSelectChange(element, parent, innerId)})}divFirstCell.appendChild(outerSelect);divSecondCell.appendChild(innerSelect);var counter = 0;var placeholderId = "ContainerDiv"+counter;while(document.getElementById(placeholderId) != null){counter +=1;placeholderId = "ContainerDiv"+counter}this.targetcontrol.insertAdjacentHTML('beforebegin',"<div id='"+placeholderId+"'></div>");var placeholderDiv = document.getElementById(placeholderId); placeholderDiv.style.display = "inline-block";placeholderDiv.appendChild(divToWrite);if(this.target_type == "text"){this.targetcontrol.value = this.secondoptions[0][0];if(typeof(this.dropdownImg) != "undefined"){this.dropdownImg.click();this.containerCell.querySelector("span select.ms-lookuptypeindropdown").style.display = "none";var choices = this.targetcontrol.choices.split("|");this.targetcontrol.match = this.secondoptions[0][0];this.targetcontrol.value = this.secondoptions[0][0];var choiceIndex = getIndexOf(choices,this.secondoptions[0][0]);if(choiceIndex<0){choiceIndex = ""}document.getElementById(document.getElementById(this.targetcontrol.id).getAttribute("optHid")).value=choiceIndex;this.dropdownImg.click();this.containerCell.querySelector("span select.ms-lookuptypeindropdown").style.display = "none"}}else if(this.target_type == "lookup"){this.targetcontrol.selectedIndex = getIndexOf(this.targetcontrol.options, this.secondoptions[0][0], true)}this.targetcontrol.disabled = false;if(!this.showOriginal){this.targetcontrol.style.display = "none"}}), Function.createDelegate(this, function(sender, args){this.targetcontrol.value = "An error occurred. Please ensure you have access to the "+this.sourceList+" list.";this.targetcontrol.insertAdjacentHTML('afterend',args.get_message())}))}function containsString(strArray, text) {var contains = false;for (i in strArray) {if (strArray[i] == text){ contains = true; break; }        }return contains}function getIndexOf(strArray, text, isOption) {var result = -1;if(typeof(isOption) == 'undefined'){isOption = false}if(isOption){for(var i=0; i < strArray.length; i++){if(strArray[i].text == text) return i}}else{for (i in strArray) {if (strArray[i] == text) return i}}return result}function onInnerSelectChange(element, parent, innerId){var newValue = document.getElementById(innerId).value;if(parent.allowBlanks && (parent.longlookup || parent.target_type=="lookup") && document.getElementById(innerId).selectedIndex == 0){newValue = "(None)"}if(parent.target_type == "text"){parent.targetcontrol.value = newValue;if(typeof(parent.dropdownImg) != "undefined"){parent.dropdownImg.click();parent.containerCell.querySelector("span select.ms-lookuptypeindropdown").style.display = "none";parent.targetcontrol.value = newValue;parent.targetcontrol.match = newValue;var choices = parent.targetcontrol.choices.split("|");var choiceIndex = getIndexOf(choices,newValue);if(choiceIndex<0){choiceIndex = ""}document.getElementById(document.getElementById(parent.targetcontrol.id).getAttribute("optHid")).value=choiceIndex;parent.dropdownImg.click();parent.containerCell.querySelector("span select.ms-lookuptypeindropdown").style.display = "none"}}else{var lookup = document.getElementById(parent.targetcontrol.id);lookup.selectedIndex = getIndexOf(lookup.options,newValue,true)}}function onOuterSelectChange(element, parent, innerId, outerId){var ovs = document.getElementById(outerId);var ivs = document.getElementById(innerId);ivs.selectedIndex = -1; ivs.innerHTML = "";ivs.disabled = (ovs.selectedIndex == 0 && parent.allowBlanks);for(var i=0; i<parent.secondoptions[ovs.selectedIndex].length; i++){var newoption = document.createElement("option");newoption.value = i!=0 || !parent.allowBlanks ? parent.secondoptions[ovs.selectedIndex][i] : "";newoption.innerHTML = parent.secondoptions[ovs.selectedIndex][i];ivs.appendChild(newoption)}if(parent.allowBlanks){if(typeof(parent.dropdownImg) != "undefined"){document.getElementById(parent.targetcontrol.id).value = "(None)";var choices = parent.targetcontrol.choices.split("|");var choiceIndex = getIndexOf(choices,"(None)");if(choiceIndex<0){choiceIndex = ""}document.getElementById(document.getElementById(parent.targetcontrol.id).getAttribute("optHid")).value=choiceIndex}else if(parent.target_type == "text"){document.getElementById(parent.targetcontrol.id).value = ""}else{var lookup = document.getElementById(parent.targetcontrol.id);lookup.selectedIndex = getIndexOf(lookup.options,"(None)",true)}}else{var newValue = parent.secondoptions[ovs.selectedIndex][0];if(parent.target_type == "text"){document.getElementById(parent.targetcontrol.id).value = newValue}else{var lookup = document.getElementById(parent.targetcontrol.id);lookup.selectedIndex = getIndexOf(lookup.options,newValue,true)}}}return LookupCascader})();
    
    // This solution allows you to create a cascading lookup, whereby selecting a value in the first  
    // dropdown box limits the values available in the second dropdown box. This is only meant for 'New Item' forms.
    
    // To use:
    // 1. Create a list with two columns: one for the options you want to appear in the first dropdown, 
    // and one column for the options to appear in the second. Only the values from the second will be saved, the first are just for filtering.
    // 2. Update the lines of code below with the correct details to reference your list.
    // 3. Upload this script to a document library on the site where it will be used. Make sure users have access to READ this document.
    // 4. Open the "New Item" form for the list you want in its own window (not a modal dialog) and click Site Actions > Edit Page
    // 5. Add a content editor web part to the page
    // 6. Set the Content Link property of the content editor web part to the URL path to this document
    
    
    //// REQUIRED
    //In the constructor below, indicate the display name of the field on your list you want to make into a cascading lookup. 
    var luc = new LookupCascader("Target Column Display Name"); // It can be text, choice, or lookup
    luc.sourceList = "Title of List from which to pull values"; 
    luc.outerColumn = "internal_name_of_column_for_outer_category";
    luc.innerColumn = "internal_name_of_column_for_drop-down_selection";
    
    //// OPTIONAL (uncomment if needed)
    //luc.allowBlanks = false;  // Prevent blank values from being selected
    //luc.filterField = "internal_name_of_column_to_filter_against";
    //luc.filterValue = "Value for Filter"; 
    //luc.innerColumnDisp = "Label for inner column"; //luc.outerColumnDisp = "Label for outer column"; //luc.filterComparison = "Eq"; //Valid: "Eq" "Neq" "Contains" //luc.filterType = "Text"; //luc.showOriginal = true; // Show the target control (for debugging) // You can add as many lookup cascaders to your form as you want. Just give each one a different variable name. ExecuteOrDelayUntilScriptLoaded(function(){ // you should call "Apply()" here on all lookup cascaders you've added above luc.Apply(); },"SP.js");</script>
    The end result will be that the specified field on your new form will have two dropdown boxes instead of whatever it had before. Choosing something from the first dropdown will cause related options to appear in the second dropdown.



    • Edited by thriggle Thursday, December 12, 2013 4:55 PM
    Thursday, December 12, 2013 4:53 PM