It has been quite awhile since my last blog post so please excuse my absence.
I wanted to come back strong with a tutorial on how I implemented cascading dropdowns in a Sharepoint 2010 site. Please enjoy.
If you are not familiar with Sharepoint, that is quite alright. Perhaps this tutorial will inspire you to explore. For those of you that are familiar, hopefully you find this tutorial helpful. I found some great blogs that were very well written and taught me a lot so I thought I would share what I learned. It may not be the best and only way to implement the solution but it worked for me so here we go.
Sharepoint 2010 unfortunately does not provide cascading dropdowns as an Out-of-the-box feature for their lists and document libraries. But like any business analyst would agree, when it comes to data management and user input, there is an undeniably high demand for this functionality. Filtering corresponding selections based on a previously defined value not only helps ensure better data but also allows the user to use the tool more intuitively cutting down on turn around time.
Step 1: Manage reference files
- At the top level site of your desired site for the dropdowns
- Upload the files to the Site Assets list. (I chose this directory for flexibility and organization purposes, you can chose to upload these files anywhere your desired site would have access to).
Step 2: Prepare the lists for the dropdowns
- Create a list for the top level dropdown values (i.e., Category)
- Create a list for the second level dropdown values (i.e., Subcategory)
- Ensure that this second level list includes a lookup column to the top level dropdown to establish a relationship
- Add a lookup column to each list in your desired list or document library for the dropdowns
Step 3: Create custom New and Edit forms using Sharepoint Designer
- Navigate to the desired site
- Open the site in Sharepoint Designer (Site Actions –> Edit in Sharepoint Designer)
- Under the desired list or document library
- Copy, paste, and rename the NewForm.aspx page to create a custom New input form (It is not suggested to edit the OOB NewForm.aspx to prevent any unknown dependencies to fail)
- Copy, paste, and rename the EditForm.aspx page to create a custom Edit form
- In the list or document library properties, remember to assign the newly created custom forms as default
- Back at the site UI, navigate to the list or document library settings
- Under Advanced settings, select “No” for the “Launch forms in a dialog?” option (This step is so that the new and edit forms will not display in a dialog window so the page can be edited)
- Create a new item (this should now be using the newly created new form, double check the page name in the url)
- Edit the new item page (Site Actions –> Edit Page)
- Add a Content Editor Webpart
- Edit the webpart and select “Hidden” under the Layout section
- Click on the content editor text area and open the HTML Source using the Ribbon
- Edit the edit form in the same manner as the new form
- Navigate back to the list or document library settings and reset the “Launch forms in a dialog?” option back to “Yes”
Step 5: Perform ample testing and enjoy the newly implemented cascading dropdowns
What would be amazing is if this functionality could work for multi-select list boxes as well. Maybe in Sharepoint 2013? A girl can hope.
As always, thank you very much for reading. Please be sure to comment with questions or suggestions!