SharePoint Online: How to Implement Cascading Drop-down in 3 Steps?
Requirement: Implement cascading drop-down list in SharePoint Online list forms.
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.
- I’ve used compressed version of jQuery 3.4 from https://code.jquery.com/jquery-3.4.1.min.js
- For SPServices, go to: https://sympmarc.github.io/SPServices/SPServices.zip
Step 2: Create a Script for Cascading Lookup
These parameters are self-explanatory! Here:
- relationshipList: “Country” : Name of the relationship list containing 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 the list forms. Here is how:
- Go to NewForm.aspx and EditForm.aspx pages, Click on Settings and then “Edit Page” from settings menu.
- 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!
5 thoughts on “SharePoint Online: How to Implement Cascading Drop-down in 3 Steps?”
will it work for document library forms also?
Could you address what to do if you have a space in your List name or column name?
On column names: Use the “Internal name” instead of DisplayName. E.g. replace space character with x0020. For list Names with Space – Wrap the list name inside double Quote (E.g sourceList: “List Name”)
After adding the URL, the “Content Editor” gives the error:
Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator.
I’ve tried 2 versions of the url. One provided by the “Copy Link” option in SharePoint and one where I remove the extra tag at the end:
https://[masked url]/:t:/r/sites/[masked sub site]/[masked sub site]/SiteAssets/TreasuryProductsDropdown.txt?csf=1&web=1&e=7JATC9
https://[masked url]/:t:/r/sites/[masked sub site]/[masked sub site]/SiteAssets/TreasuryProductsDropdown.txt
Try: https://[masked url]/sites/[masked sub site]/[masked sub site]/SiteAssets/TreasuryProductsDropdown.txt and make sure the linked jQuery and SPServices JS files are accessible.