Cascading Dropdown in nintex using REST (Client Side)

Default cascading dropdown in Nintex can be slow if there are more dorpdowns, So I decided to implement it using REST.

Using REST :

http://platinumdogs.me/2013/03/14/sharepoint-adventures-with-the-rest-api-part-1/

https://www.nothingbutsharepoint.com/sites/devwiki/articles/pages/got-rest-querying-sharepoint-list-data-using-rest-services-client-side-part-1.aspx

Using rest Filters

http://stackoverflow.com/questions/5379371/querying-choice-field-in-sharepoint-using-rest

This is how My Final Nintex Form look like

FinalList

Create 3 lists as mentioned below. In regions list create a column called “Country” which will look up to the countries list(Column Lookup type). In states list create a column called “Regions Name” which will look up in to Regions list for list of regions corresponding to the states.

This is how

I have 3 lists

1. Countries

2.Regions

3. States

Countries List

countries

I have list of countries in this list.

Regions List

Regions

I have list of all my regions in the title column, the country column is lookup to the Countries list.

States List

States

As you can see, I have lookup column to Regions which will look for all regions corresponding to the sate.

Now create REST client side filter. You can refer above links for REST for creating filters.

My case, my filter will look something like this.

http://SERVER/sites/MySite/_vti_bin/listdata.svc/Regions?$expand=Country&$filter=Country/Title eq ‘canada’

it will return all the regions related to country “Canada”

RestService

Now, you need to write an event handler when country is selected and populate the regions in region dorpdown related to the country selected. The same is repeated for State Dorpdown.

Here you Go :

var countryField;
var regionField;

NWF$(document).ready(function () {
countryField = NWF$(“#” + varCountry);
regionField = NWF$(“#” + varRegion);

countryField.change(refreshRegion);
regionField.change(refreshState);
});

function refreshRegion() {
var selectedCountry = “”;
selectedCountry = NWF$(“#” + varCountry + ” option:selected”).text();

WaitCursor();

var restQuery = “http://SERVER/sites/MySite/_vti_bin/listdata.svc/Regions?$expand=Country&$filter=Country/Title eq ‘” + selectedCountry + “‘”
NWF$.getJSON(restQuery, function (data) {

var options = “<option value=’0′>(None)</option>”;

//Process the result and prepare the options
NWF$(data.d.results).each(function () {

options += ‘<option value=”‘ + this.Id + ‘”>’ + this.Title + “</option>”
});

NWF$(“#” + varRegion).html(options);

ReadyCursor();
});
}

function refreshState() {
var selectedRegion = “”;
selectedRegion = NWF$(“#” + varRegion + ” option:selected”).text();

WaitCursor();

var restQuery = “http://SERVER/sites/MySite/_vti_bin/listdata.svc/States?$expand=RegionName&$filter=RegionName/Title eq ‘” + selectedRegion + “‘”

NWF$.getJSON(restQuery, function (data) {

var options = “<option value=’0′>(None)</option>”;

//Process the result and prepare the options
NWF$(data.d.results).each(function () {

options += ‘<option value=”‘ + this.Id + ‘”>’ + this.Title + “</option>”
});

NWF$(“#” + varState).html(options);
ReadyCursor();
});
}

function WaitCursor() {
document.body.style.cursor = ‘wait’;
}

function ReadyCursor() {
document.body.style.cursor = ‘default’;
}

My Final From Looks like.

FinalCascadingDropDown

THE END

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s