Filter dropdown options based off another dropdown selection

I have two data sources in my app, Countries and Grades. Specific Grades are only offered in certain Countries (ie, GXL is offered in Australia and Japan, whereas GX is offered in Japan and the UK). I have these relationships set up in my data sources and am able to query using a ‘where’ parameter if I have to. In my app a user can enter the Country field first, then I’d like to be able to offer a filtered set of options where only the grades available for that Country are visible.

I have tried using the SELECT formula on the onChange event on the Country field to filter the available options SELECT(MAP(data.GradesCountries, {label:item.GradeName, value:item.GradeObjectId}),item.value==data.GradesCountries[0].CountryObjectId) but this doesn’t work. You can see here in my GradeCountries data source I have both the CountryId and GradeId.

Are you able to suggest a way I can achieve this?

Hi, you could create a page variable like chosenCountryId which you then bind to the “Selected value” of the first dropdown. This variable will populate when the user chooses a country, and then you can refer to it in the filter formula for.

So something like:

SELECT(data.GradesCountries, item.CountryId === pageVars.chosenCountryId)

Thanks Mari. I’ve tried this and it doesn’t really work. A few points of note.
data.GradesCountries is a REST datasource List of Objects with 4 properties, GradeName, GradeObjectId, CountryName and CountryObjectId. I need to use the MAP formula to ensure the GradeName is displayed as the dropdown item label and then I can be flexible with the item.value property.
I did kind of get it to work using the following:

  • New Page Variable, GradeOptions of type List of Objects with 2 properties, property names of value and label
  • This GradeOptions variable is assigned to the Grade dropdown field.
  • OnChange of the Country field I set the GradeOptions variable to the following
    SELECT(MAP(data.GradesCountries, {label:item.GradeName, value:item.CountryObjectId}),item.value==outputs[“Receive event”].eventValue)
  • This results in the correct list of options being displayed but the UI performs a bit strangely. I’m only able to actually select the first option in the dropdown and if I use up/down keys to select the value and then TAB out it reverts the actual selection back to the first option. Also, if I select a value and then change the country the selected value stays in the available options even though it shouldn’t be there.

I hope this makes sense, its quite hard to explain! Thanks again for your help, its really appreciated.

I got this working by changing the approach a bit. Solution is now as follows:

  • OnChange of Country field
  • Use Get Record Collection to re-query my datasource with the filter applied in the query
  • Set the data variable to the output of that Get Record Collection
    I would imagine doing this all client side would probably be a lot more efficient but I’m happy with the way this is working.
    Thanks
1 Like