SAIL Recipes give you an opportunity to explore different interface design patterns. To learn how to directly use SAIL recipes within your interfaces, see Adapt a SAIL Recipe to Work with My Applications.
Show different dropdown options depending on the user selection.
This design pattern is not recommended for offline interfaces because reflecting immediate changes in an interface based on user interaction requires a connection to the server.
This scenario demonstrates:
- How to setup a dropdown field's choice labels and values based of another dropdown's selection
- How to clear a child dropdown selection when the parent dropdown value changes
Test it out
- Select "Corporate" in the first dropdown. Notice that the second dropdown is now enabled and shows the Corporate Titles. Select a title.
- Next, change the first dropdown to "Human Resources" and notice that the second dropdown now shows the placeholder label so that the user can select an applicable title.
Notable implementation details
The value of the second dropdown is reset to null when the first dropdown's value changes to ensure that the value of the selected model always matches what the user sees in the UI.