Index
Edit

Sort Orders

When displaying a collection of documents it's useful to be able to sort the collection by different fields. You do this by specifying an orderings property in the schema:

{
  name: 'movie',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string'
    },
    {
      title: 'Release Date',
      name: 'releaseDate',
      type: 'date'
    },
    {
      title: 'Popularity',
      name: 'popularity',
      type: 'number'
    }
  ],
orderings: [
{
title: 'Release Date, New',
name: 'releaseDateDesc',
by: [
{field: 'releaseDate.utc', direction: 'desc'}
]
},
{
title: 'Release Date, Old',
name: 'releaseDateAsc',
by: [
{field: 'releaseDate.utc', direction: 'asc'}
]
},
{
title: 'Popularity',
name: 'popularityDesc',
by: [
{field: 'popularity', direction: 'desc'}
]
}
]
}

The orderings above define a list of possible ways to order a collection of movies. To the user these appear as options in the Studio when the movies are listed.

Conditionally render a preview based on current sort option

Sometimes it makes sense to adapt the preview to a specific ordering. For example, if the list of movies above are sorted by their rating, it makes sense to visibly show the rating in the preview. We therefore pass current sorting (if any) as a viewOption to preview.prepare.

{
  name: 'movie',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string'
    },
    {
      title: 'Release Date',
      name: 'releaseDate',
      type: 'date'
    },
    {
      title: 'Rating',
      name: 'rating',
      title: 'Rating (0 - 10)',
      type: 'number'
    }
  ],
  orderings: [
    {
      title: 'Release Date',
      name: 'releaseDate',
      by: [
        {field: 'releaseDate', direction: 'asc'}
      ]
    },
    {
      title: 'Rating',
      name: 'rating',
      by: [
        {field: 'rating', direction: 'desc'}
      ]
    }
  ],
  preview: {
    select: {
      title: 'title',
      rating: 'rating'
    },
prepare(movie, viewOptions = {}) {
const title = viewOptions.ordering && viewOptions.ordering.name === 'rating'
? `${movie.title} (${movie.rating})`
: movie.title
return {title: title}
}
} }

Previous: Icons for data typesNext: Naming Things