Finding Sections to Add to a Document Using the Reference Type Schema

2 replies
Last updated: Apr 30, 2021
Hey everyone! I need some help here. My client is having a really hard time finding sections to add to a document using the reference type schema. One of the biggest improvements she would like to have is for the results to at least be alphabetized. I know there is an "option.filter" available for the reference schema but can't find any examples of how to use it. Thanks in advance for any help!
AI Update

I totally understand your client's frustration! Finding the right section in an unsorted reference list can be really tedious. Good news - you can definitely sort reference results alphabetically in Sanity Studio.

Sorting Reference Results Alphabetically

The key is to use the options.sort property on your reference field. Here's how to set it up:

{
  name: 'section',
  type: 'reference',
  to: [{type: 'sectionType'}],
  options: {
    sort: [{field: 'title', direction: 'asc'}]
  }
}

The sort option takes an array of objects, each with a field and direction property. You can use:

  • direction: 'asc' - alphabetical A-Z
  • direction: 'desc' - reverse alphabetical Z-A

You can even sort by multiple fields:

options: {
  sort: [
    {field: 'category', direction: 'asc'},
    {field: 'title', direction: 'asc'}
  ]
}

Combining Filtering and Sorting

The options.filter property you mentioned is separate from sorting - it's for constraining which documents appear in the reference picker. You can use both together:

{
  name: 'section',
  type: 'reference',
  to: [{type: 'sectionType'}],
  options: {
    filter: '_type == "sectionType" && published == true',
    filterParams: {}, // if you need parameters
    sort: [{field: 'title', direction: 'asc'}]
  }
}

The filter property accepts a GROQ filter expression to narrow down which documents are available, while sort controls the order they appear in.

Making References Even More Findable

While you're improving the experience, you might also want to ensure your sections have good preview configurations. This helps your client see meaningful titles in the reference picker:

// In your sectionType schema
preview: {
  select: {
    title: 'title',
    subtitle: 'description'
  }
}

This combination of alphabetical sorting via options.sort plus clear preview titles should make finding sections much easier for your client!

option.filter
will let you constrain your search, but just the filter (no projections,
order()
, etc.). I tried pulling in the documents using
client.fetch()
inside the filter function and sorting them, which works, but then applying them through
params
had no effect on the order of documents in the dropdown. I think you might need to go with a custom input component to get an alphabetized reference dropdown.
thanks!

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?