Best way of implement Dependent/Nested filter

Hi, I need a dependent single link filter field.

For example, I’ve

  • a list of countries.
  • have a Model where I can create cities which are connected to country
  • create a tour guide article where an editor can choose country & city. When a country is chosen, I would like to show cities from that particular country.

I guess it’s sort of a common scenario. what’s the best way to achieve this? I was thinking to write a plugin. In that case, how can I create the same UI like the dato cms native select box, is there any UI component?

Hi @rislam

if you need this kind of two steps filtering, then yes a plugin would be ideal. Since plugins are implemented as iframes that load a page from an external source, you can use whichever component you like for your select inputs.

As an alternative, you could define a single text field on the city model whose purpose is to join country name and city name in a single field and make it easier for editors to search by. You can then choose this field as the title field for the model.

So, when you have to choose a city, you can somehow filter by country too:

that’s a good alternative. However, As this is a pretty common use case, do you have any plan to add dependent dropdown behavior anytime soon?

Not yet :slight_smile: But you can open a new feature request here in!

Hi @fabrizio

As there are lots of options, We wanted to write a plugin in a way that when an editor select a country (say Russia), then we would like to show filtered options (Russia: Moscow, Russia:Petersburg), so that Editor unintentionally doesn’t choose the wrong data. Is this possible? I checked the SDK and couldn’t find the proper option/method. Any hint would be appreciated.

@rislam it should be doable with a plugin attachable to link fields

Given that Country and Cities are linked somehow already in DatoCMS, your plugin should show a select of Countries at first, and then, once the user select a contry, your plugin should perform a search (using our javascript client) for all Cities of that Country.

Once you have these cities, you can rendered the second select with those.

You can’t do this with the plugins SDK only, but since a plugin is a javascript application, you can use our javascript client in there to communicate with our API and search for Cities of a specific Country.

I hope this helps :slight_smile:

You can take a look at some sample plugins here: GitHub - datocms/plugins: Repository providing samples using the Plugins SDK

1 Like

This makes sense and yes, there is a relationship. However, I’ve one more question.

Do I need to build the select UI as well? or can somehow use the dropdown UI of datocms?

Yep, you need to build the UI as well since a plugin is basically an iframe that substitute our original UI for the field you attached the plugin on.

We give some basic CSS rules that you can import in your plugin (take a look at the example here: The entry point - DatoCMS ), but no react components is provided

1 Like

I’ve created a plugin but having issue with

I also tried plugin.updateHeight() to no effect.

any comment pls @fabrizio @s.verna @mat_jack1

@rislam plugin.updateHeight() should do what you need. Maybe it’s a timing issue? You call that function when the content is not there yet?

No, it’s not a timing issue. I also tried hardcoded options. And also on choosing an option (onChange), I call plugin.updateHeight() but no luck.

FYI using this one: React-Select

can you please share the code so that we can have a look? Feel free to send it at if it’s private

I’ve sent an email with the code. I guess height issue is related to dropdown; when renders options are not expanded, so it takes the height of the select box. However, pls check the code.

We’ve resolved the iframe’s height issue. Thanks for your help.

However, As we are retrieving lots of records, it takes significant time to load. Can we limit fields in response, for example only retrieve id and title of the records? Those all we actually need.


no I’m sorry you cannot choose which fields are present in the response, but you can filter records by model. I don’t know if you are doing it already, but it will reduce the number of returned items.

Read more about items filtering: List all records - Record - Content Management API

Ok, We do use filters. Do you have any plan to support this feature, instead of only id, title, we are getting a huge payload? Sometimes edit view becomes irresponsive - shows chrome dialog wait/kill the page.

No I’m sorry we do not have plans for this. You could try to limit/paginate the results if they are too many: Pagination - DatoCMS

We are aware of the pagination feature, fetching only about 40 items but fetching body etc. makes the payload huge.

As we are just reading the data, I guess we can use content delivery graphql api instead.