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:
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.
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 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.
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.
But you can open a new feature request here in