Cascading Managed Metadata
Update (26-Aug-2020)
I have contributed a SharePoint framework webpart which provides similar functionality mentioned in the article below. Do check that sample if you want to develop the functionality below in modern SharePoint.
Functionality
Link to the sample
https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-graph-cascading-managed-metadata
Original article
Recently I had to work on a requirement where the data stored from taxonomy should be shown as cascading dropdowns. An example shown below — on page load the continents load, then on selecting a continent the countries under that continent load and finally selecting a country loads the regions under that country.
The taxonomy structure
Converted to dropdown
This had to be done on client side hence it was done using HTML, JSOM and jQuery.
Credits
There are some excellent blogs by SharePoint professionals which helped a me a lot in completing this requirement.
Vardhaman Deshpande’s blog on working with taxonomy and javascript is brilliant and it helped me get started with getting the required data. Make sure you read other blogs written by him as well. They are great.
The Office Dev PnP team come up with cool things that you can do with SharePoint. This post uses the caching technique provided by the PnP team. Have a look at Office Dev PnP page for some excellent videos and posts on SharePoint development.
Scot Hillier’s blogs are awesome. One of the many things I like about his blogs are that they provide great information on how to write javascript in general for SharePoint. I used bits and pieces from some of his blogs to write the script required.
Elio Struyf writes fantastic blogs on SharePoint search. I used information from some his blogs related to search refiners to create the second part of the requirement.
The script
This script queries the managed metadata and gets the path of all the terms under the required term set and stores the paths in array. The paths are stored in a cookie so that querying the managed metadata service everytime can be avoided.
Note: This is not the only way of storing the term(s) data. Depending upon the amount of data the mechanism can vary.
This script is then referenced in an HTML file which then is added as the source of a content editor webpart.
I have explained the blocks of the script separately below. The entire script can be found here.
Variables used
The snippet below the shows the arrays and other variables used. Comments explain what each of them represents.
Functions used
Document ready
This function checks if the cookie is null, if it is null then it gets the term set data after loading SP.Taxonomy.js. If the cookie is not null then the function to load continent data is called.
Get Term Set Data
This function gets the term set data based on the ID supplied. The ‘Include(PathOfTerm)’ makes sure that only the path of terms are loaded. Each path is pushed into an array. After that the array is stored in a cookie.
Binding data to dropdowns
Once the data is in the array, it is bound to the dropdown. First functions binds continent data and the next two functions bind the data to country and region. (Getting data into those arrays in explained later).
Continent and Country Dropdown change handler
Once a continent is selected, depending upon the selected value, from the path of the terms array the country values are extracted and pushed into the CountryVals array. The path of child term contains semi colon(s). The value after the first semi colon will be the country value. The region values are computed in a similar way as well.
Cookie functions from PnP
These functions provided by PnP are easy to understand and they function as per their name.
The HTML
And finally the HTML that refers the script and is the source of a content editor web part. The HTML also refers Office Fabric UI which makes the UI Office like.
