dropdowns question

hello! i have a question, well, i have a dropdown with some data, for example, in a dropdown i have states, what i want is that when i select a specific state, a list of cities appears in another dropdown, with my team we have done it with if, if nested, match, but we keep getting errors, regarding the interface, and with the definition, it even tells us that the values of the cities in the other dropdown are invalid, for your attention, thanks alot! 

 

  Discussion posts and replies are publicly visible

  • This is pretty easy to set up once you're used to the necessary local-variable-juggling, but it *is* several different things to juggle, and takes some getting used to it.

    Without knowing what you've already tried and what specific errors you're getting (but knowing some of the possibilities from experience), here are the high-level steps you will need to make sure you've done in order to do this gracefully:

    1. set up your interface to pre-load all dropdown selection possibilities into local variables.
    2. for any variables that depend on the value selected in a previous dropdown (i.e. cities that depend on the selection of a state), use logic in the local variable definition itself to intentionally pull back a blank list when no item is selected for the dependent list.
      1. this can be done via if() logic, or by passing in a known-invalid state ID when the selected state is blank
      2. upon form load, therefore, the cities list should load empty, and
      3. ... the dropdown should be set to cleanly handle having it be empty (i.e. use property() to load the values -- property(local!cities, "id", {}), property(local!cities, "name", {}), etc.)
    3. in the saveInto for the higher-level dropdown (states in this case), be sure to add the necessary saveInto entry to clear out the value for the selected city (if any), or else if the user has selected a state AND city, then changes the state (causing the available cities to re-query), the selected city will no longer be valid and would otherwise cause a pink error.