This is a question we often get asked: how to build a page containing conditional drop-down lists. You know the kind of thing: pick make of car then model, or country then city. I presume people often run into restrictions around stuff like this when using other high-productivity development platforms, and that’s why they ask.

Anyway, it’s very easy to do in OutSystems. In this blog post I’ll explain how, using countries and cities as an example.

Step 1 –  Prepare your Data Model

You’ll need at least two entities, with a relationship between them.

Step 2 –  Query the data in the Page Preparation

Add local variables to the page for SelectedCountryId and SelectedCityId.

Query for all countries.

Query for cities where the city’s country matches the selected country.

 

Step 3 –  Add drop-down list controls

Bind the Country drop-down list to the countries query and to the SelectedCountryId local variable.

Bind the City drop-down list to the cities query and to the SelectedCityId local variable.

Step 4 – Respond to the change of selected country

Add a change handler for the country drop-down list, using the OnChange Destination property.

In the change handler, trigger a re-query of the cities (for the selected country), then trigger an AJAX refresh of the cities drop-down list.

 

Done!

That’s it –  build and run your application, and you’ll see the appropriate cities listed for each country selected.

To see an example of this application in action, visit:

https://inside.outsystemscloud.com/countriesandcities/

Want to build and host your own OutSystems applications?

Set up your own free cloud development and hosting environment in under 5 minutes:

http://www.outsystems.com/home/