Create a cascading dropdowns using SharePoint REST API

In this post, I will explain how to create a cascading drop down in SharePoint using its REST API. There are some other options available too for the same but they have some kind of limitations.

One solution that comes up very often is to use JQuery utility known as SPServices, for details on how to implement it visit this link. The problem with this approach is that it works only in list forms. I cant use it in Page Layouts.

Another solution is to use ASP.NET dropdown contrls with SharePoint’s SPDataSource control. For more details visit this link. But it has a major problem that dropdown control needs to have AutoPostback set to true which reloads the page everytime a selection is changed, which I think is not acceptable anymore.

The approach that i will explain is particularly useful when you have to add cascading dropdowns in Page layouts or any custom solution that just uses HTML and Javascript. In this walkthrough, I will create a cascading drop down that will display all the States which are in a particular country. Another goodie with this solution is that it is not dependent on any external javascript library except JQuery.

To begin with, we need to create two lists in SharePoint that will store all the countries and states.

STEP 1  – Create a Countries list which will just have a ‘Title’ column as shown below –

STEP 2 – Create a list called States which will have a ‘Title’ coumn and a lookup field called ‘Country’ which will lookup to ‘Title’ field in ‘Countries’ list. It should look somethign lke this –

STEP 3  – Now, as we have the data structure in place all we need is to write the javascript that will empower the following two dropsdowns to behave like cascading dropdowns –

<select id=”country” title=”Country”></select>
<select id=”province” title=”State”></select>

STEP 4 –  Simply download my javascript file from here. Upload it to some document library and in your custom solution add a reference to this file.

Javascript explained –

Now, let me just talk you through some of the javascript code which I think needs a bit of an explaining.

 

function getCountries(listName, siteurl, success, failure) {
$.ajax({
url: siteurl + “/_api/web/lists/getbytitle(‘” + listName + “‘)/items?$orderby=Title asc”,
method: “GET”,
headers: { “Accept”: “application/json; odata=verbose” },
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}

The code above is making a REST call to “Countries’ list in SharePoint to get  all the countries which is used to populate the country dropdown. listName should be the name of the list with Countries. Pretty straightforward.

 

function getStates(listName, siteurl,selectedcountryid, success, failure) {
var url = siteurl + “/_api/web/lists/getbytitle(‘” + listName + “‘)/items?$Select=Title,Country/Id&$expand=Country/Id&$filter=Country/Id eq ” + selectedcountryid + “&orderby=Title asc”;
$.ajax({
url: url,
method: “GET”,
headers: { “Accept”: “application/json; odata=verbose” },
success: function (data) {
success(data);
},
error: function (data) {
failure(data);
}
});
}

This is the code that is filtering the states based on a country. It is making a REST call to ‘States’ list and getting the list of states belonging to a Country based on country id. Please note that in ‘States’ list, ‘Country’ is a lookup filed that looks up to the Country list. To query on lookup field, we need to use the Country ID from the ‘Country’ list and selectedcountryid parameter in above method is just that. The filter parameter in the REST url (see below) should use Country/Id rather than just Country where Country is the ‘Country’ field in the ‘States’ list and ‘Id’ is the ID field in the ‘Country’  list that holds country ID. Also, note the Country/Id in the Select and expand parameters in the REST url below as this is how we are supposed to query lookup field using REST api.

siteurl + “/_api/web/lists/getbytitle(‘” + listName + “‘)/items?$Select=Title,Country/Id&$expand=Country/Id&$filter=Country/Id eq ” + selectedcountryid + “&orderby=Title asc”

Rest of the code, I guess is self explanatory which I will skip.

 

Comments

  1. Jason Robertson says:

    Good work works beautifully

Leave a Comment

Your email address will not be published. Required fields are marked *