Post
Ask Question

Three Level Cascading Dropdown SharePoint List By Using JavaScript And Script Editor WebPart

Problem Statement
 
Create a SharePoint dropdown list to Request Asset.
 
Output will look like this,
 
Solution
 
We need to create four SharePoint lists as shown the table below Problem statement.
 
List1. RequestType
 
The list contains Type of requirement (Hardware/Software)
  • Create SharePoint List named “RequestType”

    Add following data in title column
List 2. RequestAsset
 
The list contains sub type of the requirement,
 
Hardware - Input, Output
Software - Programming, Configuration
  • Create SharePoint List named “RequestAsset”
  • Go to setting and create column Named “RequestType” and column type is “Lookup” as shown below.
sr no
Column Name
Column Type
Description
1
RequestType
Lookup
Get inf from (RequestType list) and Column is Title
  • All column will look like this
  • Add the following data in this list
List 3. AssetNames
 
The list contains sub type of the requirement,
Input - Keyboard, Mouse, Joystick
Output - Monitor, Printer
Programming - Visual Studio, Matlab, Netbeans
Configuration - Infopath, Sharepoint Designer
  • Create SharePoint List named “AssetNames”
  • Go to setting and create column Named “RequestAsset” and column type is “Lookup” as shown below.
sr no
Column Name
Column Type
Description
1
RequestAsset
Lookup
Get inf from (RequestAsset list) and Column is Title
  • All column will look like this
  • Add the following data in this list

    All data is Set for cascading. Now to access this data, create fourth list
List 4. New Requirement 
 
This is the list where we can achieve our output,
  • Create SharePoint List named “New Requirement”
  • Add three lookup columns as shown below
sr no
Column Name
Column Type
Description
1
RequestType
Lookup
Get inf from (RequestType list) and Column is Title
2
RequestAsset
Lookup
Get inf from (RequestAsset list) and Column is Title
1
AssetNames
Lookup
Get inf from (AssetNames list) and Column is Title
 
Refer below 3 screenshots for three columns,
 
RequestType column
 
RequestAsset Column
 
RequestNames Column
  • All column will look like this
  • Your list will look like following, To write code for cascading, click on New item as shown below
  • Following new form will open
  • Edit the form by using Gear icon on Top Right side
  • Click on Insert button on Top Left side then select Media and Content, then click on Script Editor and click Add button on right
  • Click on edit snippet
  • Paste below code and click insert and the stop editing the page
  • Following piece of code is for first level cascading dropdown
Output
 
If you select Hardware in first column, Request Asset will filter with Input and Output Only
 
If you select Software in first column, Request Asset will filter with Configuration tools and Programming Only.
 
Following piece of code is for Second level cascading dropdown,
 
Output
 
If you select Request Type as Hardware and Request asset as Input then
Third column will filter with “Keyboard”, ”Mouse”, Joystick” dropdown options.
If you select Request Type as Hardware and Request asset as Output then
Third column will filter with “Keyboard”, ”Mouse”, Joystick” dropdown options.
 
Common method for above both piece of code is $().methoddropdown(Dropdownlist); and the whole code is as follows
  1. <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>  
  2. <script type="text/javascript">  
  3.     $(document).ready(function() {  
  4.       
  5.         var Dropdownlist = new Array();  
  6.           
  7.         Dropdownlist.push({  
  8.             rootlistname: "RequestType", //1st (root) list Display name  
  9.             leaflistname: "RequestAsset", //2nd (leaf) List name  
  10.             leaflookupcolumn: "Title", //Internal field name in leaf List used in lookup  
  11.             mainformcolumnleafref: "RequestAsset", //main form (4th list)2nd column Display name  
  12.             mainformcolumnrootref: "RequestType", // main form (4th list) 1st column Display name  
  13.             defaultddwn: "< Select a Asset Type >"  
  14.         });  
  15.             Dropdownlist.push({  
  16.             rootlistname: "RequestAsset", //2nd (root) list Display name  
  17.             leaflistname: "AssetNames", //3rd (leaf) List name.  
  18.             leaflookupcolumn: "Title", //Internal field name in leaf List used in lookup  
  19.             mainformcolumnleafref: "AssetNames", //main form (4 th list) 3rd column Display name  
  20.             mainformcolumnrootref: "RequestAsset", // main form (4 th list) 2nd column Display name  
  21.             defaultddwn: "< Select a Asset Name >"  
  22.         });  
  23.         $().methoddropdown(Dropdownlist);  
  24.         });  
  25. $.fn.methoddropdown= function (dropdownvalueArray)  
  26. {  
  27.     var ddwndropdownvalue = new Array();  
  28.      var mainform = getParameterByName("ID") == null;  
  29.     $.fn.methoddropdown.Cascade = function(root,ddwnindex)  
  30.     {  
  31.         if (ddwnindex!= null && ddwnindex+1 > ddwndropdownvalue.length)  
  32.         {  
  33.             return;  
  34.         } else if(ddwnindex== null) {  
  35.             ddwnindex= $(root).attr("methoddropdownIndex");  
  36.         }         
  37.         var params = ddwndropdownvalue[ddwnindex];  
  38.         var rootID = $(root).val();  
  39.         if (root == null)  
  40.         {     
  41.             rootID = $("select[Title='"+params.rootlistname+"'], select[Title='"+  
  42.                 params.rootlistname+" Required Field']").val();  
  43.         }  
  44.         if (rootID == undefined)  
  45.         {  
  46.             rootID = 0;  
  47.         }  
  48.           
  49.         var leaf = $("select[Title='"+params.mainformcolumnleafref+"'], select[Title='"+  
  50.             params.mainformcolumnleafref+" Required Field']," +  
  51.             "select[Title='"+params.mainformcolumnleafref+" possible values']");  
  52.           
  53.         var selectedoption = params.selectedoptionue;  
  54.         ddwndropdownvalue[ddwnindex].selectedoptionue = 0;  
  55.                   
  56.         $(leaf).empty();  
  57.       
  58.         var dropdownvalue = "<option value='0'>"+params.defaultddwn+"</option>";  
  59.   
  60.         var varstore = $.ajax({  
  61.             url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.leaflistname+  
  62.                 "')/items?$select=Id,"+params.leaflookupcolumn+","+params.mainformcolumnrootref+  
  63.                 "/Id&$expand="+params.mainformcolumnrootref+"/Id&$filter="+params.mainformcolumnrootref+  
  64.                 "/Id eq "+ rootID+"&$orderby=" + params.leaflookupcolumn,  
  65.             type: "GET",  
  66.             dataType: "json",  
  67.             headers: {  
  68.                 Accept: "application/json;odata=verbose"  
  69.             }         
  70.         });  
  71.         varstore.done(function (data,textStatus, jqXHR){  
  72.             for (index in data.d.results)  
  73.             {  
  74.                 dropdownvalue += "<option value='"+ data.d.results[index].Id +"'>"+  
  75.                     data.d.results[index][params.leaflookupcolumn]+"</option>";  
  76.             }  
  77.             $(leaf).append(dropdownvalue);  
  78.             if(!mainform)$(leaf).val(selectedoption);  
  79.             $().methoddropdown.Cascade(null,Number(ddwnindex)+1);  
  80.         });  
  81.         varstore.fail(function (jqXHR,textStatus,errorThrown){  
  82.             alert("Error retrieving information from list: " + params.leaflistname + jqXHR.responseText);  
  83.             $(leaf).append(dropdownvalue);  
  84.         });  
  85.     }      
  86.     for (index in dropdownvalueArray)  
  87.     {  
  88.         var thisCascade = dropdownvalueArray[index];  
  89.           
  90.         if(thisCascade.rootlistname != null)  
  91.         {  
  92.             var root = $("select[Title='"+thisCascade.rootlistname+"'], select[Title='"+  
  93.                 thisCascade.rootlistname+" Required Field']");  
  94.               
  95.             $(root).attr("methoddropdownIndex",index);  
  96.               
  97.             $(root).change(function(){  
  98.                 $().methoddropdown.Cascade(this,null);          
  99.             });              
  100.         }   
  101.         thisCascade.selectedoptionue = $("select[Title='"+thisCascade.mainformcolumnleafref+"'], select[Title='"+  
  102.             thisCascade.mainformcolumnleafref+" Required Field']," +  
  103.             "select[Title='"+thisCascade.mainformcolumnleafref+" possible values']").val();    
  104.         ddwndropdownvalue.push(thisCascade);  
  105.     }  
  106.     $().methoddropdown.Cascade(null,0);          
  107.     function getParameterByName(key) {  
  108.             key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars  
  109.             var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));  
  110.             return match && decodeURIComponent(match[1].replace(/\+/g, " "));  
  111.         }}  
  112. </script>  


Similar Articles