Reactive - Refresh dropdown list dependant on another dropdown
Application Type
Reactive
Service Studio Version
11.10.15 (Build 40206)

I'm using the Locations component to help users fill the Country and Region (eg State) of a place in an address record.

After selecting the Country, I'd like the Region (CountryState) list in the second dropdown to be refreshed.

I did create an aggregate (GetCountryStatesByCountryCode) and launch a RefreshData event on the OnChange event of the Country dropdown. The Event runs, but the list doesn't refresh. 

And the Refresh is simply:

Which is shown to test fine. I have a feeling it's the Filter "GetCountries.List.Current.Country.Code = CountryState.CountryCode" that doesn't work. 

It's not the refresh of the UI that just doesn't happen, since I get a count of 38 CountryStates, regardless of the Country I'm selecting, which is the number of CountryStates in Afghanistan, the first Country in the list. Saving with Country=Canada and re-entering the form doesn't help, so it's definitely not the UI not refreshing.

Thanks in advance for your help.

mvp_badge
MVP
Solution

Hello again Joël,

Thank you for sharing your OML.


So I did a few changes in your code, I'll resume them in here:

  • Created a local variable SelectedCountryId (Country Identifier) and bound it to the first dropdown (Country dropdown);

  • Created another local variable SelectedRegionId (CountryState Identifier) and bound it to the second dropdown (Region dropdown);

    (These 2 local variables allow me to control only the values that the user selected. It is just a way for better understanding)

  • Changed your GetCountryStatesByCountryCode Aggregate to GetCountryStatesByCountryId. You had the correct source entities (CountryState and Country), but you needed to filter by the selected country from the first dropdown. So the filter would be:
    Country.Id = SelectedCountryId

    (This Aggregate will return the specific Regions for the selected Country and it should be bound to the second dropdown. Basically, it joins the CountryStates with the Countries by CountryCode and filters by the SelectedCountryId variable coming from the first dropdown)

  • Since the second dropdown is fully depending on the first one, you can specify the Fetch Property of GetCountryStatesByCountryId Aggregate to run Only on demand and you can enable it only when a country is selected

  • Finally, since I created 2 additional local variables for these dropdowns, I had to pass them to the GetOrganisationById.List.Current record in the SaveDetail action, because it is the record that you are passing to OrganisationCreateOrUpdate action.
    So I had to assign the values to the record before calling the server action:

Please refer to attached OML with these changes.


Let me know if it worked for you!


Kind regards,

Rui Barradas

HostManager.oml

mvp_badge
MVP

Hello there Joël,

Hope you're doing well.


Did you try to debug to see what is the value for the variable GetCountries.List.Current.Country.Code?

What is the variable that is bound to your Country dropdown?

If possible, can you share your OML?


Kind regards,

Rui Barradas

Hi Rui. Indeed, the GetCountries.List.Current.Country.Code stays "AF" even after I change it.

I can't share the OML... 

Perhaps it's my Country dropdown, then?

(Organisation is the parent record...)

Maybe it's the wrong variable?

Maybe I need to Assign Country.Id to another variable after selecting it?

mvp_badge
MVP

Hello again Joël,

So it seems that the problem is because you are assigning the result of the Country dropdown to the variable GetOrganisationById.List.Current.Organisation.CountryId, but you are not using it afterwards to get the Country Code. That's why its value stays "AF" (probably the current value resulting from the GetCountries Aggregate).


If I were you, I'd have an extra CountryId local variable for the dropdown and an Aggregate GetCountryStatesByCountryId instead, having a join between CountryState and Country entities by CountryCode, and filtering the Aggregate by CountryId. And this is the Aggregate that you should use in your CountryStates dropdown.


The join condition between the entities in the Aggregate should be something like:

Country.Code = CountryStates.CountryCode


And the filter should be something like:

GetCountries.List.Current.Country.Id = CountryId


Meaning that, by the time you select a Country (from Country dropdown), your variable CountryId changes and it is the one that you're using to filter the second Aggregate used in your CountryStates dropdown.


Finally, this would be the Aggregate refreshed in the OnChange action :)


Hope that this helps you!


Kind regards,

Rui Barradas

I also note that the Country saves correctly in the Organisation record, so it's selecting correctly, at lease at the SaveDetails action.

The key between Country and CountryState is CountryCode, though. Not CountryId, which is not present in the CountryState table... It's not enforced as a type, so it' snot a true database relationship, either. 

That's why I created the Aggregate GetCoutryStatesByCountryCode instead.

I think I'll try to amend the Locations module itself, as it's weirdly designed.

Stay tuned.


mvp_badge
MVP

Hello Joël,

I believe you can join those entities using CountryCode attribute. Did you read my updated previous response?


Kind regards,

Rui Barradas

Hello, Joël Séguin

I have experience in this type of relationship.

you already show the structure and data of the Coutry table,

but you can show the structure and data of the State table.

when I see your content I can give you the answer you are looking for


Thanks so much for helping me, Rui!

Here is the structure and data of the CountryState table. Here, joined on the Country.Code as suggested.
The Test Value is "CA" as the filter is GetCountries.List.Current.Country.Code = CountryState.CountryCode.

I'm still stuck and the GetCountries.List.Current.Country.Code in my debug message I added in my Dropdown_CountryOnChange event (shown in my first image).


Hmm.. Looking at the debug on the OnChange event of the Country dropdown, at the start, I see the following:

Shouldn't Country have something shown?

Do I need to have an Aggregate to GetCountryById once the selection is made?

mvp_badge
MVP

Hello there Joël,

This seems to be a different Aggregate :)

Because you have 3 sources in that image: Organisation, CountryState and Country.


I believe GetCountryStatesByCountryCode Aggregate only has 2 sources: CountryState and Country.


Can you please confirm?


Kind regards,

Rui Barradas

Hi Rui,

All right. Seems like I cannot avoid giving the oml here... I had to make sure the emails and names were not real one.

Thanks for looking into it.

There is a dependency on Locations, a service by "Labs".


HostManager.oml

mvp_badge
MVP
Solution

Hello again Joël,

Thank you for sharing your OML.


So I did a few changes in your code, I'll resume them in here:

  • Created a local variable SelectedCountryId (Country Identifier) and bound it to the first dropdown (Country dropdown);

  • Created another local variable SelectedRegionId (CountryState Identifier) and bound it to the second dropdown (Region dropdown);

    (These 2 local variables allow me to control only the values that the user selected. It is just a way for better understanding)

  • Changed your GetCountryStatesByCountryCode Aggregate to GetCountryStatesByCountryId. You had the correct source entities (CountryState and Country), but you needed to filter by the selected country from the first dropdown. So the filter would be:
    Country.Id = SelectedCountryId

    (This Aggregate will return the specific Regions for the selected Country and it should be bound to the second dropdown. Basically, it joins the CountryStates with the Countries by CountryCode and filters by the SelectedCountryId variable coming from the first dropdown)

  • Since the second dropdown is fully depending on the first one, you can specify the Fetch Property of GetCountryStatesByCountryId Aggregate to run Only on demand and you can enable it only when a country is selected

  • Finally, since I created 2 additional local variables for these dropdowns, I had to pass them to the GetOrganisationById.List.Current record in the SaveDetail action, because it is the record that you are passing to OrganisationCreateOrUpdate action.
    So I had to assign the values to the record before calling the server action:

Please refer to attached OML with these changes.


Let me know if it worked for you!


Kind regards,

Rui Barradas

HostManager.oml

Thanks Rui. 

It solved the immediate issue. It was great to have the walkthrough and the solution (oml) to learn. That's the point of this prototype.

I still have 2 things I don't really like about this:

1) When the value of the list is Null (or when I'm creating a new record), can I make the list show no value, instead of the first value of the list (Afghanistan in this case of a list of countries)?

2) When I edit an existing record, because I'm not triggering the OnChange event on the Country list, the Region list (CountryState) shows empty, instead of pulling the data from the record. I have to change the Country to get the list of CoutryState to refresh. 

The Dropdown properties:

The GetCountryStatesByCountryId aggregate properties:

Thanks.

Champion

Hi Joel,

You can do the following

1. Set the Fetch property of the GetCities Aggregate to Only On Demand

2. Refresh the GetCities Aggregate in the OnChange Action of the Country Dropdown.

3. Filter the GetCities Aggregate by the selected country.

Hope it helps

Hi Joël Séguin

I can try this approach.

Regards


HostManagerext.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.