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)
List 2. RequestAsset
The list contains sub type of the requirement,
Hardware - Input, Output
Software - Programming, Configuration
sr no
Column Name
Column Type
Description
1
RequestType
Lookup
Get inf from (RequestType list) and Column is Title
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
sr no
Column Name
Column Type
Description
1
RequestAsset
Lookup
Get inf from (RequestAsset list) and Column is Title
List 4. New Requirement
This is the list where we can achieve our output,
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
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() {
  5. var Dropdownlist = new Array();
  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. }
  49. var leaf = $("select[Title='"+params.mainformcolumnleafref+"'], select[Title='"+
  50. params.mainformcolumnleafref+" Required Field']," +
  51. "select[Title='"+params.mainformcolumnleafref+" possible values']");
  53. var selectedoption = params.selectedoptionue;
  54. ddwndropdownvalue[ddwnindex].selectedoptionue = 0;
  56. $(leaf).empty();
  58. var dropdownvalue = "<option value='0'>"+params.defaultddwn+"</option>";
  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];
  90. if(thisCascade.rootlistname != null)
  91. {
  92. var root = $("select[Title='"+thisCascade.rootlistname+"'], select[Title='"+
  93. thisCascade.rootlistname+" Required Field']");
  95. $(root).attr("methoddropdownIndex",index);
  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>