Directus 11: Configuring Cascading/Conditional Dropdowns

This guide provides step-by-step instructions to configure cascading dropdowns in Directus version 11. This allows you to filter the options available in one dropdown based on the selection made in another dropdown within the same item form.

We will use the example scenario where you have the following collections and relationships:

• properties: Contains details about properties.

  • Has a Many-to-One (M2O) relationship to countries (field key: country).

  • Has an M2O relationship to states (field key: state).

  • Has an M2O relationship to cities (field key: city).

• countries: A list of countries.

• states: A list of states.

  • Has an M2O relationship to countries (field key: country).

• cities: A list of cities.

  • Has an M2O relationship to states (field key: state).

Goal:

1. When editing a properties item, the state dropdown should only show states belonging to the selected country.

2. When editing a properties item, the city dropdown should only show cities belonging to the selected state.

Prerequisites:

• You are using Directus 11.

• You have correctly set up the collections (properties, countries, states, cities) and the Many-to-One (M2O) relationships described above. Ensure you know the Field Keys (the machine-readable names, not just the display names) for each relationship field.

Step 1: Filter states based on country

1. Navigate to the state Field Configuration:

   • Go to Settings in the left-hand navigation menu.

   • Click on Data Model.

   • Select the properties collection.

   • In the list of fields, click on the state field (your M2O field linking to the states collection).

2. Configure the Interface Filter:

   • The field's configuration options will appear in the sidebar (usually on the right). Click on the Interface tab.

   • Ensure a relational interface is selected (e.g., "Select Dropdown").

   • Scroll down to the Filter setting and click "Add Filter".

3. Define the Filter Rule using the GUI Builder:

   • Field Selection (First Dropdown): Select the field within the states collection that links it to a country. Based on our example, this would likely be displayed as Country Id or simply Country. Choose the option representing the M2O relationship field from states to countries.

   • Operator (Second Dropdown): Select Equals (or "Is equal to").

   • Value (Third Input): This is the critical step. Manually type the following directly into the value input box:

     {{country}}
     
     

     • Replace country with the exact Field Key of the M2O field in your properties collection that links to the countries collection.

     • Do not select from a dropdown here; type the text {{your_country_field_key}}. Directus 11 interprets this syntax in this context as the value of the country field from the properties item currently being edited.

       

4. Save:

   • Save the filter rule.

   • Save the field configuration (checkmark or "Save" button at the top of the sidebar).

   • Save the overall Data Model changes if prompted.

Step 2: Filter cities based on state

1. Navigate to the city Field Configuration:

   • Go back to the field list for the properties collection.

   • Click on the city field (your M2O field linking to the cities collection).

2. Configure the Interface Filter:

   • Go to the Interface tab in the right sidebar.

   • Ensure a relational interface is selected.

   • Scroll down to the Filter setting and click "Add Filter".

3. Define the Filter Rule using the GUI Builder:

   • Field Selection (First Dropdown): Select the field within the cities collection that links it to a state. Based on our example, this would likely be displayed as State Id or simply State. Choose the option representing the M2O relationship field from cities to states.

   • Operator (Second Dropdown): Select Equals (or "Is equal to").

   • Value (Third Input): Manually type the following directly into the value input box:

     {{state}}
     
     

     • Replace state with the exact Field Key of the M2O field in your properties collection that links to the states collection.

     • Again, type the text {{your_state_field_key}} directly.

4. Save:

   • Save the filter rule.

   • Save the field configuration.

   • Save the Data Model changes if prompted.

Verification:

Go to the properties collection in the Content module and try creating or editing an item.

1. The country dropdown should show all countries.

2. Select a country.

3. The state dropdown should now update to show only the states linked to the selected country.

4. Select a state.

5. The city dropdown should now update to show only the cities linked to the selected state.

Key Takeaway:

In Directus 11's GUI Filter Builder for Interface options, use the double curly brace syntax ({{field_key_from_current_item}}) in the Value input field to dynamically reference values from other fields within the item currently being edited.