10
Views
1
Comments
Solved
Dropdown selection with cascaded tables in Reactive environment
Application Type
Reactive
Service Studio Version
11.10.4 (Build 36716)

I am just starting to test Outsystems and I selected the Reactive environment although most of the documentation and demo videos are for the Traditional web.

In the example attached I try to create customers (Customer Entity). Each customer has an address with a city (City entity), and each city is in a State (State Entity). There are cities with the same name but from different States (for example "Rio Branco" and "Água Branca".

1- How can I include a dropdown box in the customer detail screen so that I can select a state and, consequently, filter the listing of the cities to select?

2- Why the listing of cities is limited to 50? for example, the last city (Tarauacá) does not appear in the drop down listing.


Thank you   

DropdownSelection.oml

Rank: #94
Solution

Hello Rui (great name!),

First of all, welcome to OutSystems and to the community forums :)

If you pretend to learn more about Reactive Web Applications, please consider this guided path:

https://www.outsystems.com/training/paths/18/becoming-a-reactive-web-developer/


Responding to your questions:

1 - For your use case, I'd suggest that you create 2 Dropdowns: a first one to select the state and a second one to select the city. The second dropdown (cities) will depend of the first one (states), so you need to filter the cities by the selected state.

Since you're using GetCustomerById.List.Current variable as the source record to create the customer (and this entity doesn't have a StateId attribute), you'll need a variable to store the selected StateId and bind it to your first dropdown (states). In order to do this, I added States entity to your GetCustomerById aggregate and I bound it to your first dropdown (this will allow you to have this information already in the screen when you're editing a Customer):

Then you'll need to change your GetCities aggregate to be filtered by this selected state:

(GetCities was renamed to GetCitiesByState when adding this filter)

Finally, you just need to use OnChange event from first dropdown (states) to Refresh your second aggregate, which result corresponds to the options of your second dropdown (cities):

(OnChange event of a dropdown is triggered when the value of that dropdown changes)

Everytime you change the selected state, you will get your cities again, filtered by that new selected state.


2 - The list of cities is limited to 50 because of Max. Records property:

When you use an Aggregate in a screen to Fetch Data from Database, its Max. Records property is set to 50 by default. This means that only 50 records will be read from the Database. Consider to increase this value if you pretend to fetch more records.


Please consider attached OML file with these changes.


Hope that this helps you!


Kind regards,

Rui Barradas

DropdownSelection.oml