Creating a custom input for slug autocomplete in Sanity Studio
14 replies
Last updated: Sep 13, 2021
A
I am trying to make a field that is a reference to any existing slug on the site, such that in studio the autocomplete combobox lists all slugs on the site. I thought would get me there, but the list is empty despite multiple slugs existing in the dataset. I guess slugs don't count as documents? Is this something I can do in a reasonably straight-forward manner?
{_type:_ 'reference', _to:_ {_type:_ 'slug'}}
Sep 10, 2021, 1:31 PM
Hey User! Unfortunately, you can only reference documents. You're correct, a slug field does not count as a document. Does it need to be a reference? Could you use a list of strings instead?
Sep 10, 2021, 7:19 PM
A
I can use whatever, the key feature is that I want autocomplete, and I want it as a listing of all the slugs available (even if we use a different type for the slugs). Is there a way to arbitrarily control the autofill contents (e.g. via a groq query) of an input that isn't building it from scratch?
Sep 10, 2021, 7:49 PM
Hi User. The dropdown preview should utilize the preview from each type you’re referencing, so what might work in your case is to reference all the types you want to pull in and then control the preview to have them show the slug.
If this is the reference field:
And each of those three document types have a preview like this:
Then the slug should be displayed in the reference’s dropdown. This might render your document lists differently than you want them, in which case you could put the slug as a subtitle (or the name/title as the subtitle).
If this is the reference field:
{ name: 'objective', title: 'Objective', type: 'object', fields: [ { name: 'objective', type: "reference", to: [{ type: "author" }, { type: "category" }, { type: "post" }], }, ], }
preview: { select: { title: 'slug.current', } }
Sep 10, 2021, 9:02 PM
A
Thanks for the suggestion, however that seems a rather large concession to make, at least for my purposes. If I were to get closer to the metal, is there any reason I can't create a custom input that queries the current dataset from within the input itself? That is to say, how do sanity studio UI components go about querying the dataset, if they can query it at all?
Sep 10, 2021, 9:08 PM
A
Thanks for the suggestion, however that seems a rather large concession to make, at least for my purposes. If I were to get closer to the metal, is there any reason I can't create a custom input that queries the current dataset from within the input itself? That is to say, how do sanity studio UI components go about querying the dataset, if they can query it at all?
Sep 10, 2021, 9:08 PM
You can absolutely do that. It would require implementing certain things yourself and maintaining them as they’re updated, but it’s no different than the studio components.
Sep 10, 2021, 10:24 PM
You can absolutely do that. It would require implementing certain things yourself and maintaining them as they’re updated, but it’s no different than the studio components.
Sep 10, 2021, 10:24 PM
A
that's good news, are there any special considerations regarding keeping the data fresh? Like can I just query the dataset once in some kind of react hook and then rely on that to run when the input is rendered?
Sep 10, 2021, 10:27 PM
The component is using RxJS Observables. Here’s the link to the ReferenceInput component .
Sep 10, 2021, 10:32 PM
A
is that to say that I can use those same observables in my custom component, and that's in place of the need to fetch the data? I don't see where the data is queried
Sep 10, 2021, 10:38 PM
I’m not completely sure, but I can try to find out a bit more when the team is back in next week.
Sep 10, 2021, 10:44 PM
A
thank you
Sep 10, 2021, 11:26 PM
Here’s an example where User built a custom component to reference documents in a different dataset. It’s a different use case than what you’re after and doesn’t use Sanity UI, but it showcases what it takes to create this type of custom component and is still completely functional.
Sep 11, 2021, 4:35 PM
A
Ok thanks, I think that covers all the moving pieces.
Sep 13, 2021, 3:47 PM
Sanity– build remarkable experiences at scale
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.