SharePoint Online: How to Implement Cascading Drop-down in 3 Steps?

Requirement: Cascading drop-down list in SharePoint Online.

How to Implement Cascading Lookup in SharePoint Online List Forms?

Before implementing cascading drop down in SharePoint Online lists, we need lists with data for lookup. In my case, I’ve three custom lists on my SharePoint Online site. Namely: Region, Country, and Project Tasks, and I need a cascading lookup from Regions to Country drop-down in my Project Tasks list.

List 1: Region
The region list has a single column, “Title,” with a list of regions.

List 2: Country
The country list has a “Title” column which holds the value of the country, and the “Region” lookup column from the “Region” list.

List 3: Project Tasks
Where the “Region” lookup column is from the “Region” list and the “Country” Lookup column is from the “Country” List.

Step 1: Download jQuery and SPServices JavaScript Files and upload to SharePoint

1. I’ve used compressed version of jQuery 3.4 from https://code.jquery.com/jquery-3.4.1.min.js
2. For SPServices, go to: https://sympmarc.github.io/SPServices/SPServices.zip

Now, Upload these two JS files to your “Site Assets” library (or any other document library). This step is optional when using any existing CDN for the JavaScript files above.

Step 2: Create a Script for Cascading Lookup
Create a Text file with the below cascading drop-down script and upload it to the “Site Assets” library. Set the URL of jQuery and SPServices JavaScript files according to your environment. Set parameters for “SPCascadeDropdowns” function.

<script language="javascript" type="text/javascript" src="https://crescent.sharepoint.com/sites/marketing/2018/SiteAssets/jquery-3.4.1.min.js"></script>
<script language="javascript" type="text/javascript" src="https://crescent.sharepoint.com/sites/marketing/2018/SiteAssets/jquery.SPServices.min.js"></script>
<script language="javascript" type="text/javascript">
 $(document).ready(function() {
  $().SPServices.SPCascadeDropdowns({
   relationshipList: "Country",
   relationshipListParentColumn: "Region",
   relationshipListChildColumn: "Title",
   parentColumn: "Region",
   childColumn: "Country",
   debug: true
  });
 });
 </script>

These parameters are self-explanatory! Here:

• relationshipList: “Country” : Name of the relationship list which contains parent and child columns.
• relationshipListParentColumn: “Region” : Column internal name from the relationship list (Country)
• relationshipListChildColumn: “Title” : Column internal name from the Country list
• parentColumn: “Region”: Column display name from the list where the drop down is implemented.
• childColumn: “Country”: Column display name from the list where the drop down is implemented.

Step 3: Add Script to SharePoint Online List Forms
The final step is to link the script to list forms. Here is how:

1. Go to NewForm.aspx and EditForm.aspx pages, Click on Settings and then “Edit Page” from settings menu. 

   

2. Add a Content Editor web part, Set the Content editor web part’s property to the text file with the script. Under the “Layout” section of web part properties, tick the “Hidden” checkbox to hide the web part from the user interface. Click on the “Stop Editing” button once you are done with the edit.

   

You can also edit the NewForm.aspx page in SharePoint designer and place the script just below:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

And here is the cascading lookup in action:

This method of cascading drop-down works in both SharePoint Online lists and libraries. Please note, this cascading doesn’t work on “Quick Edit” mode. So, You may have to disable quick edit in SharePoint. Another method to implement cascading drop-down using REST APIs: https://github.com/mrackley/HillbillyCascade

Alright, How about Multi-level cascading?
Well, You can call the SPServices.SPCascadeDropdowns() function any number of times you wish with different parameters to achieve cascading to multiple fields!