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?
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 But you can open a new feature request here in community.datocms.com!
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
Once you have these cities, you can rendered the second select with those.
I hope this helps
You can take a look at some sample plugins here: GitHub - datocms/plugins: Repository providing samples using the Plugins SDK
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
I’ve created a plugin but having issue with
I also tried
plugin.updateHeight() to no effect.
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 email@example.com 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
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.